通过自定义 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 数据表 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。