dataTables按一列搜索过滤器

3 回答

• 4

  除了用户选择的内容之外，您可以禁用其他列的搜索 . DataTable具有此选项 { "searchable": false, "targets": 0 } 您可以动态更改此配置对象 .

  或者，您还可以使用 columns().search() 动态指定应在其上执行搜索的列 .

  e.g. table
      .columns( '.status' )
      .search( 'Important' )
      .draw();
  

  回复于 2024-04-27T13:11:44+08:00
• 0

  它很容易，多次以各种方式询问 - 但令人惊讶的是我找不到完全匹配 . 如果您的 <select> 对应于您的列：

  <select id="select">
    <option>Seq.</option>
    <option>Name</option>
    <option>Position</option>
    <option>Office</option>
    <option>Start date</option>
    <option>Salary</option>
  </select>
  

  然后你可以通过 .unbind() 劫持搜索框并定位与选择' selectedIndex 对应的列：

  $('.dataTables_filter input').unbind().bind('keyup', function() {
    var colIndex = document.querySelector('#select').selectedIndex;
    table.column( colIndex).search( this.value ).draw();
  });
  

  演示 - > http://jsfiddle.net/8fLagfyp/

  顺便说一句：您可以在更改选择时重置以前的搜索

  $('#select').change(function() {
    table.columns().search('').draw();
  });
  

  回复于 2024-04-27T13:11:44+08:00
• 0

  它很容易，多次以各种方式询问 - 但令人惊讶的是我找不到完全匹配 . 如果您的 <select> 对应于您的列：

  <select class="form-control" id="ddlSearch">
      <option value="0">Name</option>
      <option value="1">Position</option>
      <option value="2">Office</option>
      <option value="3">Age</option>
      <option value="4">Start date</option>
      <option value="5">Salary</option>
  </select>
  

  然后实现此JavaScript以在单独的列中进行搜索

  var table;
  
  $(document).ready(function() {
      table = $('#example').DataTable({
          pageLength: 100,
          dom: 'lrtip',
      });
      var column_no = 0;
      $('#ddlSearch').on('change',function(){
          column_no = Number($(this).val());
      });
  
      $( '#txtSearch' ).on( 'input', function () {
          if ( table.columns([column_no]).search() !== $( '#txtSearch' ).val() ) {
              table.columns([column_no]).search( $( '#txtSearch' ).val() ).draw();
          }
      } );
  });
  

  例如试试这个https://jsfiddle.net/07rnpgs1/

  祝一切顺利

  回复于 2024-04-27T13:11:44+08:00