数据表：按数字数据排序 - 不工作？ [英] DataTables: sort by numeric data-order not working?

问题描述

我正在使用DataTables 1.10版。我想通过数字值列出列，当列中显示的值不是数字时。

我可以看到我需要做的是添加一个 data-sort 属性到每个表格单元格。我已经尝试使用 createdRow 方法添加它，但是尽管我可以在HTML中看到属性，但并不是按数字排序。

这是我的代码：

  var data = [
 {
'name'：'France'，
'playing'：1000，
'won'：11 
}，
 {
'名称'：'英格兰'，
'playing'：1000，
'won'：100 
}，
 {
'name'：'Germany'，
'playing'：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：游戏赢
}，
 {data：null，
title：Notes，
defaultContent 这里的其他一些文字，只是为了测试这种反应性的工作
} 
]; 
 var html ='< table class =table table-bordered table-hovercellspacing =0width =100％id =myTable>< / table>'; 
 $（'＃table'）。html（html）; 
 $（＃myTable）。DataTable（{
 data：data，
 columns：columns，
 order：[[1，desc]]，
 response：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 /

解决方案

解决方案 p>

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

还需要显式地列出列数据键入 type：num。

  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 +'％）' ; 
}）; 
 
 // ...跳过... 
 
 {
数据：won_percent，
标题：游戏赢 ，
type：num，
render：{
_：display，
sort：sort
} 
}，
  

DEMO

请参阅更新的jsFiddle 代码和演示。

LINKS

• 正交数据示例

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

这篇关于数据表：按数字数据排序 - 不工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！