【问题标题】:How do I reload/refresh javascript array in DataTables如何在 DataTables 中重新加载/刷新 javascript 数组
【发布时间】:2017-08-05 06:25:38
【问题描述】:

我正在使用 DataTables 来显示来自搜索功能的数据。我确定这是否是将数据传递到 DataTables 的预期方法。我正在用一个空白的 javascript 数组初始化 DataTable。然后我想用不同的函数填充数据表。

我已经尝试过 $().DataTable().ajax.reload() 和 $().DataTable().fnAddData(dataSet) 但都没有成功。

https://jsfiddle.net/owxz7e22/3/

<table id="test" class="table table-striped table-bordered table-hover dt-responsive">
</table>

<a href="#" onclick="LoadData();">Test</a>


$(document).ready(function ()
    {

        $('#test').DataTable({
            data: dataSet,
            columns: [
                { title: "Name" },
                { title: "Position" },
                { title: "Office" },
                { title: "Extn." },
                { title: "Start date" },
                { title: "Salary" }
            ]
        });
    });

    var dataSet = [];

    function LoadData()
    {
        dataSet = [
                ["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800"],
                ["Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750"],
                ["Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000"],
        ];

        var tbl = $('#test').DataTable();

        tbl.fnClearTable();
        tbl.fnDraw();
        tbl.fnAddData(dataSet);


        //$('#test').DataTable().ajax.reload();

    }

【问题讨论】:

    标签: jquery datatables


    【解决方案1】:

    通过定义 ajax 回调函数,可以从数组或任何其他数据源中加载数据,只需使用 ajax.reload datatable 函数即可。

    此外,此解决方案保留现有行的状态。

    例子:

    var table = $('#mytable').DataTable({
            ,ajax: function (data, callback, settings) {
                     callback({ data: table_data }) //reloads data 
                 }
    });
    
    //at some event, reload the table
     $(#some-button).on('click',  function () {
        table.ajax.reload();
     }
    

    【讨论】:

    • 逗号优先的风格伤害了我的眼睛。在单元测试和语法检查器的时代,它看起来像是旧时代的遗物。而且你没有正确使用它。
    • 刚刚修复。 tks
    • 还缺少单引号和分号。除了dataajax 是冲突的选项,data 应该被删除。
    • 是的。我没有意识到“数据”设置什么也没做。再次感谢您。但是,哪里少了单引号?
    【解决方案2】:

    您必须将数据表存储在变量中并添加行: 看这里: https://jsfiddle.net/63235xk2/

    $(document).ready(function ()
            {
                var dataSet = [];
    
                var datatable = $('#test').DataTable({
                    data: dataSet,
                    columns: [
                        { title: "Name" },
                        { title: "Position" },
                        { title: "Office" },
                        { title: "Extn." },
                        { title: "Start date" },
                        { title: "Salary" }
                    ]
                });
    
    
          $('.asd').on('click',function(){
                    dataSet = [
                        ["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800"],
                        ["Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750"],
                        ["Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000"],
              ];
    
            alert(dataSet.length);
    
              datatable.clear();
              datatable.rows.add(dataSet);
              datatable.draw();
          });
    
            });
    

    【讨论】:

      猜你喜欢
      • 2017-12-24
      • 2015-09-01
      • 1970-01-01
      • 2013-03-29
      • 2014-10-06
      • 2011-06-10
      • 2021-11-16
      • 1970-01-01
      • 2012-10-07
      相关资源
      最近更新 更多