时间戳

首页 > 解决方案 > 销毁 DataTable 并使用新获取的数据重新创建

jquery - 销毁 DataTable 并使用新获取的数据重新创建

问题描述

我需要jQuery DataTable用新获取的数据重新初始化。我已经阅读了几篇有类似问题的帖子，解决方案涉及在重新初始化之前破坏现有的数据表。该表最初呈现良好，但是当尝试通过更改列数再次呈现它时，我收到错误：Uncaught TypeError: Cannot read property 'style' of undefined。我了解当 HTML 列数和 DataTables 的列定义不匹配时会发生此错误。这意味着初始表没有成功销毁。这是代码：

var dataSet1 = [{
    "country": "Benin",
    "year": 1996, 
    "water": 70.0
  },{
    "country": "Vietnam",
    "year": 1996, 
    "water": 95.1
  }];

  var dataSet2 = [{
    "country": "Benin",
    "year": 2000, 
    "water": 75.8, 
    "electricity": 58.5    //additional column from the database
  },{
    "country": "Vietnam",
    "year": 2000, 
    "water": 96.8, 
    "electricity": 63.2 
  }];

  $('#example_dt').DataTable({
    data: dataSet1,
    columns: [
        { data: "country" },
        { data: "year" },
        { data: "water" }],
    'searching': false
  });

  $('#update_data_btn').click (function(){
  //$("#example_dt").DataTable().fnDestroy();
    $('#example_dt').DataTable({
      destroy: true,
      //retrieve: true
      data: dataSet2,         
      columns: [
        { data: "country" },
        { data: "year" },
        { data: "water" }, 
        { data: "electricity" }],
    // "bDestroy": true,
    'searching': false
      } );
  });   
});

我从类似的帖子中尝试了以下各种建议，但似乎无法解决这个问题。同样的错误仍然出现。

[1] Adding destroy: true
[2] Adding $("#example_dt").DataTable().fnDestroy();
[3] Adding retrieve: true  
[4] Adding "bDestroy": true
[5] Using $('#example_dt').empty(); //this empties and new table not created

这是小提琴

标签： jquerydatatables

解决方案

请尝试使用破坏和空的方法。检查下面的小提琴链接：

$('#example_dt').empty();

小提琴链接

推荐阅读