我有一个带有“全部清除”按钮的表格，允许用户立即同时删除所有单列过滤器和全局搜索。 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
});
那么，有没有办法检查两种类型的搜索栏是否为空，以便我可以按照所述隐藏和显示“全部清除”按钮？
最佳答案
您可以收听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”按钮默认是隐藏的。
关于javascript - 基于单个/全局搜索输入的切换按钮可见性为空，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56053934/