如何將搜索添加到頁腳中的某些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"); 
       } 
       }); 
      });