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({})初始化表格兩次，但它只應該做一次，因此錯誤。

同樣在服務器端處理"serverSide": true並非所有列值都會立即可用，只有當前頁面。因此您需要執行

• 切換到客戶端處理模式。將兩個$('#example').DataTable({})調用合併爲一個後，您的代碼就會很好。

• 通過Ajax從服務器中檢索所有可能的值並填充下拉框。這需要更多的前端和後端代碼，並且您需要在initComplete處理程序中丟棄您的代碼。