动态 Javascript 源数据 - DataTable答案

【问题标题】：Dynamic Javascript sourced data - DataTable动态 Javascript 源数据 - DataTable
【发布时间】：2015-02-27 15:11:48
【问题描述】：

我在我的应用程序中使用 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方法应被调用，它应该重新填充数据表。有什么想法吗？

【问题讨论】：

非常好的问题，也许服务器端处理在这种情况下可能有用：datatables.net/examples/data_sources/server_side.html
没有一些服务器端代码将无法工作。也许将客户端的数据存储在本地存储中。因此，如果一旦获取大量数据，就可以对其进行过滤和分页。但这不会很酷（对用户而言），如果数据经常更改，它也会有一些同步问题。我建议只有当你有固定的数据这种方法，那就是知道自己的本地存储是通过大量的数据填充的用户组。 SPAN>
你必须有很多很多行。有多少？
@davidkonrad：50 到 100K。
你用的是什么DataTables版本，如果是1.9.x，能升级到1.10.x吗？

标签： javascript jquery html jquery-datatables

【解决方案1】：

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

下面是一个简单的示例，它根据数据表上的选择对一个大数组进行切片和过滤，并返回一个小集合。请注意，我没有使用过 Datatables 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>

【讨论】：