Question

我有一张桌子，我想在特定列上应用搜索过滤器。我看到了许多有关此操作的链接，但是在我的代码中，当我插入一个javascript块进行过滤时，没有任何显示。

 <html>
 <head>
  <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">


  </head>
 <body>
 <table id="example">
   <thead>
   <tr><th>Sites</th></tr>
  </thead>
  <tbody>
     <tr><td>SitePoint</td></tr>
     <tr><td>Learnable</td></tr>
     <tr><td>Flippa</td></tr>
   </tbody>
  </table>
  <script>
  $(function(){
 $("#example").dataTable();
 })
  </script>

我的困惑是，这段代码去了哪里（适合主代码）？

  <script>
  $(document).ready(function() {
  // Setup - add a text input to each footer cell
  $('#example tfoot th').each( function () {
    var title = $(this).text();
    $(this).html( '<input type="text" placeholder="Search '+title+'" 
     />' );
      } );

   // DataTable
   var table = $('#example').DataTable();

    // Apply the search
   table.columns().every( function () {
    var that = this;

    $( 'input', this.footer() ).on( 'keyup change', function () {
        if ( that.search() !== this.value ) {
            that
                .search( this.value )
                .draw();
        }
    } );
} );
} );
</script>

Answer 1

来源：

$('#example thead tr').clone(true).appendTo( '#example thead' );
    $('#example thead tr:eq(1) th').each( function (i) {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );

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

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

这段代码是在渲染DOM之后执行的。

用于固定表列名的克隆ID，以防止滚动到页面之外。为此，您还需要this script。

Answer 2

如果您想使用数据表搜索输入来应用搜索过滤器，则可以通过将像这样的其余列的searchable选项设置为false来实现：

$('#example').datatable({
    columnDefs: {
       targets: [1,2], // the desired columns
       searchable: false
    }
});

如何使用数据表仅对一列应用搜索过滤器

2 个答案: