DataTablesマルチフィルタ選択でデータが入力されない

Question

データがAJAX呼び出しから取得され、正常に読み込まれるDataTablesテーブルを作成しています。検索はうまく機能します。マルチフィルター選択のコードを追加すると、ドロップダウンが表示されますが、それらは空です。私はjQueryとDataTablesの両方に最新のライブラリを使用しています。

JS

function overview() { 
    $.ajax({ 
     url: "/_inc/_ajax/ajax.tables.php", 
     dataType: 'json', 
     success: function(results) { 

     var table = $('#overviewTable').DataTable 
     ({ 
      initComplete:  function() { 
            this.columns().every(function() { 
             var column = this; 
             var select = $('<select><option value=""></option></select>') 
              .appendTo($(column.footer()).empty()) 
              .on('change', function() { 
               var val = $.fn.dataTable.util.escapeRegex(
                $(this).val() 
               ); 

               column 
                .search(val ? '^'+val+'$' : '', true, false) 
                .draw(); 
              }); 

             column.data().unique().sort().each(function (d, j) { 
              select.append('<option value="'+d+'">'+d+'</option>') 
             }); 
            }); 
           } 
     }); 

     table.clear(); 
     for(var i = 0; i < results["id"].length; i++) { 
      table.row.add(
       [ 
        results["id"][i], 
        results["title"][i], 
        results["Tier"][i], 
        results["region"][i], 
        results["2016"][i], 
        results["2017"][i], 
        results["Letter_Type"][i], 
        results["Change_Type"][i], 
       ] 
      ).draw(); 
     } 
    }, 
    error: function (xhr, ajaxOptions, thrownError) { 
     alert("ERROR: " + xhr.responseText + " - " + thrownError); 
    } 
}); 
} 

私はそれが働いていなかった理由を把握するために管理HTML

<table id="overviewTable" class="table table-striped table-bordered" cellspacing="0" width="100%"> 
    <thead>'; 
     <tr> 
      <th>ID</th> 
      <th>TITLE</th> 
      <th>TIER</th> 
      <th>REGION</th> 
      <th>2016</th> 
      <th>2017</th> 
      <th>LETTER TYPE</th> 
      <th>CHANGE TYPE</th> 
     </tr> 
    </thead> 
    <tfoot> 
     <tr> 
      <th>ID</th> 
      <th>TITLE</th> 
      <th>TIER</th> 
      <th>REGION</th> 
      <th>2016</th> 
      <th>2017</th> 
      <th>LETTER TYPE</th> 
      <th>CHANGE TYPE</th> 
      </tr> 
     </tfoot> 
</table>'; 

Answer 1

。 DataTablesで使用されるajax構文を使用する必要がありました。詳細はDataTablesをご覧ください。ここでは、コードは次のとおりです。

JS

function overview() { 
var table = $('overviewTable').DataTable 
({ 
    "ajax":   { 
     "url": "/_inc/_ajax/ajax.tables.php", 
     "dataSrc": "", 
    }, 
    "columns":  [ 
     { "data": "id" }, 
     { "data": "title" }, 
     { "data": "tier" }, 
     { "data": "region" }, 
     { "data": "2016" }, 
     { "data": "2017" }, 
     { "data": "Letter_Type" }, 
     { "data": "Change_Type" }, 
    ], 
    initComplete: function() { 
     var columnsCustom = [2, 3, 6, 7]; 
     var columnNames = ["Tier", "Region", "Letter Type", "Change Type"]; 
     var columnId = ["tier", "region", "letterType", "changeType"]; 
     for (var i = 0; i < 4; i++) { 
      this.api().columns(columnsCustom[i]).every(function() { 
       var column = this; 
       var select = $('<label for="' + columnId[i] +'" class="sr-only">' + columnNames[i] +'</label><select id="' + columnId[i] +'"><option value=""></option></select>') 
        .appendTo($(column.footer()).empty()) 
        .on('change', function() { 
         var val = $.fn.dataTable.util.escapeRegex(
          $(this).val() 
         ); 

         column 
          .search(val ? '^' + val + '$' : '', true, false) 
          .draw(); 
        }); 

       column.data().unique().sort().each(function (d, j) { 
        select.append('<option value="' + d + '">' + d + '</option>') 
       }); 
      }); 
     } 
    }, 
}); 

}

HTML

<table id="overviewTable" class="table table-striped table-bordered" cellspacing="0" width="100%"> 
<thead>'; 
    <tr> 
     <th>ID</th> 
     <th>TITLE</th> 
     <th>TIER</th> 
     <th>REGION</th> 
     <th>2016</th> 
     <th>2017</th> 
     <th>LETTER TYPE</th> 
     <th>CHANGE TYPE</th> 
    </tr> 
</thead> 
<tfoot> 
    <tr> 
     <th>ID</th> 
     <th>TITLE</th> 
     <th>TIER</th> 
     <th>REGION</th> 
     <th>2016</th> 
     <th>2017</th> 
     <th>LETTER TYPE</th> 
     <th>CHANGE TYPE</th> 
     </tr> 
    </tfoot>