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

【问题标题】：Hide/show specific rows on checkbox in datatables隐藏/显示数据表中复选框上的特定行
【发布时间】：2021-08-27 14:49:46
【问题描述】：

我有一个 datatables 表，我表中的某些行具有 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 方法正常工作，如何在页面加载时隐藏行？

【问题讨论】：

标签： javascript jquery datatables

【解决方案1】：

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

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

您可以使用 DataTables 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());

&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;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" /&gt;&lt;script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"&gt;&lt;/script&gt;&lt;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"&gt;&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="field"&gt;&lt;div class="ui toggle checkbox"&gt;&lt;input type="checkbox" id="display_banned_songs" tabindex="0" class="hidden" checked&gt;&lt;label&gt;Display Banned Songs?&lt;/label&gt;&lt;/div&gt;&lt;/div&gt;&lt;table&gt;&lt;/table&gt;&lt;/body&gt;&lt;/html&gt;

【讨论】：

【解决方案2】：

我相信在您的页面加载时您需要触发复选框。

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

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

关于在页面加载时隐藏带有禁止类的行，您可以在页面加载中添加以下代码，看看是否可以解决问题：

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

table.draw();

我希望这会有所帮助。

如果您需要更多帮助，请告诉我。

【讨论】：

@GrumpyCrouton 你能告诉我另一半是什么吗？
我刚刚编辑了答案。请看看这是否是您所需要的。
不，我的问题是我在onChecked中使用的方法不起作用，目前没有办法_un_hide。