基于单个/全局搜索输入的切换按钮可见性为空答案

【问题标题】：Toggle button visibility based on individual/global search inputs are empty基于单个/全局搜索输入的切换按钮可见性为空
【发布时间】：2019-09-26 23:11:11
【问题描述】：

我有一个带有“全部清除”按钮的表格，允许用户同时立即删除所有单列过滤器和全局搜索。 This is a table that contains both types of filters.

下面的code完成了点击按钮的重置：

<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
});

那么，有没有办法检查这两种类型的搜索栏是否都是空的，以便我可以按照描述隐藏和显示“全部清除”按钮？

【问题讨论】：

标签： javascript jquery datatables filtering

【解决方案1】：

您可以在 DataTables 包装器内的所有 <input> 元素中收听 keyup 和 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”按钮默认是隐藏的。

【讨论】：

【解决方案2】：

试试这样：

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

检查一下：

http://jsfiddle.net/4rvmtv7d/ 谢谢

【讨论】：

恐怕你误解了我的问题。我不是在问如何在单击按钮时清除过滤器； OP 中的代码已经完成了这一点。我在问如果输入字段包含零文本，如何隐藏按钮。