How do I reload/refresh javascript array in DataTables

6
votes

I'm using DataTables to display data from a search function. I'm sure if this was intended method for passing data into DataTables. I'm initializing the DataTable with a blank javascript array. Then I want to populate Datatables in a different function.

I've tried $().DataTable().ajax.reload() and $().DataTable().fnAddData(dataSet) but both didn't work.

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();

    }
2
jquerydatatables

2 Answers

13
votes

You have to store your datatable in a variable and adding rows: Look here: 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();
      });

        });
1
votes

By defining a ajax callback function it make it possible to load from data from an array or any other data source, simple by using ajax.reload datatable function.

Also, this solution keeps the state of existent rows.

Example:

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();
 }