[Gelöst] Sorting nested tables

[Author]

Artikel

[Waqar]

Hi Steffen,

Thanks for writing back.

During troubleshooting, I noticed that the parent view "Alle Bewerbungen (parent)" is set to show "Jobs" post types and the child view "Bewerbung (child)" is set to show "Bewerbungen" post types.

The custom field "Bewertung Kandidat" is being used with post types "Bewerbungen" and not the "Jobs". This is why when the parent view is filtered through that custom field for sorting, no results are shown. This is how the WordPress query works and is not something specific to the Toolset Views plugin.

A better way to include a table sorting functionality, in this case, would be to stop using Toolset View's own sorting feature and use a third-party table sorter script, which doesn't involve, database queries.

You'll first remove all the shortcodes "wpv-heading" from your parent view and add regular text headings/labels, which will give you a regular table HTML, but without the sorting feature.

After that, you can include any of the following third-party scripts, to include front-end table sorting:

versteckter Link
versteckter Link

For more personalized assistance around custom code/scripts, you can hire a professional from our list of recommended contractors: https://toolset.com/contractors/

regards & a Happy New Year,
Waqar

[SteffenM1628]

Hey Waqar,

thanks for your answer.
but i need help installing the plugin and getting this to work in wordpress.
I have downloaded the plugin and put it in the js directory in the child theme.
then i put this code in my child functions:

//table-sorter plugin
function my_theme_scripts_sorting() {
    wp_enqueue_script( 'tablesorter', get_stylesheet_directory_uri() . '/js/jquery.tablesorter.js', array( 'jquery' ), 'false', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts_sorting' );

then i went to the parent view and pasted this code in to test if this is working (versteckter Link)

 
$(function() {

  // call the tablesorter plugin
  $("table").tablesorter({
    theme : 'blue',

    // sort on the first column and in ascending order PRIOR TO the sort on the selected column
    sortForce: [[0,0]]
  });

});

this is my table html:

[wpv-layout-start]
	[wpv-items-found]
<div class='table-responsive'>
	<table width="100%" class='tablesorter'>
		<thead>
			<tr>
              	<th>Profilbild</th>
				<th>Bewerber</th>
				<th>Job</th>
				<th>Bewerbungssdatum</th>
              	<th>Status Bewerbung</th>
				<th>Bewertung Kandidat</th>
              	<th>Bearbeiten</th>
              	
              	
			</tr>
		</thead>
	<!-- wpv-loop-start -->
	<wpv-loop>
		[wpv-post-body view_template="loop-item-in-jobs-parent"]
	</wpv-loop>
	<!-- wpv-loop-end -->
    </table>
</div>
	[/wpv-items-found]
	[wpv-no-items-found]
	 Nothing found!!!!!!!!!!!!!
	[elementor-template id="1326"]
	[/wpv-no-items-found]
[wpv-layout-end]

but the plugin is not working?!

[Waqar]

Hi Steffen,

Thanks for sharing the update.

I noticed that the "tbody" tag in your final table was repeating for each row/entry when it should be only available once.

Please remove it from your child view "Bewerbung (child)" ( screenshot: versteckter Link ) and add it to the parent view "Alle Bewerbungen (parent)" ( screenshot: versteckter Link ) and the sorting will work.

To make sure that the styles from the sorter script library are also loaded, please load the CSS file as well.
( screenshot: versteckter Link - ref: versteckter Link )

regards,
Waqar

[SteffenM1628]

Hey Waqar, thanks for the hint. Everything is working fine.
One single question is still there. How can i use the script only on two pages in wordpress?
Is it possible to change the function of the embed script in my functions.php?

Something like this:
if (is_page('slug1', 'slug2')

Could you help me with that?

Cheers

[Waqar]

Hi Steffen,

Glad that the table sorting is working.

You can use an array of multiple page slugs with "is_page" function, as shown in this example:
https://developer.wordpress.org/reference/functions/is_page/#div-comment-1031

//table-sorter plugin
function my_theme_scripts_sorting() {
	// load only on pages with included slugs
	if( is_page( array( 'slug1', 'slug2', 'slug3' ) ) {
		wp_enqueue_script( 'tablesorter', get_stylesheet_directory_uri() . '/js/jquery.tablesorter.js', array( 'jquery' ), 'false', true );
	} 
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts_sorting' );

I hope this helps and you're welcome to open a new ticket for a new/different question or concern.

regards,
Waqar

[SteffenM1628]

hey waqar,

couldn´t save your code because of this error:

syntax error, unexpected ';'

[Waqar]

Hi Steffen,

I apologize for the typo and there is a closing bracket missing from line# 5.

Please update it from:

if( is_page( array( 'slug1', 'slug2', 'slug3' ) ) {

To:

if( is_page( array( 'slug1', 'slug2', 'slug3' ) ) ) {

regards,
Waqar

[SteffenM1628]

nope waqar!

new error message for saving:

syntax error, unexpected ' if' (T_STRING)

[SteffenM1628]

My issue is resolved now. Thank you!