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

这是一种原生方式

在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/

Answer 2

<强>解

您可以使用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 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 }
 ]

希望这是你所需要的！

DataTables：按数字数据排序 - 不工作？

4 个答案: