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

Question

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

You should be able to target every first cell of every row, every 3rd cell of every row, to target columns. See CSS pseudo classes : https://developer.mozilla.org/en-US/docs/CSS/:nth-child — kketch, Apr 01 '13 at 08:24

score 50 · Accepted Answer · answered Apr 03 '13 at 07:47

50

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

answered Apr 03 '13 at 07:47

Lukasz Koziara

4,274
5
32
43

Worked for me. Thanksss!! – BILAL AHMAD Oct 10 '17 at 18:26

score 21 · Answer 2 · answered Apr 25 '15 at 10:41

21

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

answered Apr 25 '15 at 10:41

jmarceli

19,102
6
69
67

2

This applies the style to the element too – wattry Oct 03 '19 at 12:22

score 13 · Answer 3 · answered Jan 08 '14 at 10:08

13

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

answered Jan 08 '14 at 10:08

SaschaM78

4,376
4
33
42

This works only even rows, why is it ignoring other rows – Sboniso Marcus Nzimande Jan 30 '15 at 08:30
Could you post an example here: http://jsfiddle.net/ ? I don't see why this would alter every second row. All the script does is: in case a condition is met (inside the `if` statement), the current row and cell number are used to retrieve a JQuery instance of the cell and to alter content and class of the cell. Your problem may be due to your CSS code having `tr:even td` or `tr:odd td` overwriting the style? – SaschaM78 Jan 30 '15 at 14:11
this is a very good soln. However I would like to add the class name to the selected row and not just one cell within that row. Can u plz help with that... thanks. – dkjain Mar 04 '15 at 15:08
@dkjain could you give this a try: `$('td:eq('+i+')', nRow).parent().addClass("NAME");` ? – SaschaM78 Mar 04 '15 at 15:16
Awesome!!! man that works.I pity myself as I am noob in JS, anyways 'll report back if any issues or further query.thanks. – dkjain Mar 04 '15 at 15:21
Hi, I am trying to include above code in Tablepress Wordpress plugin which uses dataTables JS library however I am not sure where to include this in the plugin core files. The tablepress\controllers\controller-frontend.php has ''. I am not sure where to include the above code in between that script tag...COULD you help out.Thanks – dkjain Mar 07 '15 at 14:20
@dkjain I added a reply to your question on [the Datatables form](https://datatables.net/forums/discussion/comment/72433/#Comment_72433), hope that'll help. – SaschaM78 Mar 09 '15 at 12:12

score 12 · Answer 4 · answered Mar 07 '17 at 17:39

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;
            }
        }
    }
],

score 9 · Answer 5 · answered Sep 23 '16 at 16:45

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.

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

5 Answers5

Linked