Question

我有一个数据表表，表中的某些行具有类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函数不起作用，我基本上需要它来显示 all 行（除非被搜索栏过滤）。

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

如何使onChecked方法正常工作，如何隐藏页面加载时的行？

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

<!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>

Answer 2

我相信在您的页面加载中，您需要触发复选框被打勾。

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

这样，它将选中页面加载时的复选框并显示所有行。

关于在页面加载中隐藏具有被禁止类的行，您可以在页面加载中放置以下代码，看看是否能解决问题：

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

table.draw();

我希望这会有所帮助。

让我知道是否需要更多帮助。

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

2 个答案: