Проверьте, фильтруется ли элемент DataTables в данный момент через поиск

Question

У меня есть ситуация, когда мне нужно выяснить, фильтруется ли в данный момент jQuery-DataTables через поиск.

Есть ли способ проверить это?

Answer 1

Вы можете проверить value поиска-ввода.Но есть и лучшие решения, предоставляемые DatatTables -библиотекой.

Чтобы получить запрос глобального поиска, вы можете использовать search() -метод без параметра и сравнить возвращаемую строку:

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

Но есть и другие варианты выполнения поиска данных в DataTables, например поиск по столбцу.С помощью поиска по столбцам вы можете выполнять более сложный поиск с отдельными запросами для каждого столбца.Эти запросы не отображаются в поиске-вводе и также не возвращаются методом search() объекта DataTables-Object.Чтобы получить запросы к столбцам, вы можете выполнить итерацию по всем столбцам и использовать search() -метод для чтения текущего значения запроса:

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>

Answer 2

Хорошо, я нашел способ сделать это. В основном я проверяю, имеет ли значение для поиска значение.

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