datatable tfoot輸入選擇服務器端搜索

Question

您好我正在使用ajax填充分頁的數據表，但使用下面的例子來填充輸入選擇過濾，它只填充下拉列表與當前頁面上找到的下拉列表。因此，我從服務器端填充tfoot部分。

https://datatables.net/examples/api/multi_filter_select.html

然而，爲了分配上的變化時，我仍然嘗試使用下面的方法initComplete ..但它似乎並不像去上更改事件。有沒有我做錯了..？

  "initComplete": function() { 
      this.api().columns([1]).every(function() { 
       var column = this; 

       console.log(this.value); 
       $('input', this.footer()).on('change', function (e) { 
        column.search(this.value).draw(); 
       }); 
      }); 

服務器端產生的tfoot html代碼如下。

<tfoot> 
        <tr> 
         <th> </th> 
         <th> 
          <select class="form-control input-sm"> 
          <option value=""></option><option value="1">a</option> 
          <option value="2">b</option> 
          <option value="3">c</option> 
          <option value="4">d</option> 
          <option value="5">e</option>         
          </select> 
         </th> 
         <th> </th> 
         <th> </th> 
         <th> </th> 
         <th> </th> 
         <th> </th> 
         <th> </th> 
         <th> </th> 
         <th> </th> 
         <th> </th> 
         <th> </th> 
        </tr> 
       </tfoot> 

Answer 1

我設法使用下面的代碼得到這個工作...

"initComplete": function() { 

      this.api().columns([1]).every(function() { 
       var column = this; 
       console.log($('select', this.footer())); 
       $('select', this.footer()).on('change', function() { 
        alert('reach here'); 
        console.log($(this).val()); 
        var val = $(this).val(); 
        column.search(val ? '^' + val + '$' : '', true, false).draw(); 

       }); 

      });