如何将搜索添加到页脚中的某些DataTable列？

Question

我需要将不同类型（文本框，下拉列表）的过滤添加到DataTable中的某些（！）个别列到页脚。也就是说，我希望能够通过单个列来搜索添加到页脚的每个过滤器，并且过滤器的类型将取决于列，例如，对于列0，它是一个文本框，对于列1，它是一个下拉列表中，第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"); 
       } 
       }); 
      });