Предупреждение о инициализации Datatables

Question

У меня есть выпадающий список с несколькими параметрами, которые инициализируют datatable с помощью 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" }, 
    ], 

// редактирует

 "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

Demo here