javascript - Reload dataTable from variable - Stack Overflow

admin管理员组

文章数量:1324431

I searched all over web and I didn't find easy solution for this. I'm using jQuery DataTables with "static" data source (one var is filled with data using SignalR and then later, DataTable is built). Now, when change of this dataset es, I want to update table using this data set. Ideally, that would be simple "refresh" which reloads data from specified source. Here is my HTML

<table class="table table-hover table-condensed table-responsive" id="tableAccounts">
        <thead>
            <tr>
                <th data-localize="_A_C">_A_C</th>
                <th data-localize="_Name">_Name</th>
                <th data-localize="_Address">_Address</th>
                <th data-localize="_City">_City</th>
                <th data-localize="_Phone">_Phone</th>
            </tr>
        </thead>
      <tbody></tbody>

And here is my javascript which initially loads data:

tAccounts = $('#tableAccounts').dataTable({
            "data": AccountAll,
            "bFilter": true,
            "pageLength": 100,
            "bSearchable": true,
            "bInfo": false,
            "columns": [
                { "data": "AccountCode" },
                { "data": "Name" },
                { "data": "Address" },
                { "data": "City" },
                { "data": "Phone" }
            ],
            "columnDefs": [
               {
                   "render": function (data, type, row) {
                       return ("0000" + data.toString(16)).slice(-4);
                   },
                   "targets": 0
               },
               { "visible": true, "targets": [0] }
            ]
        });

tl;dr;

How to refresh datatable when data source (AccountAll in this case) is changed without destroying whole table? Bonus point if selection and filter is preserved.

Change can be anything. New row added, row removed, cell value changed.

I searched all over web and I didn't find easy solution for this. I'm using jQuery DataTables with "static" data source (one var is filled with data using SignalR and then later, DataTable is built). Now, when change of this dataset es, I want to update table using this data set. Ideally, that would be simple "refresh" which reloads data from specified source. Here is my HTML

<table class="table table-hover table-condensed table-responsive" id="tableAccounts">
        <thead>
            <tr>
                <th data-localize="_A_C">_A_C</th>
                <th data-localize="_Name">_Name</th>
                <th data-localize="_Address">_Address</th>
                <th data-localize="_City">_City</th>
                <th data-localize="_Phone">_Phone</th>
            </tr>
        </thead>
      <tbody></tbody>

And here is my javascript which initially loads data:

tAccounts = $('#tableAccounts').dataTable({
            "data": AccountAll,
            "bFilter": true,
            "pageLength": 100,
            "bSearchable": true,
            "bInfo": false,
            "columns": [
                { "data": "AccountCode" },
                { "data": "Name" },
                { "data": "Address" },
                { "data": "City" },
                { "data": "Phone" }
            ],
            "columnDefs": [
               {
                   "render": function (data, type, row) {
                       return ("0000" + data.toString(16)).slice(-4);
                   },
                   "targets": 0
               },
               { "visible": true, "targets": [0] }
            ]
        });

tl;dr;

How to refresh datatable when data source (AccountAll in this case) is changed without destroying whole table? Bonus point if selection and filter is preserved.

Change can be anything. New row added, row removed, cell value changed.

• javascript
• jquery
• datatables

Share Improve this question Follow edited May 20, 2017 at 21:19 Gyrocode. 58.9k1616 gold badges156156 silver badges191191 bronze badges asked May 16, 2017 at 11:33 nighthawknighthawk 8421212 silver badges3737 bronze badges 3

• Tried draw() ? – DontVoteMeDown Commented May 16, 2017 at 11:37
• 1 @DontVoteMeDown - like this? var table = $(tableAccounts).DataTable(); table.draw();? No luck. Not reloading/redrawing. – nighthawk Commented May 16, 2017 at 11:49
• 1 @nighthawk - that code you've posted in the ment won't work as the tableAccounts selector is wrong. Besides, you've already assigned the datatable object to tAccounts so you should be able to use tAccounts.fnDraw(). Note I've used v1.9 syntax because it looks like that's what you're using. – markpsmith Commented May 17, 2017 at 12:37

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

You can use bination of clear() and rows.add() API methods to clear existing data and add updated data.

In this case filtering and sorting would be preserved.

If you want to preserver the current page, call draw(false) instead of draw() but if you're adding new rows, there is little sense in preserving the current page

For example:

var data = [['old',2,3,4,5,6]];

var table = $('#example').DataTable({
    'data': data
});

var dataNew = [['new',2,3,4,5,6]];
table.clear().rows.add(dataNew).draw();

See this example fro code and demonstration.

本文标签： javascriptReload dataTable from variableStack Overflow