数据表初始化警告

Datatables initialization warning

本文关键字：警告 初始化 数据表      更新时间：2023-09-26

我有一个使用javascript初始化数据表的多个选项的下拉菜单。一切都很好，但问题出现在执行过程中，当第二次选择选项时，我得到一个错误，检查这个小提琴，

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

问题是我如何防止警告发生时，再次选择该选项?

我已经修改了你的代码，现在它可以工作了:

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>

使用此代码

if(user.position=="DEF"){
var table = $('#defDiv').DataTable({
    "aaData":defenders,
     "iDisplayLength":15,
    "aoColumns": [
        { "mDataProp": "playerInfo" },
        { "mDataProp": "playerName" },
          { "mDataProp": "playerClub" },
        { "mDataProp": "playerValue" },
         { "mDataProp": "playerPoints" },
    ],
<<p> //编辑/strong> 
     "bRetrieve":true,
     "order": [[ 3, "desc" ]],
       // use this in your code
      "bDestroy": true,
  });
}

这将为我工作&更多细节

您可以在重新初始化之前仅destroy表吗?

table.DataTable().destroy();

像这样:

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

文档可以在这里找到

Demo

相关文章：