CODEWITHSUNDEEP
jquery
Pawan
Pawan

Reputation: 32331

setInterval on Jquery DataTable Jquery DataTable giving error Cannot Reinitialize

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/

Upvotes: 0

Views: 158

Answers (2)

Sagnalrac
Sagnalrac

Reputation: 1106

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>

Upvotes: 0

Wesley Smith
Wesley Smith

Reputation: 19571

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

Upvotes: 2

Related Questions