Giving custom classes to each TD for styling - Datatables & jQuery Giving custom classes to each TD for styling - Datatables & jQuery javascript javascript

Giving custom classes to each TD for styling - Datatables & jQuery


You can use sClass parameter in Columns definition. For example, if you have 3 columns and want to pass custom class for second and third column, you can:

"aoColumns": [    null,    { "sWidth": "95px", "sClass": "datatables_action" },    { "sWidth": "45px", "sClass": "datatables_action" }]

You can check datatables documentation


You can use columnDefs to define classes for each column.

Example in coffeescript:

$('table').dataTable(  columnDefs: [    {      targets: -1 # targets last column, use 0 for first column      className: 'last-column'    }  ]);

This is using new API 1.10+.


For those who found this question when searching for fnRowCallback and want to add styling based on cell content rather than using static css classes, using the fnRowCallback will do the trick:

oTable = $('#matrix').dataTable({  ...  "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {    for (var i in aData)  {      // Check if a cell contains data in the following format:      // '[state] content'      if (aData[i].substring(0,1)=='[') {        // remove the state part from the content and use the given state as CSS class        var stateName= aData[i].substring(1,aData[i].indexOf(']'));        var content= aData[i].substring(aData[i].indexOf(']')+1);        $('td:eq('+i+')', nRow).html(content).addClass(stateName);      }    }  }});

Hope this may be useful for some future visitor :-)