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

Question

我正在 .Net MVC 网站上工作，在其中一个视图中，table 是使用 DataTables 呈现的，它对 API 进行了 ajax 调用。但是，当呈现 table 时，我在呈现函数中提供的自定义属性将被删除：

这里是 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" 而没有别的。还尝试取出我为 table 指定的所有 css classes，但没有任何区别。我还将 table 的设置与我之前创建的所有设置进行了比较，我无法发现任何不正常的地方。任何指导表示赞赏。

Answer 1

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

HTML 不允许您在 <td> 中嵌入另一个 <td> - 这正是代码有效尝试做的事情。

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

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

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

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

Why is DataTables stripping custom attributes in render function?

html

css

jquery

rendering

datatables