DataTables:按数字数据顺序排序不起作用? [英] DataTables: sort by numeric data-order not working?

问题描述

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

我可以看到 我需要做的是添加一个 data-sort 属性 到每个表格单元格.我尝试使用 createdRow 方法添加它，但是虽然我可以在 HTML 中看到该属性，但它没有按数字排序.

这是我的代码:

var 数据 = [{'name': '法国','播放':1000，'赢':11},{'name': '英格兰','播放':1000，'赢':100},{'name': '德国','播放':1000，'赢':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 列 = [{数据":名称"，"title": "国家"},{数据":won_display"，"title": "游戏获胜"},{数据":空，"title": "备注","defaultContent": '此处包含一些其他文本，仅用于测试响应式作品'}];var html = '<table class="table table-bordered table-hover" cellspacing="0" width="100%" id="myTable"></table>';$('#table').html(html);$("#myTable").DataTable({数据:数据，列:列，顺序:[[1，desc"]]，响应:真实，分页:假，搜索: 假，createdRow:函数(行，数据，行索引){$.each($('td', row), 函数 (colIndex) {如果(colIndex === 1){$(this).attr('data-order', data.won_percent);}});}});});

如何让我的表格按 d.won_percent 的值排序?

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

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

解决方案

解决方案

您可以使用 正交数据，这是 jQuery DataTables 用于提供不同用于显示、排序和过滤操作的数据.

您还需要使用 type: "num" 显式声明列数据类型.

$.each(data, function (i, d) {d.won_percent = {排序: (d.won/d.played) * 100};d.won_percent.display =d.won + '/' + d.played +' (' + Math.round(d.won_percent.sort * 10)/10 + '%)';});//... 跳过 ...{"data": "won_percent","title": "游戏获胜",类型":数量"，使成为": {_: 展示"，排序":排序"}},

<块引用>

演示

有关代码和演示，请参阅更新的 jsFiddle.

<块引用>

链接

• 正交数据示例

I am using DataTables version 1.10. I want to make a column sortable by a numeric value, when the value shown in the column is not numeric.

I can see that what I need to do is add a data-sort attribute to each table cell. I've tried adding this with the createdRow method, but although I can see the attribute in the HTML, it's not sorting numerically.

This is my code:

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);
        }
      });
    }
  });
});

How can I get my table to sort by the value of d.won_percent?

Note that I'm also building a responsive table, which means that I need to be careful about using render events.

JSFiddle here: http://jsfiddle.net/07nk5wob/5/

解决方案

SOLUTION

You can use orthogonal data which is the term jQuery DataTables uses for a way of providing different data for display, sort and filter operations.

Also you need to explicitly state column data type with 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

See updated jsFiddle for code and demonstration.

LINKS

• Orthogonal data example

这篇关于DataTables:按数字数据顺序排序不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！