leora leora - 1 year ago 221
jQuery Question

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

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 Source


This functionality is available by default. Most likely you override odd and even classes in your CSS, or using an older version of the jQuery DataTables or using one of the extensions affecting how the table is structured.


  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.


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' ]
} );