为什么 DataTables 在渲染函数中剥离自定义属性？

Question

我正在开发一个 .Net MVC 网站，在其中一个视图中，使用 DataTables 呈现了一个表格，该表格对 API 进行了 ajax 调用。但是，当表格被渲染时，我在渲染函数中提供的自定义属性被剥离：

这是 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>

还有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");
                    }
                }
            ]
        });

当页面被渲染时，我希望在 dom 中看到：

<td rateheadersid="1">Labor</td>

但我实际看到的是：

<td class="sorting_1">Labor</td>

有些东西正在剥离自定义属性，而不是像我期望的那样呈现元素。我尝试添加 "orderClasses": false 但它只是摆脱了 class="sorting_1" 而没有别的。还尝试取出我为表格指定的所有 css 类，但这并没有什么不同。我还将表格的设置与我之前创建的所有设置进行了比较，我无法发现任何不正常的地方。任何指导表示赞赏。

Answer 1

DataTables columns 选项已经在它试图填充的 HTML 表格单元格的 <td> 和 </td> 标记内。因此，它只能填充单元格内容 - 而不是单元格的 HTML 属性。

HTML 不允许您在 <td> 中嵌入另一个 <td> - 这是代码实际上试图做的事情。

最简单的解决方法是将您的<td> 更改为<span>：

return '<span rateheadersid="' + row.rateHeaderSID + '">' + row.rateDomain + '</span>';

这可能足以满足您的需求。如果没有，那么您可能需要在问题中提供更多信息。