Jquery DataTable 上的 setInterval Jquery DataTable 给出错误无法重新初始化

Question

I am uisng Jquery setInterval to call a function for every 3 seconds which in turn calls Jquery Datatable

My code

var dataSet = [
    [
        "1441.75",
        "34444444"],
    [
        "1614.45",
        "34444444"

    ],
    [
        "834.15",
        "233333"]

];

var array_names = ["APPLE", "WHIRLPOOL", "SAMSUNG"];

$(document).ready(function()
{

   // calculateAnddisplayData();

setInterval(calculateAnddisplayData, 3000);

});

function calculateAnddisplayData()
{

for (var key in dataSet) {
    if (dataSet.hasOwnProperty(key)) {
        dataSet[key].splice(0, 0, array_names[key]);
    }
}


    $('#allwl').dataTable({
        "iDisplayLength": -1,
            "data": dataSet,
            "columns": [{
            "title": "Name"
        }, {
            "title": "Price"
        }, {
            "title": "Quantity"
        }]
    });





$('#allwl tr').each(function() {
    var abc = $(this).children('td').eq(2).html();
        if(abc > 40000) {
            $(this).children('td').eq(0).css('background-color', 'green');
            $("#greaterquan").append(
                $(this).clone()
                .children('td').first()
                .prepend('<input type="checkbox"/>')
                .parent()
            );
        }
});
}

This is my fiddle

http://jsfiddle.net/2pypy87p/7/

Answer 1

This is happening because you can't reinitialize a dataTable . You have to destroy it first, then rebuild it.

Add this to your code, before you call .dataTable() :

if ( $.fn.DataTable.isDataTable( '#allwl' ) ) {
    $("#allwl").dataTable().fnDestroy();
    $('#allwl').empty(); // empty in case the columns change
}

Here is a working jsFiddle

Answer 2

Another approach to solve your problem would be adding the destroy parameter to your dataTable settings:

$('#allwl').dataTable({
    "destroy": true,
    "iDisplayLength": -1,
    "data": dataSet,
    "columns": [
        { "title": "Name" },
        { "title": "Price" },
        { "title": "Quantity" }
    ]
});

 var dataSet = [ [ "1441.75", "34444444" ], [ "1614.45", "34444444" ], [ "834.15", "233333"] ]; var array_names = ["APPLE", "WHIRLPOOL", "SAMSUNG"]; $(document).ready(function() { // calculateAnddisplayData(); setInterval(calculateAnddisplayData, 2000); }); function calculateAnddisplayData() { for (var key in dataSet) { if (dataSet.hasOwnProperty(key)) { dataSet[key].splice(0, 0, array_names[key]); } } $('#allwl').dataTable({ "iDisplayLength": -1, "destroy": true, "data": dataSet, "columns": [ { "title": "Name" }, { "title": "Price" }, { "title": "Quantity" }] }); $('#allwl tr').each(function() { var abc = $(this).children('td').eq(2).html(); if(abc > 40000) { $(this).children('td').eq(0).css('background-color', 'green'); $("#greaterquan").append( $(this).clone() .children('td').first() .prepend('<input type="checkbox"/>') .parent() ); } }); }

 <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="https://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script> <link href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css" rel="stylesheet"/> <table id="allwl"> <th class="hidden-480">Price</th> <th class="hidden-480">Volume</th> <th class="hidden-480">Quantity</th> </table> <div id="greaterquan"> <h3>My Stocks</h3> </div>