Can the jquery dataTables plugin respect alternate row colors after sorting/filtering?

Question

I am using jquery datatables plugin which seems like a useful plugin to take a regular html table and add sorting, filtering, paging, etc

One issue i see is that when i search it doesn't seem to update the "odd" / "even" row classes so if my table has 100 rows but when i filter it has 10 it might be that all 10 are the same backcolor or 8 are the same backcolor

I see the same issue after i sort by a column as well where it might "bunch up" a bunch of rows with teh same backcolor after I sort by a column.

Is there anyway that the datatables plugin can reapply even/odd styling after the filter so no matter what you are filtering, there is always alternate row backcolor?

Answer 1

CAUSE

This functionality is available by default. Most likely the reason for this unusual behavior:

• you override odd and even classes in your CSS, or
• your code affects table structure after filtering

SOLUTION #1

1. Default styling or jQuery UI or Foundation

   Use class display for your <table> as shown below. See Default styling options for a list of all available classes.

    <table id="example" class="display" cellspacing="0" width="100%">   
   

   See this jsFiddle for demonstration.

2. Bootstrap

   Use classes table table-striped table-bordered for your <table> as shown below:

    <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
   

   See this jsFiddle for demonstration.

SOLUTION #2

If there is a CSS rule that overrides odd and even classes you can instruct jQuery DataTables to use alternative classes instead with stripeClasses option.

$('#example').DataTable( {
  "stripeClasses": [ 'odd-row', 'even-row' ]
} );

Answer 2

To archive this you have to use Base style - no styling classes datatable to do this just remove datatable classes from table tag

After this create your own classes for odd (e.g myodd ) and even(e.g myeven ) rows.

now the next task is to apply these classes to the table rows on each table draw means:

1. When filters are applied

2. When limit of visible records is changed etc.

To do this datatabe provides rowCallback() you can use this in this way:

 $('#myTabel').dataTable({
        "rowCallback": function( row, data, index ) {
            if(index%2 == 0){
                $(row).removeClass('myodd myeven');
                $(row).addClass('myodd');
            }else{
                $(row).removeClass('myodd myeven');
                 $(row).addClass('myeven');
            }
          }
    });

Please Note:

To avoid !important in css rule define css rule for odd, even rows like this:

table.dataTable tbody tr.myeven{
    background-color:#f2dede;
}
table.dataTable tbody tr.myodd{
    background-color:#bce8f1;
}

DEMO: http://jsfiddle.net/ishandemon/4za80xky/

Answer 3

My this comment is applicable for how to REMOVE or MODIFY Jquery Datatable Row classes

Datatables now provide an optional json parameter named as defined for its 1.10+ documentation.

so if you want to completely remove odd even classes then use the following parameter during tables initialization.

$('#example').dataTable( {
  "stripeClasses": [] //Empty Array.
} );

so if you want to apply custom css class on every row of Datatables then.

$('#example').dataTable( {
  "stripeClasses": ['yourRowClass']
} );

If you want to apply more than 1 css class (in odd even or sequential manner) such that these classes will repeat them-self on after every nth row is completed then use this

$('#example').dataTable( {
  "stripeClasses": [ 'strip1', 'strip2', 'strip3' ] //This combination will repeat always 3rd row
} );

DataTables will apply each class sequentially, looping when required.