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"
}
]
} );
} );
我有一个由 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"
}
]
} );
} );