Why is DataTables stripping custom attributes in render function?

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.