Problem with automatic multiple column sort and table header background colors

Hi,

thanks for your question.

I’m not really sure if this is possible, as it would basically mean to override the coloring behavior for the special case with column-6.

Can you therefore please post the link to the page with your table? I’ll then gladly take a look to see if this is possible with some CSS. A JavaScript solution for this would be really tough, as that would likely involve some extension/modification to the DataTables JS library.

Regards,
Tobias

Hi,

thanks for the link.
This is indeed tricky, and I can’t think of a CSS solution 🙁
I could however imagine a JS solution, and it doesn’t even involve the mentioned extension/modification of the DataTables library.
You could simply reset the CSS classes, by removing all sorting related classes, and the adding it again just to column-6:

jQuery('.wp-table-reloaded-id-2').find('th').removeClass('sorting_asc sorting_desc').addClass('sorting').filter('.column-6').addClass('sorting_desc');

This would need to be added into the page by using a filter hook, like the wp_table_reloaded_js_frontend_command hook.
You would then only need the first block of CSS that you posted, to change the color of the active sorting column.

Regards,
Tobia

Hi,

sure. Please create a new file named “wptr-alter-sorting-classes.php”, paste in the following code, and save the file on your server, as “/wp-content/plugins/wptr-alter-sorting-classes/wptr-alter-sorting-classes.php”. After that, activate the new plugin “WP-Table Reloaded Extension: Alter sorting classes” in your WordPress admin area.

<?php
/*
Plugin Name: WP-Table Reloaded Extension: Alter sorting classes
Version: 1.0
Author: Tobias Bäthge
*/
add_filter( 'wp_table_reloaded_js_frontend_command', 'wp_table_reloaded_alter_sorting_classes', 10, 7 );
function wp_table_reloaded_alter_sorting_classes( $command, $table_id, $html_id, $tablesorter_script, $js_command, $parameters, $js_options ) {
  if ( 2 != $table_id )
    return $command;

  $command .= "jQuery('.wp-table-reloaded-id-2').find('th').removeClass('sorting_asc sorting_desc').addClass('sorting').filter('.column-6').addClass('sorting_desc');";
  return $command;
}

Regards,
Tobias

Hi,

unfortunately, your test site is not working anymore, therefore, I can’t check 🙁
Can you publish it again?

Regards,
Tobias

Hi,

thanks! Yes, it’s not working for me either 🙁 The code is in the page, so that part works.
Very likely, the code is just run to early, i.e. the DataTables JS library hasn’t yet finished initializing the table, and with that adding the classes. So, it might be possible that our code is run first, and then the current behavior is applied.
Unfortunately, I don’t really see how we could change this 🙁 Sorry.

Regards,
Tobias

Hi,

yes, that sounds good. It might be possible to shift the execution of the code a little bit, with the JavaScript “setTimeOut” function.
And if the coloring really bothers you, you can always remove the extra coloring for the sorting_asc and sorting_desc classes. That way, you’ll only have the arrows as indicators, but these are not so “distracting” maybe.

Best wishes,
Tobias

Hi,

sure, no problem. Another idea might be to simply sort the table beforehand (i.e. on that “Edit” page, or if that gives weird results, in Excel, or even manually). That way, the table comes sorted by column 6, without DataTables having to perform an initial sort when the table is loaded.

Regards,
Tobias

Hi,

very cool! 🙂 Good to hear that this helped with this problem!

Best wishes,
Tobias