Why is DataTables stripping custom attributes in render function? - html

Question

I'm working on a .Net MVC website and in one of the views a table is rendered using DataTables which makes an ajax call to an API. However, when the table is rendered the custom attributes I supply in the render function are being stripped out:
Here is the HTML:
<table id="table-rate-headers" class="table table-bordered table-fit table-hover table-sm" style="margin-top: 0px; width: 100%;">
<thead class="text-nowrap">
<tr>
<th>Domain</th>
<th>Project</th>
<th>Union</th>
<th>Union Local</th>
<th>Trade Class</th>
<th>Trade Class Description</th>
<th>Date From</th>
<th>Date To</th>
</tr>
</thead>
<tbody class="text-nowrap"></tbody>
</table>
And the js:
var ratesDataTable = $('#table-rate-headers').DataTable({
dom: 'rftp',
pageLength: 5,
select: true,
ajax: {
url: '/api/rates/rateheadersnormalized',
dataSrc: ""
},
columnDefs: [
{
className: 'row-border'
}
],
columns: [
{
"data": "rateDomain",
render: function (data, type, row) {
return '<td rateheadersid="' + row.rateHeaderSID + '">' + row.rateDomain + '</td>';
}
},
{
"data": "project"
},
{
"data": "union"
},
{
"data": "unionLocal"
},
{
"data": "tradeClass"
},
{
"data": "tradeClassDescription"
},
{
"data": "effectiveDateFrom",
render: function (data, type, row) {
return moment(row.effectiveDateFrom).format("MM/DD/YYYY");
}
},
{
"data": "effectiveDateTo",
render: function (data, type, row) {
return moment(row.effectiveDateTo).format("MM/DD/YYYY");
}
}
]
});
When the page is rendered, I expect to see in the dom:
<td rateheadersid="1">Labor</td>
But what I actually see is:
<td class="sorting_1">Labor</td>
Something is stripping out the custom attribute and not rendering the element as I'd expect. I tried adding "orderClasses": false but it just got rid of the class="sorting_1" and nothing else. Also tried taking out all the css classes I specified for the table and that didn't make a difference. I've also compared the setup of the table to all the previous ones I've created and I can' spot anything out of order. Any guidance appreciated.

Answer 1

The DataTables columns option is already inside the <td> and </td> tags of the HTML table cells it is trying to populate. So, it can only populate the cells content - not the cell's HTML attributes.
HTML does not let you embed another <td> inside a <td> - which is what the code is effectively trying to do.
The simplest fix is to change your <td> to a <span>:
return '<span rateheadersid="' + row.rateHeaderSID + '">' + row.rateDomain + '</span>';
That may be sufficient for your needs. If not, then you may need to provide more info in the question.