数据表初始化警告

Question

我有一个包含多个选项的下拉列表，使用 javascript 初始化数据表。一切正常，但问题出现在执行过程中，当我第二次选择该选项时出现错误，请查看此 fiddle、

DataTables warning (table id = 'defDiv'): Cannot reinitialise DataTable.

下面是我的代码：

   if(user.position=="DEF"){
var table = $('#defDiv').DataTable({
    "aaData":defenders,
     "iDisplayLength":15,
    "aoColumns": [
        { "mDataProp": "playerInfo" },
        { "mDataProp": "playerName" },
          { "mDataProp": "playerClub" },
        { "mDataProp": "playerValue" },
         { "mDataProp": "playerPoints" },
    ],
     "order": [[ 3, "desc" ]],
  });
}

问题是如何防止再次选择该选项时出现警告？

Answer 1

使用此代码

if(user.position=="DEF"){
var table = $('#defDiv').DataTable({
    "aaData":defenders,
     "iDisplayLength":15,
    "aoColumns": [
        { "mDataProp": "playerInfo" },
        { "mDataProp": "playerName" },
          { "mDataProp": "playerClub" },
        { "mDataProp": "playerValue" },
         { "mDataProp": "playerPoints" },
    ],

//编辑

     "bRetrieve":true,
     "order": [[ 3, "desc" ]],
       // use this in your code

      "bDestroy": true,
  });
}

这对我有用 & more details

Answer 2

你能在重新初始化之前 destroy table 吗？

table.DataTable().destroy();

像这样：

var table;

if ($.fn.dataTable.isDataTable('#defDiv')) {
  table.DataTable().destroy();
} 
   
table = $('#defDiv').DataTable({...

可以找到文档here

演示 here

Answer 3

我已经更改了您的代码，现在可以使用了：

var goalkepeers = [{
    "playerName": "Mignolet",
    "playerClub": "Liverpool",
    "playerValue": "5.0",
    "playerPoints": "89",
}, {
    "playerName": "de Gea",
    "playerClub": "Manchester",
    "playerValue": "6.7",
    "playerPoints": "120",
}];
var defenders = [{
    "playerName": "Ivanovic",
    "playerClub": "Chelsea",
    "playerValue": "7.8",
    "playerPoints": "100",
}, {
    "playerName": "Mertesacker",
    "playerClub": "Arsenal",
    "playerValue": "7.7",
    "playerPoints": "110",
}];
var aoColumns = [{
    "sTitle": "Name", 
    "mDataProp": "playerName"
},{
    "sTitle": "Club", 
    "mDataProp": "playerClub"
},{
    "sTitle": "Value", 
    "mDataProp": "playerValue"
},{
    "sTitle": "Points", 
    "mDataProp": "playerPoints"
}];
var table = null;
$("#playersFilter").change(function () {
    var value = $('#playersFilter').val();
    if (value == "gk") {
        if ($.fn.dataTable.isDataTable('#players')) {
            $('#players').DataTable().destroy();
        } 
        table = $('#players').DataTable({
            "aaData": goalkepeers,
            "iDisplayLength": 15,
            "aoColumns": aoColumns,
            "bRetrieve": true,
            "order": [
                [3, "desc"]
            ],
            "bDestroy": true
        });
    } else if (value == "def") {
        if ($.fn.dataTable.isDataTable('#players')) {
            $('#players').DataTable().destroy();
        }
        table = $('#players').DataTable({
            "aaData": defenders,
            "iDisplayLength": 15,
            "aoColumns": aoColumns,
            "bRetrieve": true,
            "order": [
                [3, "desc"]
            ],
            "bDestroy": true,
        });
    }
});

我很确定有一种更有效的方法，我会考虑一下，然后 post 将 link 作为评论发送给 JSFiddle。

你只需要一个table：

<select id="playersFilter">
    <option>Choose Players</option>
    <option value="gk">goalkepeers</option>
    <option value="def">Defenders</option>
</select>
<table class="display" id="players"></table>

数据表初始化警告

Datatables initialization warning

javascript

datatable

jquery

datatables