如何为dataTables启用多列过滤器？

Posted 2021-05-04

我是dataTable自定义的新手，对于多列搜索（通过输入文本框）我提到了这个：https://datatables.net/examples/api/multi_filter.html。 并复制粘贴提到的javascript。通过那个链接。够了吗？ PS：我也提到了提到的文件，是否需要添加这些文件？因为我的页面中有许多其他jQuery文件（用于引导程序和其他功能），所以我已经包含了所有dataTables文件。

<script src=" https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

<script src="<?php echo base_url() ?>plugins/jquery-datatable/jquery.dataTables.js"></script>
<script src="<?php echo base_url() ?>plugins/jquery-datatable/skin/bootstrap/js/dataTables.bootstrap.js"></script>
<script src="<?php echo base_url() ?>plugins/jquery-datatable/extensions/export/dataTables.buttons.min.js"></script>
<script src="<?php echo base_url() ?>plugins/jquery-datatable/extensions/export/buttons.flash.min.js"></script>
<script src="<?php echo base_url() ?>plugins/jquery-datatable/extensions/export/jszip.min.js"></script>
<script src="<?php echo base_url() ?>plugins/jquery-datatable/extensions/export/pdfmake.min.js"></script>
<script src="<?php echo base_url() ?>plugins/jquery-datatable/extensions/export/vfs_fonts.js"></script>
<script src="<?php echo base_url() ?>plugins/jquery-datatable/extensions/export/buttons.html5.min.js"></script>
<script src="<?php echo base_url() ?>plugins/jquery-datatable/extensions/export/buttons.print.min.js"></script>

用于refrenceclick here的图片

答案

没有看到你的代码，很难说出错了什么。你给出的例子很好，这是另一个现场enter link description here - 代码如下。希望那些会让你前进。

$(document).ready(function() {
  $('#example thead th').each( function () {
    var title = $(this).text();
    $(this).html( '<input type="text" placeholder='+title+' />' );
  } );

  var table = $('#example').DataTable({
    scrollX: true
  });

  table.columns().every( function () {
    var that = this;

    $( 'input', this.header() ).on( 'keyup change', function () {
        if ( that.search() !== this.value ) {
            that
                .search( this.value )
                .draw();
        }
    } );
} );

} );