How to dynamically update jquery datatable using js array as data source

Question

How to dynamically update jquery datatable using js array as data source. When user click the update button a new js array should be added current data source and it should reflect on jquery datatable.

<html>
    <head>       
        <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.6/css/jquery.dataTables.css">
    </head>
    <body>
        <div id="demo"></div>
        <button id="update">Update</button>  

    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="//cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript">

    var dataSet = [
        ['Trident','Internet Explorer 4.0','Win 95+','4','X'],
        ['Trident','Internet Explorer 5.0','Win 95+','5','C'],
        ['Trident','Internet Explorer 5.5','Win 95+','5.5','A'],    
    ];

    var ctr = 0;
    $("#update").click(function() {        
        ctr++;
        dataSet.push([ctr,ctr,ctr,ctr,ctr]);
        console.log(JSON.stringify(dataSet));
    });

$(document).ready(function() {
    $('#demo').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );
     $('#example').dataTable( {
        "data": dataSet,
        "columns": [
            { "title": "Engine" },
            { "title": "Browser" },
            { "title": "Platform" },
            { "title": "Version", "class": "center" },
            { "title": "Grade", "class": "center" }
        ]
    });   
});

    </script>        
    </body>
</html>

score 3 · Accepted Answer · answered Apr 09 '15 at 08:08

Instead of manipulating the initial data array, I recommend using the DataTables API methods like row.add() and draw() to update the data. If you need the data after the initialisation, you can access it with the data() method.

This JSFiddle might help you.

score 0 · Answer 2 · answered Oct 17 '15 at 18:52

0

Persist the data table in a global js variable- dataTable. Once you dataSet changes, just destroy dataTable and initialize it again.

if(dataTable != null)
    dataTable.destroy();

dataTable = $('#example').dataTable( {
    "data": dataSet,
    "columns": [
        { "title": "Engine" },
        { "title": "Browser" },
        { "title": "Platform" },
        { "title": "Version", "class": "center" },
        { "title": "Grade", "class": "center" }
    ]
    });

answered Oct 17 '15 at 18:52

raghavsood33

749
7
17

There is no `destroy()` method if table is initialized with `dataTable()`, in this case it should be `api().destroy()`. – Gyrocode.com Oct 17 '15 at 19:16

How to dynamically update jquery datatable using js array as data source

2 Answers2