Question

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

的行

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

$('#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");
    }
});

如何使用DataTables过滤OUT特定行

1 个答案: