DataTables：按数字数据排序 – 不工作？
我正在使用DataTables 1.10版。 当列中显示的值不是数字时，我想使用数值对列进行排序。
我可以看到我需要做的是为每个表格单元添加一个data-sort属性 。 我尝试使用createdRow方法添加它，但是尽管我可以在HTML中看到该属性，但它并没有按数字排序。
这是我的代码：
var data = [ { 'name': 'France', 'played': 1000, 'won': 11 }, { 'name': 'England', 'played': 1000, 'won': 100 }, { 'name': 'Germany', 'played': 1000, 'won': 109 } ]; $.each(data, function(i, d) { d.won_percent = (d.won / d.played) * 100; d.won_display = d.won + '/' + d.played; d.won_display += ' ('; d.won_display += Math.round(d.won_percent * 10) / 10; d.won_display += '%)'; }); var columns = [ { "data": "name", "title": "Country" }, { "data": "won_display", "title": "Games won" }, { "data": null, "title": "Notes", "defaultContent": 'Some other text here, included just to test that responsive works' } ]; var html = '
'; $('#table').html(html); $("#myTable").DataTable({ data: data, columns: columns, order:[[1, "desc"]], responsive: true, paging: false, searching: false, createdRow: function (row, data, rowIndex) { $.each($('td', row), function (colIndex) { if (colIndex === 1) { $(this).attr('data-order', data.won_percent); } }); } }); });
如何让我的表格按d.won_percent的值排序？
请注意，我还在构建一个响应表，这意味着我需要注意使用render事件。
JSFiddle： http ： //jsfiddle.net/07nk5wob/5/
解
您可以使用正交数据 ，这是jQuery DataTables用于为显示，排序和过滤操作提供不同数据的方法。
您还需要使用type: "num"显式声明列数据类型。
$.each(data, function (i, d) { d.won_percent = { sort: (d.won / d.played) * 100 }; d.won_percent.display = d.won + '/' + d.played + ' (' + Math.round(d.won_percent.sort * 10) / 10 + '%)'; }); // ... skipped ... { "data": "won_percent", "title": "Games won", "type": "num", "render": { "_": "display", "sort": "sort" } },
DEMO
有关代码和演示，请参阅更新的jsFiddle 。
链接
- 正交数据示例
这是一种本地的做法
在datatables设置对象中添加此“columnDefs”对象
columnDefs: [ { targets: [1], // cell target render: function(data, type, full, meta) { if(type === "sort") { var api = new $.fn.dataTable.Api(meta.settings); var td = api.cell({row: meta.row, column: meta.col}).node(); // the td of the row data = $(td).attr('data-order'); // the data it should be sorted by } return data; } }, ],
这是一个工作小提琴： http ： //jsfiddle.net/07nk5wob/6/
在这里工作小提琴： http ： //jsfiddle.net/annoyingmouse/07nk5wob/9/
基本上你需要一个special分类东西：
jQuery.extend( jQuery.fn.dataTableExt.oSort, { "special-pre": function ( a ) { var regExp = /\(([^)]+)\)/; var matches = regExp.exec(a); return parseFloat(matches[1]); }, "special-asc": function ( a, b ) { return ((a < b) ? -1 : ((a > b) ? 1 : 0)); }, "special-desc": function ( a, b ) { return ((a < b) ? 1 : ((a > b) ? -1 : 0)); } });
这是你的问题的工作小提琴 。
你可以实现自己的排序插件来做到这一点。 这很简单。 在这里，我通过添加percentage排序方法扩展了DataTable插件。 您可以在percentage-pre方法中看到，我只返回您要排序的数值。
jQuery.extend( jQuery.fn.dataTableExt.oSort, { "percentage-pre": function ( a ) { var regExp = /\(([^)]+)\)/; var matches = regExp.exec(a); var exactVal = matches[1]; return parseFloat(exactVal.slice(0, -1)); }, "percentage-asc": function ( a, b ) { return ((a < b) ? -1 : ((a > b) ? 1 : 0)); }, "percentage-desc": function ( a, b ) { return ((a < b) ? 1 : ((a > b) ? -1 : 0)); } });
然后在上面的小提琴你可以看到，我在DataTable init方法中添加下面的代码：
columnDefs: [ { type: 'percentage', targets: 1 } ]
希望这是你需要的！