javascript - fnAddData影响数据量为30-40K时页面加载的速度

Question

我正在使用 fnAddData 和 fnDraw 函数在数据表中动态添加数据，它按要求工作，但页面加载需要 10-20 秒。有什么方法可以加快速度吗？我的代码如下:

$(window).load(function() 
{
$.ajax({
  type: "GET",
  url: "filters.php",
  data: {limit: 10000, start_from: (i * 10000)},
  success: function(response) {
    var array = JSON.parse(response);

    Object.keys(array).forEach(function(key) {
        oTable.fnAddData([
            array[key][1],
            array[key][2],
            array[key][3],
            array[key][4],
            array[key][5],
            array[key][6],
            array[key][7],
            array[key][8],
            array[key][9],
            array[key][10],
            array[key][11],
            array[key][12],
            array[key][13],
            array[key][14],
            array[key]['link']
        ], false);
    });
    oTable.fnDraw();

},
datatype: 'json'});

Answer 1

您获得了 10000 个结果，您是否考虑过使用限制/偏移量以较小的“ block ”形式请求数据并实现分页或无限滚动？

伪代码 -

function updateTable(data) {
    //use data to update table 
}

function getData(offset, limit, order, orderBy, filter) {
    $.ajax({
        url: ...
        ...
        data: {
            limit: limit,
            start_from: offset,
            order: order,
            orderBy: orderBy,
            filter: filter
        },
        success: function (data) {
            updateTable(data)
        }
    });
}

$(function () {
    getData(0, 20, 'ASC', 'ID', null);

    $table.on('scroll', function () {
       //infinite scroll bits
       //if should load more data call getData(offset, limit)
    });

    $search.on('blur', function () {
        getData(0, 20, 'ASC', 'ID', $(this).val());
    });

    $orderBy.on('change', function () {
        var order;
        if (orderBy === $(this).val()) {
           order = 'DESC'
        } else {
           order = 'ASC'
        }

        getData(0, 20, order, this.val(), null);
    });
});