Как добавить поиск в отдельные столбцы DataTable в нижнем колонтитуле?

Question

Мне нужно добавить фильтрацию различных типов (текстовое поле, выпадающее меню) в некоторые (!) Отдельные столбцы в DataTable в нижний колонтитул. То есть, я хочу, чтобы иметь возможность искать по одному столбцу для каждого фильтра, который я добавляю в нижний колонтитул, и тип фильтра будет зависеть от столбца, скажем, для столбца 0, это текстовое поле, для столбца 1 это dropdown, для столбца 5 это датапикер.

Вот пример испытания. Обратите внимание на новый тип конструктора (DataTable, а не dataTable).

$("#my-table").DataTable({ 
    //..... 
    , 'initComplete': function (settings, json) { 
     var cl = this.api().columns(1); //2nd column 

     $(cl.footer()).html("fdsfds"); //doesn't work 

     //this.api().columns().every(function(){ 
     //var column = this; 
     //$(column.footer()).html('fdsfsdfd'); //doesn't work either 
     //}); 


     //neither this 

     //var api = this.api(); 
     // $(api.column(1).footer()).html('dsfs2222'); 
    }); 

Что случилось?

Answer 1

Вам нужно сделать две вещи здесь.

• Добавить TFOOT в таблицу, так что будет иметь место, чтобы добавить его

<table id="example" class="display" cellspacing="0" width="100%"> 
     <thead> 
      <tr> 
       <th>First name</th> 
       <th>Last name</th> 
       <th>Position</th> 
       <th>Office</th> 
       <th>Salary</th> 
      </tr> 
     </thead> 
     <tfoot> 
      <tr> 
       <th colspan="4" style="text-align:right">Total:</th> 
       <th></th> 
      </tr> 
     </tfoot> 
     <tbody> 
      <tr> 
       <td>Tiger</td> 
       <td>Nixon</td> 
       <td>System Architect</td> 
       <td>Edinburgh</td> 
       <td>$320,800</td> 
      </tr> 
     </tbody> 
</table> 

• Используйте footerCallBack, как указано здесь http://datatables.net/examples/advanced_init/footer_callback.html Вы также используются столбцы вместо столбца ,

  $(document).ready(function() { 
       $('#example').DataTable({ 
       "footerCallback": function (row, data, start, end, display) { 
        var api = this.api(), data; 
        $(api.column(1).footer()).html("test text"); 
       } 
       }); 
      });