Question

我在我的应用程序中使用DataTable。我的应用程序不是托管服务器。（我将直接在我的独立应用程序中呈现HTML。嗯，这是一个不同的故事。）

目前我正在填充DataTable，如下所示

$(dataTableSelector).dataTable({
    "sDom": 't <f>  <i> <p> > ',
    "bRetrieve": true,
    "aaSorting": [],
    "aaData": rows,
    "aoColumns": columns,
    "oLanguage": {
        "sSearch": "",
        "sInfo": "_START_ - _END_ Total: _TOTAL_ ",
        "sInfoFiltered": "(filtered from _MAX_)"
    }
});

这里rows是我的整个数据，在数组数组中作为Javascript源数据。

但现在我的问题是，如果我要使用DataTable呈现的数据很大，那么加载需要更长的时间。所以我试图改变数据表类似于服务器端处理（但请注意，我没有任何服务器。它只是一个本地HTML页面）。点击下一步，它应该只加载下一页，页面数据。然后，它不应该加载相同。

说，我在javascript中有一个函数

function loadData(start,end, searchString){
  //Function to  fetch records from a Table with start and end numbers of records.
  //searchString is optional. 
  //rows= GetDataFromTable(start,end, searchString);
  return rows;
}

因此，每当在数据表中单击下一个或上一个按钮或搜索时，我的javascript方法应该被调用，它应该重新填充Datatable。有什么想法吗？

Answer 1

您可以使用ajax option并提供自己的自定义函数，在每次用户交互时从本地变量加载到Datatables。其使用的一个示例是在他们的网站上，名为"Pipelining data to reduce Ajax calls for paging"。

下面是一个简单的例子，它根据在Datatable上做出的选择来切割和过滤大型数组并返回一个小型集合。请注意我尚未使用的数据表sends more parameters，但应使用它们来进行正确的实施。此外，Datatables可能会发送request.length = -1，但我也没有处理过。

的JavaScript

var rows;

$(document).ready(function() {
    rows = getLongArrayOfData();

    $("#example").dataTable({
        "columns": [
            {"data": "column1", "title": "Column 1"},
            {"data": "column2", "title": "Column 2"}
        ],
        "serverSide": true,
        "ajax": getRows()
    });
});

function getRows() {
    return function ( request, drawCallback, settings ) {
        var dataFiltered;
        var recordsTotal = rows.length;

        if (request.search.value !== "") {
            dataFiltered = rows.filter(FilterStartsWith(request.search.value));
        }

        var recordsFiltered = 
            (dataFiltered === undefined) ? rows.length : dataFiltered.length;

        var dataSliced = 
            (dataFiltered === undefined ? rows : dataFiltered)
            .slice(request.start, request.start + request.length);

        var returnData = {
            draw: request.draw,
            recordsTotal: recordsTotal,
            recordsFiltered: recordsFiltered,
            data: dataSliced
        };

        drawCallback(returnData);
    };
}

function FilterStartsWith(wordToCompare) {
    return function(element) {
        if (typeof element == "object") {
            returnValue = false;
            for (var property in element) {
                if (element.hasOwnProperty(property)) {
                    if (startsWith(element[property], wordToCompare)) {
                        returnValue = true;
                        break;
                    }
                }
            }
            return returnValue;
        }
        return startsWith(element, wordToCompare);
    }
}

function startsWith(element, wordToCompare) {
    if (typeof element != "string") element = new String(element);
    return element.slice(0, wordToCompare.length) == wordToCompare;
}

function getLongArrayOfData() {
    var retArr = new Array();
    for(i=1; i<=100000; i++) {
        retArr.push({column1: i, column2: "abc" + (500+i)});
    }
    return retArr;
}

HTML 的

<table id="example">
    <thead>
    </thead>
    <tbody>
    </tbody>
</table>

动态Javascript源数据 - DataTable

1 个答案: