CODEWITHSUNDEEP
jqueryrowtablesorterbackcolor
leora
leora

Reputation: 196519

jquery tablesorter plugin - retain alternative row colors

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?

Upvotes: 14

Views: 17010

Answers (6)

Alasdair
Alasdair

Reputation: 308889

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.

Upvotes: 49

alwaysVBNET
alwaysVBNET

Reputation: 3310

Via your css:

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

Upvotes: 0

Sakthivel
Sakthivel

Reputation: 1938

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 !

Upvotes: 1

holsee
holsee

Reputation: 1994

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.

Upvotes: 5

Anthony
Anthony

Reputation: 37065

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.

Upvotes: 1

dcrosta
dcrosta

Reputation: 26258

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.

Upvotes: 6

Related Questions