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, and thanks for a quick reply!

Here is a test table which shows the case.

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,
I’m quite new to WordPress and using plugins. So, could you give an example and explain a bit more where and what I should add, according this case? Thanks!

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,

I’ve added and activated the plugin, but unfortunately it didn’t solve the problem. All sorted columns still get the same bgcolor (#ffbaba). Have I done something wrong or am I still missing something? Thanks for your answer.

Hi,

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

Regards,
Tobias

Hi,

sorry, I removed it because it was only a test.
But here is the testpage again. ??

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,

OK! Anyway, thanks for your help ??

I’ll try to look and see if I could manage to find some kind of solution to this (if I find one, I’ll post it also here!) or then I just have to live with this “feature”. ??

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,

yes, I have set the header row on the production pages to have the same bgcolor. But just to fine tune it a bit, I would like to indicate that the default sorting (however, it is done by multiple column sort) is in fact by column-6 and by that the particular cell should only get the bgcolor.

Thanks for the timeout-tip, I’ll try that one out, if I can ??

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,

I got it working with the following code:

$command .= "setTimeout(function() {
  jQuery('.wp-table-reloaded-id-1').find('th').removeClass('sorting_asc sorting_desc').addClass('sorting').filter('.column-6').addClass('sorting_desc');
}, 400)";

Using setTimeout() is a bit ugly, but in this case I think it’s the easiest way to get the wanted results.

Hi,

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

Best wishes,
Tobias