ajax 分批加载数据,datatables怎么分批加载?怎么优化数据加载速度?

该博客讨论了如何处理大型数据集的前端渲染问题。代码示例展示了使用jQuery DataTables插件对8000条用户信息进行展示,但遇到了3到5分钟的漫长渲染时间。文章探讨了如何通过调整DataTable参数、分页、过滤和延迟加载等策略来提高前端性能和用户体验。
摘要由CSDN通过智能技术生成

$("#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": 'rtip>', //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分钟

前台后台怎么处理

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值