DataTables 使用列选项延迟加载
DataTables deferred loading with columns option
我正在使用 jQuery DataTables 的服务器端处理模式 ("serverSide": true
)。我正在使用 deferred loading option 来优化我的页面加载时间。
我也在使用columns
选项,但是我自己定义columns
选项时出现了一些冲突。它会在第一次调用没有数据源时尝试寻找数据源,这就是延迟加载的全部意义。
Uncaught Error: DataTables warning: table id=table - Requested unknown parameter 'id' for row 0. For more information about this error, please see http://datatables.net/tn/4
初始化代码:
function initialize_table(inital_length)
{
table_options = {
"serverSide": true,
"ajax": {
"url": '/merchant/all/',
"type": 'POST',
"deferRender": true,
// data: JSON.stringify(data),
// contentType: "application/json",
},
// "order": [[0, 'asc']]
"deferRender": true,
"processing": true,
"pageLength": 50,
"deferLoading": inital_length,
"lengthMenu": [ 20, 50, 100, 200, 500 ],
"columnDefs": [
{
// "class": "details-control",
'data': 'gr_id', // response[data]
'name': 'gr_id',
'orderable': true,
'search': {'regex': false, 'value': ''},
'searchable': true,
"targets": 0,
},
{
'data': "name",
'name': 'name',
'orderable': true,
'search': {'regex': false, 'value': ''},
'searchable': true,
"targets": 1,
},
{
'data': "address",
'name': 'address',
'orderable': false,
'search': {'regex': false, 'value': ''},
'searchable': true,
"targets": 2,
},
{
'data': "category",
'name': 'category',
'orderable': true,
'search': {'regex': false, 'value': ''},
'searchable': true,
"targets": 3,
},
{
'data': "chain",
'name': 'chain',
'orderable': true,
'search': {'regex': false, 'value': ''},
'searchable': true,
"targets": 4,
},
{
'data': "enabled",
'name': 'enabled',
'orderable': true,
'search': {'regex': false, 'value': ''},
'searchable': true,
"targets": 5,
},
{
'data': 'status',
'name': 'status',
'orderable': true,
'search': {'regex': false, 'value': ''},
'searchable': true,
"targets": 6,
}
],
}
var merchant_table = $("#merchant-table").DataTable(table_options);
}
将 deferLoading
选项与 column.data
一起使用的错误是 once reported in DataTables forums. I was able to reproduce that bug using v1.10.2 from CDN, but not using v1.10.3 onwards, so we can say that this has been fixed. This was probably fixed by the new feature “能够将 columns.data 与 DOM 来源一起使用data 将行信息读入对象而不是数组".
所以你可以:
1) 首先确保您使用的是 latest version.
2) 检查您的 JSON 回复。根据您的评论,您使用的是 array data source type, but when you set the column.data
option, you must use object data source type。
我正在使用 jQuery DataTables 的服务器端处理模式 ("serverSide": true
)。我正在使用 deferred loading option 来优化我的页面加载时间。
我也在使用columns
选项,但是我自己定义columns
选项时出现了一些冲突。它会在第一次调用没有数据源时尝试寻找数据源,这就是延迟加载的全部意义。
Uncaught Error: DataTables warning: table id=table - Requested unknown parameter 'id' for row 0. For more information about this error, please see http://datatables.net/tn/4
初始化代码:
function initialize_table(inital_length)
{
table_options = {
"serverSide": true,
"ajax": {
"url": '/merchant/all/',
"type": 'POST',
"deferRender": true,
// data: JSON.stringify(data),
// contentType: "application/json",
},
// "order": [[0, 'asc']]
"deferRender": true,
"processing": true,
"pageLength": 50,
"deferLoading": inital_length,
"lengthMenu": [ 20, 50, 100, 200, 500 ],
"columnDefs": [
{
// "class": "details-control",
'data': 'gr_id', // response[data]
'name': 'gr_id',
'orderable': true,
'search': {'regex': false, 'value': ''},
'searchable': true,
"targets": 0,
},
{
'data': "name",
'name': 'name',
'orderable': true,
'search': {'regex': false, 'value': ''},
'searchable': true,
"targets": 1,
},
{
'data': "address",
'name': 'address',
'orderable': false,
'search': {'regex': false, 'value': ''},
'searchable': true,
"targets": 2,
},
{
'data': "category",
'name': 'category',
'orderable': true,
'search': {'regex': false, 'value': ''},
'searchable': true,
"targets": 3,
},
{
'data': "chain",
'name': 'chain',
'orderable': true,
'search': {'regex': false, 'value': ''},
'searchable': true,
"targets": 4,
},
{
'data': "enabled",
'name': 'enabled',
'orderable': true,
'search': {'regex': false, 'value': ''},
'searchable': true,
"targets": 5,
},
{
'data': 'status',
'name': 'status',
'orderable': true,
'search': {'regex': false, 'value': ''},
'searchable': true,
"targets": 6,
}
],
}
var merchant_table = $("#merchant-table").DataTable(table_options);
}
将 deferLoading
选项与 column.data
一起使用的错误是 once reported in DataTables forums. I was able to reproduce that bug using v1.10.2 from CDN, but not using v1.10.3 onwards, so we can say that this has been fixed. This was probably fixed by the new feature “能够将 columns.data 与 DOM 来源一起使用data 将行信息读入对象而不是数组".
所以你可以:
1) 首先确保您使用的是 latest version.
2) 检查您的 JSON 回复。根据您的评论,您使用的是 array data source type, but when you set the column.data
option, you must use object data source type。