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

advertisements

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>


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.