CODEWITHSUNDEEP
javascriptjquerydatatableshtml-table
eozzy
eozzy

Reputation: 68710

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

I'm using datatables for displaying server-side data in tables.

I can't target and style individual cells (<TD>) though. I search a bit and found it might be possible with:

"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
    ....
}

... but I'm not quite sure how because I have a few table and not all have the same number of columns and rows. I want to give common class to all TDs of a 'column'.

Upvotes: 54

Views: 103141

Answers (5)

devlin carnate
devlin carnate

Reputation: 8592

Here's how to do it using createdCell, using DataTables 1.10+ syntax. The benefit of this approach is that you can conditionally style the cells.

"columnDefs": [
{
        "targets": [16],
        "createdCell": function(td, cellData, rowData, row, col) {
            switch(cellData) {
            case "Pending":
                $(td).addClass('pending');
                break;
            case "Rejected":
                $(td).addClass('rejected');
                break;
            case "Approved":
                $(td).addClass('approved');
                break;
            case "SAP":
                $(td).addClass('sap');
                break;
            case "Reconciled":
                $(td).addClass('reconciled');
                break;
            }
        }
    }
],

Upvotes: 12

omarjebari
omarjebari

Reputation: 5519

If you want to target the row or an individual cell in a callback:

var table = $('#order-history-table').DataTable(
    {
        "ajax": url,
        "pageLength": 20,
        "createdRow": function( row, data, dataIndex ) {

            // Add a class to the cell in the second column
            $(row).children(':nth-child(2)').addClass('text-justify');

            // Add a class to the row
            $(row).addClass('important');
        }
    }
);

I was unable to get the 'createdCells' parameter to work so had to do it through the row.

Upvotes: 9

jmarceli
jmarceli

Reputation: 20172

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+.

Upvotes: 22

SaschaM78
SaschaM78

Reputation: 4497

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 :-)

Upvotes: 13

Lukasz Koziara
Lukasz Koziara

Reputation: 4320

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

Upvotes: 50

Related Questions