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

Asked 9/4, 2015 at 6:40 Answered 17/10, 2015 at 18:52

Solved javascript jquery datatables datatables-1.10

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>

Hagride answered 9/4, 2015 at 6:40 Comment(0)

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.

Gerianne answered 9/4, 2015 at 8:8 Comment(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" }
    ]
    });

Purposeless answered 17/10, 2015 at 18:52 Comment(1)

There is no destroy() method if table is initialized with dataTable(), in this case it should be api().destroy(). – Selfregard 17/10, 2015 at 19:16

Recommended topics

Hot tags