DataTables：按数字数据顺序排序不起作用？

Question

我正在使用 DataTables 1.10 版。当列中显示的值不是数字时，我想让列按数值排序。

我可以在每个表格单元格中看到 what I need to do is add a data-sort attribute。我尝试使用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 class="table table-bordered table-hover" cellspacing="0" width="100%" id="myTable"></table>';
  $('#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 的值排序？

请注意，我还在构建一个响应式表，这意味着我需要小心使用渲染事件。

这里的JSFiddle：http://jsfiddle.net/07nk5wob/5/

Answer 1

解决方案

您可以使用orthogonal data，这是 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"
    }
}, 

演示

有关代码和演示，请参阅 updated jsFiddle。

链接

• Orthogonal data example

Answer 2

这是一种原生方式

在数据表设置对象中添加这个“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/

Answer 3

在这里工作：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));
   }
}); 

Answer 4

这是解决您问题的有效fiddle。

您可以实现自己的排序插件来做到这一点。这很简单。在这里，我通过添加 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 }
 ] 

希望这是你需要的！