DataTables添加数据顺序

时间:2018-08-07 05:52:25

标签: javascript sorting datatables

我正在尝试通过在createdCell回调中添加数据顺序来对表进行排序-工作正常,但似乎表缓存在此之后未更新-按第一列(数据顺序中带有时间戳的日期排序)根本不起作用。 我尝试过table.rows / cells().invalidate()-无效。

$.ajax({
            type: "POST",
            url: getLayoutData().urls.get_validation_history,
            data: {
                build_pk: build_pk,
                type: validation_type,
            },
            success: function(response){
                var response_data = JSON.parse(response);
                var table = $("#validationHistoryTable").DataTable({
                    data: response_data.snapshots,
                    destroy: true,
                    autoWidth: false,
                    columns: [
                        {data: 'updated'},
                        {data: 'updated_by'},
                        {data: 'type'},
                        {data: 'status'},
                        {data: 'comment'},
                    ],
                    columnDefs: [
                        {"width": "30%", "targets": 4},
                        {"targets": 0,
                         "createdCell": function(td, cellData, rowData, row, col){
                            raw = $(td).text().split(" ");
                            date = raw[0].split(".");
                            iso_time = date[2]+'-'+date[1]+'-'+date[0]+' '+raw[1];
                            $(td).attr('data-order', Date.parse(iso_time).getTime());
                         }
                        }
                    ],

1 个答案:

答案 0 :(得分:1)

您不能通过操作节点来插入正交数据。您可以通过节点和data-*处理现有并识别invalidate()的值,但不能作为DOM节点的后处理的一部分。查看 https://datatables.net/manual/data/orthogonal-data data-*值可以由

指定
  • 标记
  • 指向其他JSON属性的呈现文字
  • 渲染回调

在这个小例子中查看概念证明-> http://jsfiddle.net/rtu0bjz6/

{
  targets: 2,
  createdCell: function(td, cellData, rowData, row, col){
     counter++
     $(td).attr('data-order', counter)
  }   
} 

没有任何作用。该列按其原始数据而不是其data-order排序。但是,如果您使用的是render()函数,并且在type "sort"上返回一个特殊值,那么它将按预期工作。

{
  targets: 3,
  render: function ( data, type, row, meta ) {
    return type == 'sort' ? meta.row : data
  }
}

因此,在您的情况下,您可以执行类似(未经测试)的操作:

{
  targets: 0,
  render: function ( data, type, row, meta ) {
     if (type == 'sort') {
       var raw = data.split(" ");
       var date = raw[0].split(".");
       var iso_time = date[2]+'-'+date[1]+'-'+date[0]+' '+raw[1];
       return Date.parse(iso_time).getTime()
     } else {
       return data
     }
  }
}