延迟加载数据
当使用带有服务器端处理的 DataTables 时,默认为 DataTables 自动进行 Ajax 调用并加载数据,删除表中可能已经存在的任何内容。然而当表的第一页已经在 HTML 中预加载时(这可能是为了确保可访问性或性能原因),会产生一些问题
可以使用
deferLoading
初始化属性覆盖Ajax调用获取第一页数据。它用于两个目的,首先声明需要延迟加载,但还要告诉 DataTables
在完整表中有多少条记录以便正确显示信息和分页等
在本示例中,HTML页面已经有前10行数据可用,所以我们使用
deferLoading
来告诉 DataTables 这个数据是可用的,它应该等待排序,分页等完成之后,然后再创建 Ajax 请求。
姓名 | 职位 | 工作地点 | 年龄 | 入职时间 | 年薪 |
---|---|---|---|---|---|
李钊 | 销售代表 | 天津 | 28 | 2014/05/25 | ¥320800 |
李钊 | 销售代表 | 天津 | 28 | 2014/05/25 | ¥320800 |
汪非 | 销售经理 | 武汉 | 29 | 2013/05/25 | ¥520800 |
李大嘴 | 客服 | 北京 | 22 | 2016/05/25 | ¥220800 |
王小虎 | 销售代表 | 北京 | 22 | 2016/05/25 | ¥220800 |
宗晴 | 产品经理 | 上海 | 28 | 2013/05/25 | ¥520800 |
白晴 | 美工 | 北京 | 22 | 2016/05/25 | ¥220800 |
罗伊 | 销售代表 | 深圳 | 22 | 2016/05/25 | ¥220800 |
王晓峰 | 部门经理 | 北京 | 29 | 2012/05/25 | ¥620800 |
王艺 | 销售代表 | 北京 | 22 | 2016/05/25 | ¥220800 |
姓名 | 职位 | 工作地点 | 年龄 | 入职时间 | 年薪 |
$('#dataTableExample').DataTable($.concatCpt('dataTable', {
"processing": true,
"serverSide": true,
"ajax": "/employee/all",
"deferLoading": 57
}));
<table class="table table-bordered table-hover dataTable table-striped w-full">
<thead>
<tr>
<th>姓名</th>
<th>职位</th>
<th>工作地点</th>
<th>年龄</th>
<th>入职时间</th>
<th>年薪</th>
</tr>
</thead>
<tfoot>
<tr>
<th>姓名</th>
<th>职位</th>
<th>工作地点</th>
<th>年龄</th>
<th>入职时间</th>
<th>年薪</th>
</tr>
</tfoot>
</table>
java代码
{
recordsFiltered: 57,
data: [
[
"李霞",
"系统架构师",
"北京",
"61",
"2011/04/25",
"¥320800"
],
[
"杜重治",
"会计",
"上海",
"63",
"2011/07/25",
"¥170750"
],
[
"陈锋",
"初级开发者",
"深圳",
"66",
"2009/01/12",
"¥86000"
],
[
"郑伯宁",
"高级JavaScript开发者",
"北京",
"22",
"2012/03/29",
"¥433060"
]
]
}