javascript - 通过自定义 sortId 对 dataTables 列进行排序

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>

我在网上搜索了一下，这似乎不是dataTables的功能。我怎样才能实现这一目标？

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

<小时/>

data-sort属性绝对是我正在寻找的谢谢!

我尝试添加此属性，但没有成功(都使用 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>

参见this example了解更多信息和演示。

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

jQuery 数据表 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;
        }
    }]
});

参见this 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>

参见this jsFiddle用于代码和演示。