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

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

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

我非常确定这是一种更有效的方式，我会思考并发布指向JSFiddle的链接作为评论。

你真的只需要一张桌子：

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

Answer 2

使用此代码

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

<强> // EDITS

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

      "bDestroy": true,
  });
}

这对我有用 more details

Answer 3

你可以在重新初始化之前destroy表吗？

table.DataTable().destroy();

这样的事情：

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

可以找到文档here

演示here

数据表初始化警告

3 个答案: