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

Posted 2023-05-09

【中文标题】为啥 DataTables 在渲染函数中剥离自定义属性？

【英文标题】：Why is DataTables stripping custom attributes in render function?为什么 DataTables 在渲染函数中剥离自定义属性？

【发布时间】：2020-11-04 23:44:43

【问题描述】：

我正在开发一个 .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 类，但这并没有什么不同。我还将表格的设置与我之前创建的所有设置进行了比较，我无法发现任何不正常的地方。任何指导表示赞赏。

【参考方案1】：

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

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

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

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

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

【讨论】：

谢谢安德鲁。我按照建议将

标记更改为 ，现在它返回以下内容，我可以使用：<td class="sorting_1"><span rateheadersid="1015">Labor</span></td>