通过自定义排序 ID 对数据表列进行排序

Question

我正在使用jQuery DataTables 1.9.4来呈现数据。我有新的自定义类型要在单元格中显示，为每种类型添加自定义排序函数将非常棘手且难以维护，因为显示格式不容易与表示的值相关联。例如，可以3 oranges, 4 apples显示格式，然后排序值7。

我能想到的最佳解决方案是为每个单元格提供一个sortId属性，即整数，并且列的单元格将通过此sortId进行排序。

before
<td>3 oranges, 4 apples</td>
after
<td sortId="7">3 oranges, 4 apples</td>

我在网上搜索了一下，它似乎不是数据表的功能。我怎样才能做到这一点？

请注意，sortId不一定是<td>的属性，任何其他隐藏的解决方案都可以，只要不需要那么多字符。

---

数据排序属性绝对是我一直在寻找的，谢谢！

我尝试添加此属性，但没有运气（data-sort和data-order）。

• 我是否需要调整表格中的任何内容才能使其正常工作？

• 我使用的是 2012 版的数据表 （v1.9.4） 这个版本是否已经实现了这个功能？ 文件 jquery.dataTable.js 中的文本搜索显示data-order和data-sort字符串的匹配为零。

Answer 1

jQuery DataTables 1.10+

如果要使用td元素属性，则data-sort属性定义用于对 HTML 源数据进行排序的值。

<td data-sort="7">3 oranges, 4 apples</td>

有关详细信息和演示，请参阅此示例。

或者，您可以使用columns.render选项，但这更适合 Ajax 或 JavaScript 源的数据。

jQuery DataTables 1.9

在对数据进行排序时，使用 aoColumnDefs.mRender 为单元格生成内容，如下所示：

var table = $('#example').dataTable({
    "aoColumnDefs": [{
        "aTargets": [0],
        "mRender": function(data, type, full) {
            if (type === "sort") {
                var numbers = data.match(/d+/g);
                data = 0;
                for (var i = 0; i < numbers.length; i++) {
                    data += Number(numbers[i]);
                }
            }
            return data;
        }
    }]
});

请参阅此 jsFiddle 以获取代码和演示。

jQuery DataTables 1.9 的替代解决方案是使用隐藏元素并在那里提供排序值。请注意，这些值将作为字符串进行比较，因此如有必要，请在数字中添加零填充。

 <tr>
     <td><span style="display:none">0007</span> 1 apple, 6 oranges</td>
 </tr>
 <tr>
     <td><span style="display:none">0005</span> 3 apples, 2 oranges</td>
 </tr>
 <tr>
     <td><span style="display:none">0006</span> 5 apples, 1 orange</td>
 </tr>

请参阅此 jsFiddle 以获取代码和演示。