如何在页脚中的DataTable的某些列中添加搜索？ [英] How to add search to some individual columns of DataTable in the footer?

问题描述

我需要添加不同类型（文本框，下拉列表）的过滤到DataTable中的一些（！）个别列到页脚。也就是说，我想能够通过单个列搜索我添加到页脚中的每个过滤器，并且过滤器的类型将依赖于一列，例如对于列0，它是一个文本框，对于列1，它是一个下拉列表，第5列是一个日期戳。

I need to add filtering of different types (textbox, dropdown) to some(!) individual columns in DataTable to the footer. That is, I want to be able to search by a single column for each filter I add to the footer and the type of the filter will depend on a column, say, for the column 0 it's a textbox, for the column 1 it's a dropdown, for the column 5 it's a datepicker.

这是一个测试示例。注意构造函数的新类型（DataTable，而不是dataTable）。

Here's a test example. Note the new type of the constructor (DataTable, not 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');
  });

有什么事？

推荐答案

你需要在这里做两件事。

You need to do two things here.

• 在桌子上添加一个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 like这里指定了 http://datatables.net/examples/advanced_init/footer_callback.html 您也可以使用列而不是列。

  • Use footerCallBack like specified here http://datatables.net/examples/advanced_init/footer_callback.html You also used columns instead of column.

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

  
  

  这篇关于如何在页脚中的DataTable的某些列中添加搜索？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！