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

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/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/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="//cdn.datatables/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>

<html>
    <head>       
        <link rel="stylesheet" type="text/css" href="//cdn.datatables/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./jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="//cdn.datatables/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>

Share Improve this question edited Apr 9, 2015 at 7:04 asked Apr 9, 2015 at 6:40 Ranjit Jena 711 gold badge1 silver badge5 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 3

Instead of manipulating the initial data array, I remend 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.

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" }
    ]
    });

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to dynamically update jquery datatable using js array as data source - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)