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

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

我可以在每个表格单元格中看到这一点。我试着用

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

var数据=[
{
'姓名'：'法国'，
“玩”：1000，
“元”：11
},
{
“姓名”：“英格兰”，
“玩”：1000，
“元”：100
},
{
“名称”：“德国”，
“玩”：1000，
“元”：109
}
];
$。每个（数据、函数（i、d）{
d、 韩元百分比=（d.won/d.played）*100；
d、 元显示=d.won+'/'+d.played；
d、 元显示+='（'；
d、 韩元显示+=数学四舍五入（d.韩元百分比*10）/10；
d、 元显示+='%'）；
});
变量列=[
{“数据”：“名称”，
“标题”：“国家”
},
{“数据”：“赢得显示”，
“标题”：“赢得比赛”
},
{“数据”：空，
“标题”：“注释”，
“defaultContent”：“此处包含一些其他文本，仅用于测试响应性工作”
}  
];
var html=''；
$（'#table'）.html（html）；
$（“#myTable”）.DataTable({
数据：数据，
列：列，
订单：[[1，“说明”]]，
回答：是的，
分页：false，
搜索：假，
createdRow:函数（行、数据、行索引）{
$。每个（$（'td'，行），函数（colIndex）{
如果（colIndex==1）{
$（this.attr（'data-order'，data.won_%）；
}
});
}
});
});

如何使表格按

d.won\u%的值排序

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

JSFiddle here:
工作小提琴here:

基本上你需要一个
特殊的
排序工具：

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

jQuery.extend（jQuery.fn.dataTableExt.oSort{
“特殊预处理”：功能（a）{
var regExp=/\（[^）]+）\/；
var matches=regExp.exec（a）；
返回parseFloat（匹配[1]）；
},
“特殊asc”：功能（a、b）{
回报率（（ab）？1:0）；
},
“特殊说明”：功能（a、b）{
回报率（（ab）？-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));
   }
});

希望这就是你需要的
 这里有一个本地的方法

将此“columnDefs”对象添加到datatables设置对象中

  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;
         }
     },
  ],

这是一把小提琴：

解决方案

您可以使用jquerydatatables这个术语来为显示、排序和筛选操作提供不同的数据

此外，还需要使用
类型：“num”
显式声明列数据类型

$。每个（数据、函数（i、d）{
d、 韩元百分比={
排序：（d.won/d.played）*100
};
d、 赢得百分比。显示=
d、 赢了+'/'+d+
"("数学四舍五入(d.wonu percent.sort*10))("数学四舍五入"）/10";；
});
// ... 跳过。。。
{
“数据”：“韩元百分比”，
“标题”：“赢得比赛”，
“类型”：“num”，
“渲染”：{
“\”：“显示”，
“排序”：“排序”
}
}, 

演示

有关代码和演示，请参阅

链接



实际上，我担心它不能正常工作。更新后的数字如下：@Richard，我已经更正了我的代码，显然DataTables在使用正交数据时不会进行类型检测，因此需要使用
类型明确声明：“num”
。这段代码太棒了@很高兴你为我节省了一周的研究时间，非常感谢！
  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;
         }
     },
  ],