鍍金池/ 問答/HTML/ dataTable遇到大數(shù)據(jù)加載很慢,如何優(yōu)化

dataTable遇到大數(shù)據(jù)加載很慢,如何優(yōu)化

數(shù)據(jù)量較大,dataTable繪制太慢
同時又需要獲取這些數(shù)據(jù)做計算
有什么方法可以優(yōu)化嗎

function select_data() {
    var gweui = $(".searchable-select-holder").text();
    var start_time = new Date($("#start_time").val()).getTime();
    var end_time = new Date($("#end_time").val()).getTime();
    var now_time = new Date().getTime();
    var pre_time = now_time - 24*60*60*1000;
    var sql = "";
    sql = " select * from lora.als_gw_statistics where gweui = '" + gweui + "' and record_time between '" + pre_time + " ' and '" + now_time + "' order by record_time desc ";
    if(start_time) {
        sql =  " select * from lora.als_gw_statistics where gweui = '" + gweui + "' and record_time between '" + start_time + "' and '" + end_time + "' order by record_time desc ";
    }
    var select_data_req = {
        "action": "query",
        "object": "lora.als_gw_statistics",
        "parameters": sql
    };
    var str = JSON.stringify(select_data_req);
    $.ajax({
        url: NodejsUrls + "data/query",
        type: "post",
        data: {
            req: str
        },
        success: function(data, textStatus) {
            $(".cover").show();
            var data_arr = data.data;
            if (tabTable1 != null) {
                tabTable1.fnDestroy();
                tabTable1.fnDraw();
            }
            tabTable1 = $("#tab1").dataTable({
                "data": data.data,
                "bDestroy": true,
                "bPaginage": "true",
                "iDisplayLength": 10,
                "bRetrieve": true,
                "bAutoWidth": false,
                "oSearch": {
                    "sSearch": "",
                    "bRegex": false,
                    "bSmart": false
                },
                paging: true,
                "sPaginationType": "full_numbers",
                "dom": 'f<"toolbar1"><"divScroll1" t><"redirectPage1"><"tabFootbar1" ip><"clear">', //下拉框,創(chuàng)建的div ,table,信息,分頁條
                "aaSorting": [
                    [0, "desc"]
                ],
                'aoColumnDefs': [{
                    'data': 'record_time',
                    'sTitle': '時間',
                    "aTargets": [0],
                    "sClass": "text-center",
                    "render": function(data, type, full) {
                        return new Date(data*1000).format("yyyy-MM-dd hh:mm:ss");
                    },
                    'sDefaultContent': ''
                }, {
                    'data': 'up_rxnb',
                    'sTitle': '上行幀數(shù)量',
                    "aTargets": [1],
                    "sClass": "text-center",
                    'sDefaultContent': ''
                }, {
                    'data': 'up_sumload',
                    'sTitle': '上行幀總長',
                    "aTargets": [2],
                    "sClass": "text-center",
                    'sDefaultContent': ''
                }, {
                    'data': 'up_rssi',
                    'sTitle': '上行RSSI',
                    "aTargets": [3],
                    "sClass": "text-center",
                    'sDefaultContent': ''
                }, {
                    'data': 'up_snr',
                    'sTitle': '上行SNR',
                    "aTargets": [4],
                    "sClass": "text-center",
                    'sDefaultContent': ''
                }, {
                    'data': 'down_txnb',
                    'sTitle': '下行幀數(shù)量',
                    "aTargets": [5],
                    "sClass": "text-center",
                    'sDefaultContent': ''
                }, {
                    'data': 'down_sumload',
                    'sTitle': '下行幀總長',
                    "aTargets": [6],
                    "sClass": "text-center",
                    'sDefaultContent': ''
                }, {
                    'data': 'up_sfnb',
                    'sTitle': 'up_sfnb',
                    "aTargets": [7],
                    "sClass": "hidden",
                    "render": function(data, type, full) {
                        return JSON.stringify(full.up_sfnb); 
                    },
                    'sDefaultContent': ''
                }, {
                    'data': 'up_snrnb',
                    'sTitle': 'up_snrnb',
                    "aTargets": [8],
                    "sClass": "hidden",
                    "render": function(data, type, full) {
                        return JSON.stringify(full.up_snrnb); 
                    },
                    'sDefaultContent': ''
                }, {
                    'data': 'up_rssinb',
                    'sTitle': 'up_rssinb',
                    "aTargets": [9],
                    "sClass": "hidden",
                    "render": function(data, type, full) {
                        return JSON.stringify(full.up_rssinb); 
                    },
                    'sDefaultContent': ''
                }, {
                    'data': 'up_chnonb',
                    'sTitle': 'up_chnonb',
                    "aTargets": [10],
                    "sClass": "hidden",
                    "render": function(data, type, full) {
                        return JSON.stringify(full.up_chnonb); 
                    },
                    'sDefaultContent': ''
                }, {
                    'data': 'up_loadnb',
                    'sTitle': 'up_loadnb',
                    "aTargets": [11],
                    "sClass": "hidden",
                    "render": function(data, type, full) {
                        return JSON.stringify(full.up_loadnb); 
                    },
                    'sDefaultContent': ''
                }, {
                    'data': 'up_toa',
                    'sTitle': 'up_toa',
                    "aTargets": [12],
                    "sClass": "hidden",
                    "render": function(data, type, full) {
                        return JSON.stringify(full.up_toa); 
                    },
                    'sDefaultContent': ''
                }, {
                    'data': 'down_sfnb',
                    'sTitle': 'down_sfnb',
                    "aTargets": [13],
                    "sClass": "hidden",
                    "render": function(data, type, full) {
                        return JSON.stringify(full.down_sfnb); 
                    },
                    'sDefaultContent': ''
                }, {
                    'data': 'down_chnonb',
                    'sTitle': 'down_chnonb',
                    "aTargets": [14],
                    "sClass": "hidden",
                    "render": function(data, type, full) {
                        return JSON.stringify(full.down_chnonb); 
                    },
                    'sDefaultContent': ''
                }, {
                    'data': 'down_loadnb',
                    'sTitle': 'down_loadnb',
                    "aTargets": [15],
                    "sClass": "hidden",
                    "render": function(data, type, full) {
                        return JSON.stringify(full.down_loadnb); 
                    },
                    'sDefaultContent': ''
                }, {
                    'data': 'down_toa',
                    'sTitle': 'down_toa',
                    "aTargets": [16],
                    "sClass": "hidden",
                    "render": function(data, type, full) {
                        return JSON.stringify(full.down_toa); 
                    },
                    'sDefaultContent': ''
                }],
                "oLanguage": { //多語言配置
                    "sLengthMenu": "每頁顯示 _MENU_ 條記錄",
                    "sZeroRecords": "對不起,查詢不到任何相關數(shù)據(jù)",
                    "sEmptyTable": "查詢不到任何相關數(shù)據(jù)",
                    "sInfo": "當前顯示 _START_ 到 _END_ 條,共 _TOTAL_ 條記錄",
                    "sInfoEmtpy": "找不到相關數(shù)據(jù)",
                    "sInfoFiltered": "(數(shù)據(jù)表中共為 _MAX_ 條記錄)",
                    "sProcessing": "正在加載中...",
                    "sSearch": "過濾",
                    "sUrl": "", //多語言配置文件,可將oLanguage的設置放在一個txt文件中,例:Javascript/datatable/dtCH.txt
                    "oPaginate": {
                        "sFirst": "首頁",
                        "sPrevious": "<",
                        "sNext": ">",
                        "sLast": "尾頁 "
                    }
                }
            });
            $("div.toolbar1").html('<div style="float: right;" class="btn btn-info" id="show_chart" onclick="draw_charts()"><span class="glyphicon glyphicon-pencil" ></span>繪制圖表</div><div class="btn btn-info" id="select_time" onclick="show_time_modal();" style="float: right;margin-right: 30px;">選擇時間</div>');
            $("#current_gweui").val(gweui);
            $(".cover").hide();
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            $(".cover").hide()
            jAlert('數(shù)據(jù)加載出錯...', 'SIME 提醒');
        }
    });
    
回答
編輯回答
帥到炸

一般是sql語句加上limit限制,然后前端監(jiān)控特定用戶行為事件,比如翻到了最后一頁,再繼續(xù)異步加載數(shù)據(jù)

2018年9月1日 12:29