Adding a classname to td (column) of the datatable

Question

I want to add a class to my <td> tags in my table. Here is my code

var dtVouchers = $('#tblVouchers').DataTable();
 dtVouchers.row.add([
                     '<span>'+text+'</span>',
                       '<span>'+data._voucherCode+'</span>',
                         ....                         
                     ]).draw( true );

and here is the my result

<tr role="row" class="even">
    <td class="sorting_1"><span>Valid</span></td>
    <td><span>be6875f9-5af7-4</span></td>
</tr>

but I would like to haves something

<tr role="row" class="even">
    <td class="vocuherrow sorting_1"><span>Valid</span></td>    
    <td class="vocuherrow"> <span>dd4ce858</span></td>
</tr>

I've tried "addClass" but it adds the class to my <tr> (row) not <td> (column)

So, my question is how to add "vocuherrow" as a classname to my each column?

Edit: I prefer the add class while I am addding rows.. not seperatetly.

StPiere · Answer 1 · 2019-05-09T10:50:21.243

2

$('#tblVouchers').find('td').addClass('vocuherrow');

or you can leave class 'vocuherrow' on tr and use

tr.vocuherrow  td

or similar in your css selects, which I vould normally prefere

edited May 09 '19 at 10:50

answered May 09 '19 at 09:22

StPiere

4,113
15
24

is it not possible to do this while I am creating the rows? – ertan2002 May 09 '19 at 09:23
if DataTable plugin provides such on option .. otherwise you can always to it after plugin init as above. haven't used this plugin, so I can't tell you about its options – StPiere May 09 '19 at 09:24
thank you for the reply. I've found addClass method but its for complete row not for row's children (columns) – ertan2002 May 09 '19 at 09:26
well, then you've answered your own question – StPiere May 09 '19 at 09:26
maybe there is another way to do it :) – ertan2002 May 09 '19 at 09:27

Yevhen Horbunkov · Accepted Answer · 2019-05-10T13:42:09.910

1

You can make use of columnDefs.className option, like this:

var dtVouchers = $('#tblVouchers').DataTable({
   columnDefs : [{
      targets: '_all',
      className: 'vocuherrow'
   }]
});

Following demo illustrates the concept:

//src data
const srcData = [
  {voucher: 'dd4ce858', status: 'valid'},
  {voucher: 'dabce769', status: 'valid'},
  {voucher: '4bdacef5', status: 'valid'},
];

//datatables initialization
dtVouchers = $('#tblVouchers').DataTable({
  dom: 't',
    data: srcData,
    columns: ['voucher', 'status'].map(header => ({title: header, data: header})),
  columnDefs: [{
    targets: '_all',
    className: 'vocuherrow'
   }
  ]
});

tbody .vocuherrow {
  color: green;
}

<!doctype html>
<html>
<head>
  <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
<table id="tblVouchers"></table>
</body>
</html>

edited May 10 '19 at 13:42

answered May 09 '19 at 19:50

Yevhen Horbunkov

14,965
3
20
42

I got the following error: DataTables warning: table id=tblVouchers - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3 – ertan2002 May 10 '19 at 06:33
You should use above code **instead** your `$('#tblVouchers').DataTable()` within `var dtVouchers` assignment – Yevhen Horbunkov May 10 '19 at 06:43
thank you for the anwser and sorry for the late reply. Well I copied and pasted from your code but does not work. I got the same error! @U25lYWt5IEJhc3RhcmQg – ertan2002 May 10 '19 at 13:26
That error basically means that you're trying to execute `$('#tblVouchers').DataTable(...)` more than once in your code, so, please, make sure you don't. – Yevhen Horbunkov May 10 '19 at 13:34
@ertan2002 : mind the example I have appended to my answer, where I apply custom CSS by the class name and use that code in action. – Yevhen Horbunkov May 10 '19 at 13:42

Adding a classname to td (column) of the datatable

2 Answers2