jquery tablesorter plugin - retain alternative row colors

Question

I took an html table that I am applying alternative row colors to, and I added jquery table sorter on it so users can sort the table.

The issue is that the alternative row colors are all messed up now as (based on the sorting) there are multiple rows with the same background color.

Is there any way to reset the alternative row color with jquery table sorter?

Laplace

I find the easiest way is to just scan through the table when finished sorting and alternate the classname for the proper L&F. – Osteitis

i dont follow you here. it seems like jquery is doing all the sorting so where do you get a "hook" to go in and reset your table – Laplace

Can i suggest another table component instead of jquery tablesorter ? – Thesda

Answer 1

There's already a default widget zebra, built into the core, which applies the classes odd and even to alternate rows. It works whether or not you have added class=even/odd to the html file.

It's really easy to set up. I simply followed the instructions on the table sorter website, and then modified the document ready function to the following:

<script type="text/javascript">
$(document).ready(function() 
    { 
        $("#myTable").tablesorter({ 
    widgets: ['zebra'] 
    }); 
    } 
); 
</script>

I made an example while answering the question. You can view the result in action, or see the example code.

Pindaric

Answer 2

Based on Anthony's answer, but rephrased as a one-liner (mostly):

function fixStripes() {
    $('table tr').removeClass('odd even')
        .filter(':even').addClass('even').end()
        .filter(':odd').addClass('odd');
}

$("table").bind("sort", fixStripes);

JQuery calls can be "chained" as above, using operations like filter() to limit the selected elements, and .end() to "reset" to the last selection. Put another way, each .end() "undoes" the previous .filter(). The final .end() is left off, since there's nothing to do after that.

Peterec

That should be $('table tr') – Louisiana

BTW, tablesorter now seems to call sortStart and sortEnd rather than just sort. – Reest

Answer 3

In order to maintain the zebra stripes after a sort has taken place you need to trigger the zebra widget again.

$('#myTable')
.tablesorter({ widgets: ['zebra'] })
.bind('sortEnd', function(){
    $("#myTable").trigger("applyWidgets"); 
});

This is less of a hack, as you will be reusing the logic of the zebra widget rather than replicating it.

Note: This kind of work-around is only required in instances where the default zebra widget is failing. I have found in most circumstances that this hack is not required as the widget is operating correctly post sort.

Peptic

Answer 4

How about:

function fixStripes() {
     var i = 0;
     var rowclass;
     $("table tr").each(function() {
          $(this).removeClass("odd even");
          rowclass = (i%2 == 1) ? "odd" : "even";
          $(this).addClass(rowClass);
      });
}

$("table").bind("sort", fixStripes);

Oh, and if you want a really simple fix, you could hold your breath for this CSS pseudo-class to get picked up by all the major browsers:

table tr:nth-child(n+1) {
    color: #ccc;
}

But my guess is based on how FF and company handle CSS for dynamic HTML, it would set your stripes onload, but not apply the CSS after you sort. But I'd like to know for sure.

Louisiana

Think you also need $(this).removeClass('odd even') to make sure each row gets reset correctly. – Peterec

Answer 5

Revised and Latest working solution - inbuilt *This will also enable the change of colour on click.*

 <script type="text/javascript">
   $(document).ready(function () {

    $('#tblLookupResult').tablesorter({ widthFixed: true, sortList: [[0, 0], [0, 1], [0, 2]], theme: 'blue', widgets: ['zebra'] })
                          .tablesorterPager({ container: $("#pager"), size: $(".pagesize option:selected").val() });

    $('#tbltable1 tbody tr').live('click', function () {               
                    if ($(this).hasClass('even')) {
                        $(this).removeClass('even');
                        $(this).addClass('ui-selected');
                    }

                    else if ($(this).hasClass('odd')) {
                        $(this).removeClass('odd');
                        $(this).addClass('ui-selected');
                    }
                    else {
                        $(this).removeClass('ui-selected');
                        $(".tablesorter").trigger("update");
                        $(".tablesorter").trigger("applyWidgets");                         
                    }

        });

    });
</script>

Now everything should kick itself out !

Federal

Answer 6

Via your css:

  table.tablesorter tr:nth-child(even) {
        background-color: #ECFAFF;
    }

Reparation