个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-01 01:01:06 26 4
gpt4 key购买 nike

我有一个带有“全部清除”按钮的表格，允许用户立即同时删除所有单列过滤器和全局搜索。 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/

26 4 0
文章推荐： javascript - 将 json 响应转换为表
文章推荐： jquery - 刷新数据后如何重置jqgrid
文章推荐： python - 如何在曲面图上投影一条线？
文章推荐： javascript - 对变量值的更改不会保留在 JavaScript 的 if 语句中
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com