检查当前是否通过搜索过滤了DataTables-element

Question

在这种情况下，我需要确定当前是否通过搜索过滤了jQuery-DataTables。

有没有办法检查一下？

Answer 1

好了，我想出了一个办法。基本上，我是在检查搜索输入是否有值。

if($('#myIdnameHere').find('input[type=search]').val() == ''){
    //then I know that it isn't filtered.
}

Answer 2

您可以检查搜索输入的value。但DatatTables-library提供了更好的解决方案。

要获得全局搜索的查询，可以使用不带参数的search()-method并比较返回的字符串：

let query = table.search();
console.log(query); // outputs a string

但是，在DataTables中执行数据搜索还有其他选择，比如列搜索。使用column-search，您可以对每一列执行更复杂的搜索。这些查询不会出现在搜索输入中，也不会由DataTables--method的search()对象返回。要获得列的查询，可以遍历所有列，并利用search()-method读取当前的查询值：

let queries = [];
let columns = table.columns().indexes();
for (let i = 0; i < columns.length; i++) {
  queries.push(table.column(i).search());
}
console.log(queries); // outputs an array of strings

示例：

​

$(document).ready(function() {
  let table = $('#example').DataTable();
  
  $('#get-queries').on('click', function(event){
    event.preventDefault();
    
    // get and output global query
    let query_global = table.search();
    console.log('global query:');
    console.log(query_global);
    
    // get and output column queries
    let query_columns = [];
    let columns = table.columns().indexes();
    for (let i = 0; i < columns.length; i++) {
      query_columns.push(table.column(i).search());
    }
    console.log('column queries:');
    console.log(query_columns);
  });
  
  $('#custom-search-1').on('click', function(event){
    event.preventDefault();
    // perform global query (and draw data)
    table.search('Alpha').draw();
  });
  
  $('#custom-search-2').on('click', function(event){
    event.preventDefault();
    // perform different queries on columns
    table.columns(0).search('Alpha');
    table.columns(1).search('Test');
    // draw data
    table.draw();
  });

  $('#reset').on('click', function(event){
    event.preventDefault();
    // reset global query
    table.search('');
    // reset column queries
    table.columns().search('');
    // draw data
    table.draw();
  });

});

#get-queries {
  font-weight: bold;
  color: green;
}

#custom-search-1,
#custom-search-2 {
  font-weight: bold;
  color: orange;
}

#reset {
  font-weight: bold;
  color: red;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>

<button id="get-queries">Get queries</button> / 
<button id="custom-search-1">Search global</button>
<button id="custom-search-2">Search in columns</button> / 
<button id="reset">Reset</button>

<hr>

<table id="example">
  <thead>
    <tr><th>Name</th><th>Description</th></tr>
  </thead>
  <tbody>
    <tr><td>Test-1</td><td>Test 1234</td></tr>
    <tr><td>Test-3</td><td>I dont know!</td></tr>
    <tr><td>Test-2</td><td>Another...</td></tr>
    <tr><td>Alpha-1</td><td>Apple Test</td></tr>
    <tr><td>Alpha-2</td><td>Banana Test</td></tr>
    <tr><td>Alpha-3</td><td>Coconut</td></tr>
    <tr><td>Beta-1</td><td>Beta</td></tr>
    <tr><td>Beta-2</td><td>Not Alpha</td></tr>
  </tbody>
</table>

​