Update the DataTable contents dynamically using jquery

Question

I have a HTML table with empty tbody, which gets populated in jquery function on selecting some filters(typically select options). The DataTable is used for pagination if the table elements exceeds the limit.

When the filter is applied for the first time, it works fine. But when the table contents are updated by jquery, DataTable doesn't seem to update it with new data.

HTML looks like:

<table class="table table-striped table-hover outline" id="result" >
    <thead>
       <tr>
           <th>Name</th>
           <th>ID</th>
           <th>Age</th>        
           <th>Department</th>  
       </tr>
    </thead>
    <tbody>
    </tbody>
</table>

And the Jquery function:

$(document).ready(function(){

    function filterData(list) {

        /*filter and send updated list*/

        return list;
    }

    /* some other code */
    data = filterData(rawData); //Function will filter the data

    var html = ''; //html part to be appended in the results table

    data.forEach(function(d) {
        html += '<tr>'; //create a table row
        for (var key in d) 
            html += '<td>'+ d[key] +'</td>';   //put all elements in the columns
        html += '</tr>';     
    });

    $("#result tbody").html(html); //display the result in table body

    $('#result').DataTable({
        scrollY:"300px",
        lengthMenu: [10,15,20]
    });

});

Any possible way to update the DataTable with new contents? Thanks in advance!

possible duplicate of http://stackoverflow.com/questions/27778389/how-to-manually-update-datatables-table-with-new-json-data. — TechnoCrat, Dec 01 '16 at 08:59

ScanQR · Answer 1 · 2016-12-01T07:54:36.810

You can use standard DataTable API's to add row dynamically.

var myDatatable = $('#result').DataTable({
        scrollY:"300px",
        lengthMenu: [10,15,20]
    });


data.forEach(function(d) {
     var html += '<tr>'; //create a table row
        for (var key in d) 
            html += '<td>'+ d[key] +'</td>';   //put all elements in the columns
        html += '</tr>';     

       // add row using standard API's and draw the table again
       myDatatable.row.add(html).draw();

    });

score 0 · Answer 2 · answered Dec 01 '16 at 07:45

0

You need to use the following functionalities in datatable to update the table.

datatable.rows.add(newDataArray);
datatable.draw();

answered Dec 01 '16 at 07:45

vineeth sivan

510
3
18

Update the DataTable contents dynamically using jquery

2 Answers2