WordPress.org

Support

Support » Plugins and Hacks » WP-Table Reloaded » [Resolved] Problem with automatic multiple column sort and table header background colors

[Resolved] Problem with automatic multiple column sort and table header background colors

  • Northwave

    @northwave

    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/

Viewing 15 replies - 1 through 15 (of 15 total)
  • Plugin Author TobiasBg

    @tobiasbg

    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

    Northwave

    @northwave

    Hi, and thanks for a quick reply!

    Here is a test table which shows the case.

    Plugin Author TobiasBg

    @tobiasbg

    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

    Northwave

    @northwave

    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!

    Plugin Author TobiasBg

    @tobiasbg

    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

    Northwave

    @northwave

    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.

    Plugin Author TobiasBg

    @tobiasbg

    Hi,

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

    Regards,
    Tobias

    Northwave

    @northwave

    Hi,

    sorry, I removed it because it was only a test.
    But here is the testpage again. πŸ™‚

    Plugin Author TobiasBg

    @tobiasbg

    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

    Northwave

    @northwave

    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”. πŸ™‚

    Plugin Author TobiasBg

    @tobiasbg

    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

    Northwave

    @northwave

    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 πŸ™‚

    Plugin Author TobiasBg

    @tobiasbg

    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

    Northwave

    @northwave

    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.

    Plugin Author TobiasBg

    @tobiasbg

    Hi,

    very cool! πŸ™‚ Good to hear that this helped with this problem!

    Best wishes,
    Tobias

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘[Resolved] Problem with automatic multiple column sort and table header background colors’ is closed to new replies.
Skip to toolbar