javascript - Adding a classname to td (column) of the datatable

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.

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.

Share Improve this question edited May 9, 2019 at 20:05 EternalHour 8,6816 gold badges39 silver badges58 bronze badges asked May 9, 2019 at 9:18 boss 1,6063 gold badges37 silver badges77 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 2

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./jquery-3.3.1.min.js"></script>
  <script type="application/javascript" src="https://cdn.datatables/1.10.19/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
<table id="tblVouchers"></table>
</body>
</html>

$('#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

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744928343a4601579.html

javascript - Adding a classname to td (column) of the datatable - Stack Overflow

2 Answers 2

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - Adding a classname to td (column) of the datatable - Stack Overflow

2 Answers 2

相关推荐