jquery表单插件DataTables.js适合后台列表,它的官方文档很完整,可用于免费商用,有免费社区支持,如果想要获取更好的支持,可在它的官方花钱获取技术支持,放链接:
DataTables.js官方:https://datatables.net/
DataTables.js下载:https://datatables.net/download/index
几个例子都可以当入手,这些先不说,说一下那些坑:
一、调用Ajax接口获取数据渲染表格:
第一次接触时,接口返回明明正常,也按了官方服务器处理的方法做,可是渲染还是出错
返回数据:
{
"draw"
: 1,
"recordsTotal"
: 57,
"recordsFiltered"
: 57,
"data"
: [
[
"Angelica"
,
"Ramos"
,
"System Architect"
,
"London"
,
"9th Oct 09"
,
"$2,875"
],
[
"Ashton"
,
"Cox"
,
"Technical Author"
,
"San Francisco"
,
"12th Jan 09"
,
"$4,800"
],
]
}
DataTables配置:
$(
'#example'
).DataTable( {
"processing"
:
true
,
"serverSide"
:
true
,
"dataSrc
d
":
true
,
"ajax"
:
"scripts/server_processing.php"
} );
json数据明明有data,我想了想,可能是渲染时找不到data,于是,我在ajax配置再追加
$(
'#example'
).DataTable( {
"processing"
:
true
,
"serverSide"
:
true
,
"dataSrc
d
":
true
,
"ajax"
:
"scripts/server_processing.php",
"dataFilter":function (data) {
var getData = JSON.parse(data);
var newdata = {
draw: getData.d.Draw,
recordsTotal: getData.d.RecordsTotal,
recordsFiltered: getData.d.RecordsFiltered,
data: getData.d.Data,
error: getData.d.Error
}
} );
这是我写好的,现在可以了,之前失败原因是因为读取json数据找不到data,如{d:"{.....}"}的第一级是d,而且DataTables只默认从第一级找data,所以找不到,需要转换对象就行
到此为止,下次讲DataTables分页插件,这是我第一次写博客,有不对的地方请多包涵多指教