我正在使用jQuery DataTables并寻找一种如何从JSON完全生成DataTable的方法。这应包括列数,名称,行数据,还可能包括其他设置,如排序。我已经看到这是可能的,但在许多可能的方法中,对我来说没有多少工作。
这是我的代码,你能帮我修复错误并详细说明我目前的JSON配置吗?
JSON - 尽可能多地放在这里:
{
"columns": [
[ "title" : "DT_RowId" ],
[ "title" : "supplier" ],
[ "title" : "color" ],
],
"data": [
[ "row_3", "small", "red" ],
[ "row_3", "medium", "blue" ],
[ "row_3", "medium", "blue" ],
[ "row_11", "large", "blue" ],
]
}
JS:
$('#example').DataTable( {
"ajax" : {
"url": "http://127.0.0.1/tabledata.json",
"type": "GET",
"contentType" : "application/json",
"dataType" : "jsonp",
},
});
HTML - 应该保持最低限度:
<table id="example"></table>
当前错误:
TypeError:undefined不是对象(评估'e [i] .aDataSort')
答案 0 :(得分:5)
首先,您需要使JSON正确。不需要将每个column
作为数组,data
部分根本不是有效的JSON - 它应该是name-&gt;值对。如果要在传递的JSON中包含所有信息,可以使用tabledata.json
的以下布局:
{
"columns": [
{ "data" : "DT_RowId", "title" : "Id" },
{ "data" : "supplier", "title" : "supplier" },
{ "data" : "color", "title" : "color" }
],
"data": [
{ "DT_RowId" : "row_3", "supplier" : "small", "color" : "red" },
{ "DT_RowId" : "row_3", "supplier" : "medium", "color" : "blue" },
{ "DT_RowId" : "row_3", "supplier" : "medium", "color" : "blue" },
{ "DT_RowId" : "row_11", "supplier" : "large", "color" : "blue" }
]
}
最小标记:
<table id="example"/>
dataTable初始化变得非常简单:
$.getJSON('http://127.0.0.1/tabledata.json', function(json) {
$('#example').DataTable({
data : json.data,
columns : json.columns
})
});
这里没有直接在dataTable上使用ajax属性的原因是由于javascript异步性的特性。如果您在dataTable上使用了ajax url
,则会在加载JSON之前创建,因此它会失败,因为尚未定义columns
。
演示 - &gt; http://jsfiddle.net/xqu37Lka/
如果要在JSON中包含其他设置,只需将它们添加到JSON中,例如默认排序:
{
"columns": [...],
"data" : [...],
"order": [[ 3, "desc" ]]
}
并在dataTable初始化中包含json.order
。