动态 Javascript 源数据 - DataTable

Posted 2023-05-07

【中文标题】动态 Javascript 源数据 - DataTable

【英文标题】：Dynamic Javascript sourced data - 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吗？

【参考方案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>