jquery tablesorter plugin - retain alternative row

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?

Answer 1

Via your css:

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

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.

Answer 3

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 !

Answer 4

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.

Answer 5

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.

Answer 6

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.