Видимость кнопки переключения на основе индивидуальных / глобальных поисковых запросов пуста - PullRequest
Новая
       26

Видимость кнопки переключения на основе индивидуальных / глобальных поисковых запросов пуста

0 голосов
/ 09 мая 2019

У меня есть таблица с кнопкой «Очистить все», чтобы пользователь мог мгновенно удалить все фильтры отдельных столбцов и глобальный поиск одновременно. Это таблица, которая содержит оба типа фильтров .

Следующий код выполняет сброс при нажатии кнопки: 

<button type="button" id="test" class="btn btn-primary">Clear Filters</button>

<script>
$('#test').click(function() {
     $("#MyTable").DataTable().search("").draw(); // clears global search bar
     $('#MyTable tfoot input').val('').change();  // clears individual column filters
     $(this).hide();
});
</script>

Но я хочу, чтобы кнопка была скрыта , когда нет текста ни в отдельных столбцах поиска в <tfoot>, ни в глобальной панели поиска. Я хочу, чтобы кнопка появлялась снова, как только пользователь вводит какой-либо текст.

Этот код ( src , src ) работает для мониторинга входных данных глобального поиска, но не отслеживает отдельные строки поиска столбцов: 

$('#MyTable').on('search.dt', function() {
    var value = $('.dataTables_filter input').val();
    alert(value); // <-- the value
});

Итак, есть ли способ проверить, пусты ли оба типа панелей поиска, чтобы я мог скрыть и показать кнопку «Очистить все», как описано?

Ответы [ 2 ]

1 голос
/ 10 мая 2019

Вы можете прослушивать keyup во всех <input> элементах внутри оболочки DataTables и hide() вашей кнопки, если таковая имеется, содержит символы и show(), иначе: 

$('.dataTables_wrapper input').on('keyup', () => {
    if([...$('.dataTables_wrapper input')].some(input => $(input).val().length > 0) $('#test').hide();
    else $('#test').show();
});

После демо иллюстрирует этот подход: 

//sample source data
const srcData = [
  {item: 'apple', type: 'fruit', qty: 5},
  {item: 'pear', type: 'fruit', qty: 4},
  {item: 'banana', type: 'fruit', qty: 7},
  {item: 'carrot', type: 'vegie', qty: 14},
  {item: 'goosberry', type: 'berry', qty: 6}
];

//initialize DataTables
const dataTable = $('#mytable').DataTable({
  dom: 'ft',
  data: srcData,
  columns: ['item', 'type', 'qty'].map(header => ({title: header, data: header})),
});

//append footer
$('#mytable').append('<tfoot><tr></tr></tfoot>');
//populate that with input fields
dataTable.columns().every(function(){
  $('#mytable tfoot tr').append(`<td><input colindex="${this.index()}" placeholder="${$(this.header()).text()}"></input></td>`);
});

//filter upon column inputs
$('#mytable').on('keyup', 'tfoot input', function(){
  dataTable.column($(this).attr('colindex')).search($(this).val()).draw();
});

//implement clearall button
$('#clearall').on('click', () => {
  //empty all inputs
  [...$('.dataTables_wrapper input')].forEach(input => $(input).val(''));
  //clear individual columns search
  dataTable.columns().every(function(){this.search('')});
  //clear global search
  dataTable.search('');
  //re-draw
  dataTable.draw();
});

//toggle 'clearall' button visibility
$('.dataTables_wrapper input').on('keyup', () => {
    if([...$('.dataTables_wrapper input')].some(input => $(input).val().length > 0)) $('#clearall').show();
    else $('#clearall').hide();
});
<!doctype html>
<html>
<head>
  <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
<table id="mytable"></table>
<button id="clearall" hidden>Clear all</button>
</body>
</html>

Обратите внимание, что кнопка 'clearall' по умолчанию скрыта.

1 голос
/ 09 мая 2019

Попробуйте вот так: 

$('#test').click(function() {
$('#myInputTextField1, #myInputTextField2').val('');
table.search('').draw(); //required after
});

отметьте это:

http://jsfiddle.net/4rvmtv7d/ Спасибо

...