javascript - 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分钟

前台后台怎么处理

解决方案

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

增加配置

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

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

官方后台分页例子

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

有啥问题再说吧

这篇关于javascript - datatables怎么分批加载？怎么优化数据加载速度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！