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(); 

       }); 

      });