DataTables 如何确定列类型

How DataTables determine columns type

我有一个由 jQuery DataTables 增强的动态 table,它显示类似于此 example 的自定义对象。

JSON:

{
  "data": [
    {
      "name": "Tiger Nixon",
      "position": "System Architect",
      "salary": "0,800",
      "start_date": {
        "display": "SomeString",
        "timestamp": 1303686000
      },
      "office": "Edinburgh",
      "extn": "5421"
    },
    // ... skipped ...
]}

JavaScript:

$(document).ready(function() {
    $('#example').DataTable( {
        ajax: "data/orthogonal.txt",
        columns: [
            { data: "name" },
            { data: "position" },
            { data: "office" },
            { data: "extn" },
            { data: {
                _:    "start_date.display",
                sort: "start_date.timestamp"
            } },
            { data: "salary" }
        ]
    } );
} );

不同之处在于我动态构建列配置,因为列可以按任何顺序排列,其他列可以添加到列表中或从列表中删除。对于这个例子(我的情况非常相似)问题是由于某种原因 timestamp 属性 被排序为字符串而不是被排序为数字。

我发现在将列 "type" 设置为 "number" 后,排序工作正常。我假设 DataTables 出于某种原因自动将列检测为 "String"(可能是因为显示元素是字符串)。

在未明确声明的情况下,DataTables 如何设置列的类型?

编辑 1

我做了一个示例代码来说明问题 http://jsfiddle.net/Teles/agrLjd2n/16/

jQuery DataTables 有内置的类型检测机制。 various types 有多个预定义函数,回退到 string 数据类型。

也可以使用 third-party plug-ins 或自己编写。

指定数据类型的方式有多种,以下只是其中的几种。

SOLUTION 1

使用 type 选项。

$(document).ready(function() {
    $('#example').DataTable( {
        ajax: "data/orthogonal.txt",
        columns: [
            { data: "name" },
            { data: "position" },
            { data: "office" },
            { data: "extn" },
            { data: "start_date.display", type: "date" },
            { data: "salary" }
        ]
    } );
} );

SOLUTION 2

使用返回的 JSON 数据进行类型检测,有关详细信息,请参阅 columns.data

$(document).ready(function() {
    $('#example').DataTable( {
        ajax: "data/orthogonal.txt",
        columns: [
            { data: "name" },
            { data: "position" },
            { data: "office" },
            { data: "extn" },
            { data: {
                _:    "start_date.display",
                sort: "start_date.timestamp",
                type: "start_date.timestamp",
            } },
            { data: "salary" }
        ]
    } );
} );

DataTables 始终检查列 "data" 的 "type" 属性 以自动检测列的类型,如果未指定 "type" 属性它将检查默认值“_”。

因此,如果您希望 DataTables 自动检测列的类型,检查您的 "sort" 属性 的类型,您应该将数据的 "type" 属性 设置为等于您的 "sort" 值

这是一个示例 code,它采用不同的方法来实现我想要做的事情。感谢@Gyrocode.com 和@davidkonrad。

var Cell = function(display, value) {
    this.display = display;
    this.value = value;
}

$(document).ready(function() {
    var cells = [
        new Cell("120 (10%)", 120),
        new Cell("60 (5%)", 60),
        new Cell("30 (2.5%)", 30)
    ];

    $('#example').DataTable( {
        data: cells,
        columns: [
            { 
                title : "Column NOT OK",
                data: {
                    _:    "display",
                    sort: "value"
                } 
            }, { 
                type : "num",
                title : "Column Ok setting column type",
                data: {
                    _:    "display",
                    sort: "value"
                } 
            }, { 
                title : "Column Ok changing default value",
                data: {
                    _:    "value",
                    display: "display",
                    filter: "display"
                } 
            }, { 
                title : "Column Ok setting data type",
                data: {
                    _:    "display",
                    sort: "value",
                    type: "value"
                }  
            }, { 
                type : "num",
                title : "Column Not OK",
                data: "display"
            }
        ]
    } );
} );