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

发布于 2022-09-05 03:50:22 字数 2253 浏览 21 评论 0

$("#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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

故笙诉离歌 2022-09-12 03:50:22

‍做服务端‍分页‍,‍每次‍返回‍一页‍的‍数据

增加配置

"serverSide": true,         //开启服务端分页传输数据
"ajax":url

之后每次页数变动时会向后台发送带参数据,里面有start和length用来控制分页,之后注意下后台返回的data格式就行啦,你可以看下例子

官方后台分页例子

我写的例子有较详细的注释

有啥问题再说吧

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文