如何使用 DataTables 过滤掉特定的行

Question

我正在使用 jQuery DataTables，我想知道如何根据复选框的状态过滤表中的 OUT 行以显示和隐藏它们。如果选中了“隐藏”复选框，则隐藏 class=var 的行，如果未选中复选框，则显示 class=var 的行

我设置了一个小演示，能够隐藏/删除我想要的行，但这不允许行重新出现。

http://jsfiddle.net/bcraig/cY8Cn/2/

$('#stock').DataTable({
    "sDom": '',
    "infoEmpty": "No entries to show", 
    "aaSorting": [ ], 
    "aoColumnDefs": [{ "bSortable": false,  "aTargets": [ 0 ]}],
});
var oTable = $('#stock').DataTable();   

$('#hide').click(function() {
    if ($(this).is(':checked')) {
        oTable.row('.takenstock, .takensold').remove().draw(true);
        $('label').text("Show taken");
    } else {
        oTable.draw();
        $('label').text("Hide taken");
    }
});

Answer 1

您必须使用 DataTables 过滤器，我将代码更改为如下所示，您可以在小提琴示例中对其进行检查：

http://jsfiddle.net/cY8Cn/4/

这里还有来自 DataTables 的过滤文档： http://www.datatables.net/development/filtering

$('#stock').DataTable({
    "sDom": '',
    "infoEmpty": "No entries to show", 
    "aaSorting": [ ], 
    "aoColumnDefs": [{ "bSortable": false,  "aTargets": [ 0 ]}],
});
var oTable = $('#stock').DataTable();   

$.fn.dataTableExt.afnFiltering.push(
    function( oSettings, aData, iDataIndex ) {
      var nTr = oSettings.aoData[ iDataIndex ].nTr;

      if (($(nTr).hasClass('takenstock') || $(nTr).hasClass('takensold')) 
          && $('#hide').is(':checked')) {
          return false;
      }
      else {
          return true;
      }
    }
);

$('#hide').click(function() {
    oTable.draw();

    if ($(this).is(':checked')) {
        $('label').text("Show taken");
    } else {
        $('label').text("Hide taken");
    }
});