javascript - 在数据表中的复选框上隐藏/显示特定行-6ren

javascript - 在数据表中的复选框上隐藏/显示特定行

转载作者：行者123 更新时间：2023-11-29 22:53:14

我有一个数据表，我表中的一些行有 banned 类。我想在页面加载时排除这些行，在选中复选框时显示它们，并在未选中复选框时再次排除它们。

到目前为止，这是我的代码

<div class="field">
    <div class="ui toggle checkbox">
        <input type="checkbox" id="display_banned_songs" tabindex="0" class="hidden">
        <label>Display Banned Songs?</label>
    </div>
</div>

$('.ui.toggle.checkbox').checkbox({
    onChecked: function() {
        console.log('onChecked called');
        $.fn.dataTable.ext.search.push(
           function(settings, data, dataIndex) {
              return true;
           }
        );
    },
    onUnchecked: function() {
        console.log('onUnchecked called');
        $.fn.dataTable.ext.search.push(
           function(settings, data, dataIndex) {
              return !$(table.row(dataIndex).node()).hasClass('banned');
           }
        );
    },
    onChange: function() { table.draw() }
});

目前，这些行不在页面加载时被排除，所以我知道我的onUnchecked 方法有效，因为我可以在页面加载时看到这些行，但是当我检查然后取消选中我的复选框，指定的行将被隐藏，其他所有内容都会显示。

我不明白为什么我的 onChecked 函数不起作用，我基本上需要它来显示所有行(除非被搜索栏过滤)。

我也不确定如何在页面加载时隐藏指定的行。

如何让我的 onChecked 方法正常工作，以及如何在页面加载时隐藏行？

最佳答案

假设，您在源数据中有一些属性标记(如属性 banned: true )用于禁止的项目，并且您将该标记作为一个类应用到目标表行 <tr>有一些东西，比如:

$('table').DataTable({
    ...
    createdRow: (tr, data) => data.banned ? $(tr).addClass('banned') : true
})

您可以使用数据表 custom filtering feature过滤掉行，在未选中过滤复选框时将类设置为“禁止”:

$.fn.DataTable.ext.search.push((_, __, idx) => !$(dataTable.row(idx).node()).hasClass('banned') || $('#display_banned_songs').prop('checked'))

然后您可以在单击过滤器复选框时简单地重绘表格:

$('#display_banned_songs').on('click', () => dataTable.draw());

您可能会在下面找到该概念的完整演示:

//sample source data
const srcData = [{title:'Fixxxer',artist:'Metallica',banned:false},{title:'Humanity',artist:'Scorpions',banned:false},{title:'Turn the page',artist:'Metallica',banned:false},{title:'Baby one more time',artist:'Britney Spears',banned:true},{title:'Wrecking ball',artist:'Miley Cyrus',banned:true}];

//datatables initialization
const dataTable = $('table').DataTable({
  dom: 't',
  data: srcData,
  columns: [
    {data: 'title', title: 'Song Title'},
    {data: 'artist', title: 'Band/Artist'}
  ],
  createdRow: (tr, data) => data.banned ? $(tr).addClass('banned') : true
});

//custom filter based on 'banned' class of the row
$.fn.DataTable.ext.search.push((_, __, idx) => !$(dataTable.row(idx).node()).hasClass('banned') || $('#display_banned_songs').prop('checked'));

//show/hide banned
$('#display_banned_songs').on('click', () => dataTable.draw());

<!doctype html><html><head><link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/rg-1.1.0/datatables.min.css" /><script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script><script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/rg-1.1.0/datatables.min.js"></script></head><body><div class="field"><div class="ui toggle checkbox"><input type="checkbox" id="display_banned_songs" tabindex="0" class="hidden" checked><label>Display Banned Songs?</label></div></div><table></table></body></html>

关于javascript - 在数据表中的复选框上隐藏/显示特定行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57077729/