Datatables - 既存のスクリプトにフィルタ機能を追加する

Question

私はDatatablesをインストールしていますが、この例のアクティベーションスクリプトがありますが、私のデータテーブルにカラムフィルタを追加しようとしていますが、エラー。

次のコードを調整して、各列にフィルタを追加して機能させる方法はありますか？

$(document).ready(function() { 
    $('#example').DataTable({ 
     "processing": true, 
     "serverSide": true, 
     "ajax": "ssp.php", 
    }); 
});  
$(document).ready(function() { 
     $('#example').DataTable({ 
      initComplete: function() { 
       this.api().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>') 
        }); 
       }); 
      } 
     }); 
    }); 

Answer 1

$('#example').DataTable({})でテーブルを2回初期化しますが、エラーが1回だけ発生します。

また、サーバー側の処理"serverSide": trueでは、すべての列の値がすぐに使用できるわけではなく、現在のページのみです。したがって、いずれかを行う必要があります

• クライアント側の処理モードに切り替えます。 2つの呼び出しを1つにまとめると、あなたのコードはうまくいくでしょう。

• サーバーからすべての値をAjax経由で取得し、ドロップダウン・ボックスに入力します。これにはより多くのフロントエンドとバックエンドのコードが必要となり、initCompleteハンドラでコードを破棄する必要があります。