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

我有一个datatables表，表中的某些行禁止了类

。我想在页面加载时排除这些行，选中复选框时显示它们，如果复选框未选中，则再次排除它们

这是到目前为止我的代码

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


播放被禁歌曲？
$（'.ui.toggle.checkbox'）.checkbox({
onChecked:function（）{
log（'onChecked called'）；
$.fn.dataTable.ext.search.push(
功能（设置、数据、数据索引）{
返回true；
}
);
},
未选中：函数（）{
log（'onUnchecked called'）；
$.fn.dataTable.ext.search.push(
功能（设置、数据、数据索引）{
return！$（table.row（dataIndex.node（））.hasClass（'banked'）；
}
);
},
onChange:function（）{table.draw（）}
});

目前，在页面加载时没有排除行，因此我知道我的
onUnchecked
方法可以工作，因为我可以在页面加载时看到行，但是当我选中并取消选中我的复选框时，指定的行被隐藏，其他所有内容都显示出来

我不明白为什么我的
一旦选中
函数就不起作用了，我基本上需要它来显示所有的行（除非通过搜索栏过滤）

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

我如何才能让我的
方法在选中后工作，以及如何隐藏页面加载时的行？
我相信在页面加载时，您需要触发复选框以勾选

$('#display_banned_songs').trigger('change');

这样，它将在页面加载时勾选复选框并显示所有行

关于在页面加载上隐藏带有禁用类的行，您可以在页面加载上放置以下代码，看看这是否奏效：

$.fn.dataTable.ext.search.push(
   function(settings, data, dataIndex) {
      return $(table.row(dataIndex).node()).hasClass('banned');
   }
);

table.draw();

我希望这有帮助

如果您需要更多帮助，请告诉我。
假设您的源数据中有一些属性标记（如property
banked:true
），用于禁用项，并且您将该标记作为类应用于目标表行
，例如：

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

您可以使用DataTables筛选出行，取消选中筛选复选框时将类设置为“禁止”：

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

然后，您只需单击“筛选”复选框即可重新绘制表格：

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

完成该概念的演示，您可以在下面找到：


//示例源数据
const srcData=[{标题：'Fixxer'，艺术家：'Metallica'，禁止：false}，{标题：'Humanity'，艺术家：'Scorpions'，禁止：false}，{标题：'Turn the page'，艺术家：'Metallica'，禁止：false}，{标题：'Baby one more time'，艺术家：'Britney Spears'，禁止：true}，{标题：'Cranking ball'，艺术家：'Miley Cyrus禁止：true}]；
//数据表初始化
常量dataTable=$（'table'）。dataTable({
dom：‘t’，
数据：srcData，
栏目：[
{数据：'标题'，标题：'歌曲标题'}，
{数据：'艺术家'，标题：'乐队/艺术家'}
],
createdRow：（tr，data）=>data.banked？$（tr.addClass（'banked'）：true
});
//基于行的“禁止”类的自定义筛选器
$.fn.DataTable.ext.search.push（（u，uu，idx）=>！$（DataTable.row（idx.node（））.hasClass（'banked'）|$（'display_banked_歌曲'）。prop（'checked'）；
//禁止展示/隐藏
$（“#显示_禁止的_歌曲”）。在（'click'，（）=>dataTable.draw（））上
显示禁止播放的歌曲？
@GrumpyCrouton请告诉我另一半是什么好吗？我刚刚编辑了答案。请看这是否是您所需要的。不，我的问题是，我在
中使用的方法一旦被选中
就不起作用，目前无法隐藏列。