Question

我试图解决的问题是在返回大量记录时使表更具响应性。我正在使用的网站是使用旧版jquery datatables插件（v1.9），由于项目的性质，我们目前无法更新它。  我试图避免进入服务器端路由，因为即使在使用荒谬的记录数量进行测试之后，ajax调用的响应时间也不是问题，数据量比预期的要多一个数量级。似乎正在减慢表格的是每条记录都被放入DOM中，有时会对其执行排序功能（当数据返回时尚未按表格排序的方式排序）。

是否有办法缓存整个数据集，然后执行类似服务器的调用，但是在本地缓存上，以避免一次又一次地命中服务器？从那里只用可管理量的记录填充DOM？

var prSearchResultsTable= $prSearchResults.dataTable({
    'aaSorting': [defaultSort], // no column is sorted by default
    'bJQueryUI': false,
    'iDisplayLength': 25,
    'oLanguage': {
        'sEmptyTable': 'Select search options in the form above.',
        'sZeroRecords': 'Your search matched 0 purchase requests.',
        'sSearch': 'Filter:'
    },
    'sPaginationType': 'full_numbers'
});


for(; i < data.length; i++) {
    var newRowIndex = prSearchResultsTable.fnAddData([
        data[i][0], //PO_ID
        data[i][1], //NEED BY DATE
        data[i][2], //SHIP TO LOCATION AREA ID
        data[i][3], //NOTES
        data[i][4], //CREATE USER ID
        data[i][5], //CREATE_DATE
        data[i][6]  //APPROVAL STATUS
    ]);
    var newRow = prSearchResultsTable.fnGetNodes(newRowIndex);
    newRow.setAttribute('data-sprid', data[i].id);
    newRow.setAttribute('data-sprnum', data[i].number);
    newRow.setAttribute('class', newRow.getAttribute('class') + 'dataRowHighlight');
}

Answer 1

我认为您调用fnAddData()的方式就是问题所在。

根据fnAddData() documentation，有一个第二个bool参数，它决定了每次添加后是否重绘了数据表。因为您没有传递此参数（默认为true），所以在每行之后重新绘制表格，这可能就是为什么它太慢了。修改您的代码：

prSearchResultsTable.fnAddData([
        data[i][0], //PO_ID
        data[i][1], //NEED BY DATE
        data[i][2], //SHIP TO LOCATION AREA ID
        data[i][3], //NOTES
        data[i][4], //CREATE USER ID
        data[i][5], //CREATE_DATE
        data[i][6]  //APPROVAL STATUS
    ], false);

您需要在循环后调用fnDraw()来绘制表格。

传统的jQuery数据表本地缓存？

1 个答案: