datatables怎么分批加载?怎么优化数据加载速度?
$("#table").dataTable({
"sPaginationType": "full_numbers",
"bJQueryUI": false,
"bAutoWidth": true,
"bFilter": true,
"bInfo": true,
"aaSorting": [
// [0, "desc"]
],
"iDisplayStart": 0,
"iDisplayLength": 5,
"aLengthMenu": [
[5, 20, 30, 50],
["5", "20", "30", "50"]
], // 设置每页显示记录的下拉菜单
// "sDom": 'rt<"bottom"<"left"l>ip>', //dom用来做页面控件排版
"oLanguage": {
"sLengthMenu": "_MENU_",
"sZeroRecords": "对不起,查询不到相关数据!",
"sEmptyTable": "表中无数据存在!",
"sInfo": "当前显示 _START_ 到 _END_ 条,共 _TOTAL_ 条记录",
"sInfoFiltered": "数据表中共为 _MAX_ 条记录",
"bPaginate": true, // 是否支持分页
"bLengthChange": true, // 左上角显示记录数
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上一页",
"sNext": "下一页",
"sLast": "末页"
}
},
"sAjaxSource": onLocation.location,
"sAjaxDataProp": "data",
"fnServerData": function(sSource, aoData, fnCallback) {
var searchValue = encodeURI($("#searchValue").val());
aoData = $.extend(true, { "bId": onLocation.bId }, aoData);
$.ajax({
"dataType": 'json',
"type": "GET",
"url": sSource,
"data": aoData,
"success": function(resp) {
if(resp) {
var dataTable = new Object;
dataTable.data = eval(resp.obj);
// dataTable.iTotalRecords = resp.iTotalRecords;
// dataTable.iTotalDisplayRecords = resp.iTotalDisplayRecords;
resp.dataTable = dataTable;
// resp.dataTable.data = dataTable.data;
}
consoleLog()(resp)
fnCallback(resp.dataTable);
}
});
},
"aoColumns": [
],
"fnInitComplete": function() {
$('#searchValue').bind('keypress', function(event) {
var event = window.event || arguments.callee.caller.arguments[0];
if(event.keyCode == "13") {
dataTable.fnClearTable(0); // 清空数据
dataTable.fnDraw(); // 重新加载数据
}
});
// 设置DataTable第一个th的宽度
$("#table tr th").eq(0).css("width", "10px");
}
})
代码如上,这是我请求用户信息,一共约8000条数据,渲染时间大概用了3~5分钟
前台后台怎么处理
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
做服务端分页,每次返回一页的数据
增加配置
之后每次页数变动时会向后台发送带参数据,里面有start和length用来控制分页,之后注意下后台返回的data格式就行啦,你可以看下例子
官方后台分页例子
我写的例子有较详细的注释
有啥问题再说吧