Datatables Jquery Ajax

Datatables Jquery Ajax

本文关键字:Ajax Jquery Datatables      更新时间:2023-09-26

我在重新初始化数据表时遇到了一个问题。我下面的代码通过从getOrderStatus.php中拉入json并成功将所有json数据放入javascript变量中,然后从这里我可以将这些变量设置为div标签并显示我需要在我的网页上的数据。然而,一旦ajax循环运行并显示以下错误信息"数据表警告:表id=mytable -不能重新初始化数据表",数据表就不能被重新初始化。我相信我需要一种方法来杀死表并在ajax刷新时重新创建它,但我似乎找不到一种方法来做到这一点?

     $(document).ready(function ajaxLoop(){
      $.ajax({ 
        url: 'getOrderStatus.php',                     // Url of Php file to run sql         
        data: "",                                      
        dataType: 'json',                              //data format      
        success: function updateOrder(data)               //on reciept of reply
        {
          var OrdersSubmitted = data.OrderStatus[0].SUBMITTED;     //get Orders Submitted Count
          var OrdersFulfilled = data.OrderStatus[0].FULFILLED;     //get Orders Fulfilled count
          var LastTransaction = data.LastTransaction[0];           //get Last Transaction

          //--------------------------------------------------------------------
          // 3) Update html content
          //--------------------------------------------------------------------
          $('#OrdersSubmitted').html(OrdersSubmitted);
          $('#OrdersFulfilled').html(OrdersFulfilled); //Set output html divs
          $('#mytable').dataTable({
                  "data": LastTransaction,
                  "aging": false,
                  "searching": false,
                  "columns": [
                      { "title": "ORDER_ID" }, // <-- which values to use inside object
                      { "title": "STATUS" },
                      { "title": "ACC_NUMBER" },
                      { "title": "SORT_CODE" }
                      ]
                    });

        setTimeout(ajaxLoop, 2000);
        } 
      });
    });

你试过使用"bDestroy": true.

$('#mytable').dataTable({
                  "data": LastTransaction,
                  "aging": false,
                  "searching": false,
                  "bDestroy": true,
                  "columns": [
                      { "title": "ORDER_ID" }, // <-- which values to use inside object
                      { "title": "STATUS" },
                      { "title": "ACC_NUMBER" },
                      { "title": "SORT_CODE" }
                      ]
                    });

另一种方法是检查datatable是否已经init。在你的桌子上

var table = $('#mytable');
if ($.fn.DataTable.fnIsDataTable(table)) {
//It's already a datatable
  //clear and destroy
  table.dataTable().fnClearTable();
  table.dataTable().fnDestroy();
}

**It seems your are using latest datatable version:**

then选项应该是destroy:true(老化应该改为分页):

 $('#mytable').dataTable({
                      "data": LastTransaction,
                      "paging": false,
                      "searching": false,
                      "destroy": true,
                      "columns": [
                          { "title": "ORDER_ID" }, // <-- which values to use inside object
                          { "title": "STATUS" },
                          { "title": "ACC_NUMBER" },
                          { "title": "SORT_CODE" }
                          ]
                        });

和对现有数据表的检查将是:

if($.fn.DataTable.isDataTable("#myTable"))
{
$('#myTable').DataTable().clear().destroy();
}