javascript - 如何将搜索添加到页脚中 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

你需要在这里做两件事。

• 在你的 table 上加一只脚，这样它就有空间可以加了

 <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");
         }
        });
    });