ajax - DataTables.js - 缓存请求的页面/行的分页插件

Question

有谁知道是否有可用的插件允许表缓存 ajax 请求的行。

目前datatables可以通过ajax源码实现分页。我需要缓存已经请求的行。1. 性能 2. 我需要从请求的行访问输入字段。

有谁知道怎么做？

谢谢。

Answer 1

只为任何需要这个的人。我创建了一个缓存所有呈现的行

适用于 jquery 1.10.2 和 dataTables 1.10.0

$.fn.dataTable.ajaxCaching = function () {
var jsonData = null;

var reqStart = null;
var reqEnd = null;

var displayStart = null;
var displayLength = null;

var req = {};

function _assembleRequest(request) {
    $(request).each(function () {
        req[this.name] = this;
    });
}

function _checkRows() {
    var ret = false;

    if (jsonData == null) return true;

    // check for cached rows; update req start at the start of unrequested row
    for (var i = reqStart; i < (reqStart + reqLength); i++) {
        if (jsonData.aaData[i] == undefined) {
            reqStart = i;
            ret = true;
            break;
        };
    }

    // if not all rows are requested, find last row for the range to be requested
    if (ret) {
        for (var i = (reqStart + reqLength) - 1; i > reqStart; i--) {
            if (jsonData.aaData[i] == undefined) {
                reqEnd = i;
                break;
            }
        }
    }

    return ret;
}

return function (sSource, aoData, fnCallback, oSettings) {
    _assembleRequest(aoData);

    reqStart = displayStart = req.iDisplayStart.value;
    reqLength = displayLength = req.iDisplayLength.value;

    oSettings._iDisplayStart = displayStart;
    oSettings._iDisplayLength = displayLength;

    // Request Rows
    if (_checkRows()) {
        req.iDisplayStart.value = reqStart;
        req.iDisplayLength.value = reqLength;

        $.ajax({
            'dataType': 'json',
            'type': 'POST',
            'url': sSource,
            'data': aoData,
            'success': function (json) {
                // update cached data
                if (jsonData == null) {
                    jsonData = json;
                } else {
                    for (var i = 0; i < json.aaData.length; i++) {
                        jsonData.aaData[i + reqStart] = json.aaData[i];
                    }
                    json.aaData = jsonData.aaData.slice(displayStart, (displayStart + displayLength));
                }
                oSettings.cachedData = jsonData.aaData;
                fnCallback(json);
            }
        });

    } else {
        jsonData.sEcho = req.sEcho.value;
        // render cached data
        var json = $.extend(true, {}, jsonData);
        json.iDisplayStart = displayStart;
        json.iDisplayLength = displayLength;
        json.aaData = jsonData.aaData.slice(displayStart, (displayStart + displayLength));
        oSettings.cachedData = jsonData.aaData;
        fnCallback(json);
    }
};
};

用法：

$('#Table').dataTable({
            'bServerSide': true,
            'sAjaxSource': 'url/to/web/api',
            'fnServerData': $.fn.dataTable.ajaxCaching(),
             ....
});