WordPress.org

Ready to get started?Download WordPress

Forums

WP-Table Reloaded
[resolved] Problem with automatic multiple column sort and table header background colors (16 posts)

  1. Northwave
    Member
    Posted 1 year ago #

    Hi all,

    I'm using the WP-Table Reloaded and I have a multiple column sort applied to it automatically when a user enters the table page. My problem is now, that I would like to use the CSS code below to only change the background color of column-6 when the page is loaded.

    .wp-table-reloaded-id-2 .sorting_asc, .wp-table-reloaded-id-2 .sorting_desc {
      background-color: #ffbaba!important;
    }

    However, when I use multiple column sort, it changes all the sorted column headercell's bgcolor to #ffbaba.

    I have tried the following code:

    .wp-table-reloaded-id-2 .sorting_asc, .wp-table-reloaded-id-2 .sorting_desc {
      background-color: #dddddd;
    }
    
    .wp-table-reloaded-id-2 .row-1 .column-6 {
       background-color: #ffbaba!important;
    }

    This code works OK when the page is loaded for the first time, then the column-6 gets the correct background color. But then comes the problem when the user sorts another column. The column-6 still is left with the bgcolor #ffbaba and the "new" sorted column gets bgcolor #dddddd. What I would like to achieve, is that when the user sorts some column, it changes the column-6 to #dddddd (if column-6 isn't the new sorted one) and the new sorted column gets bgcolor #ffbaba.

    Is there a way to get this working? With some Javascript maybe?

    Thanks for your replies!

    http://wordpress.org/extend/plugins/wp-table-reloaded/

  2. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    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

  3. Northwave
    Member
    Posted 1 year ago #

    Hi, and thanks for a quick reply!

    Here is a test table which shows the case.

  4. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    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

  5. Northwave
    Member
    Posted 1 year ago #

    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!

  6. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    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

  7. Northwave
    Member
    Posted 1 year ago #

    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.

  8. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

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

    Regards,
    Tobias

  9. Northwave
    Member
    Posted 1 year ago #

    Hi,

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

  10. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    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

  11. Northwave
    Member
    Posted 1 year ago #

    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". :)

  12. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    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

  13. Northwave
    Member
    Posted 1 year ago #

    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 :)

  14. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    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

  15. Northwave
    Member
    Posted 1 year ago #

    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.

  16. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    very cool! :-) Good to hear that this helped with this problem!

    Best wishes,
    Tobias

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.