Question

我使用Jquery setInterval每隔3秒调用一个函数，后者又调用Jquery Datatable

我的代码

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()
            );
        }
});
}

这是我的小提琴

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

Answer 1

这种情况正在发生，因为您无法重新初始化dataTable。你必须首先销毁它，然后重建它。

在致电.dataTable()：

之前，将其添加到您的代码中

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

这是working jsFiddle

Answer 2

解决问题的另一种方法是在数据表设置中添加 destroy 参数：

$('#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>

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

2 个答案:

这是working jsFiddle