复选框过滤器/搜索按钮：未选中时无法撤消过滤

Question

我有一张用数据表制作的表格。有一个复选框，当单击该复选框时，它会过滤表格以仅显示我想查看的数据。问题是当我取消选中该复选框时，表格会出现问题。 table.destroy() 函数似乎确实将表格恢复到原来的样子，尽管它看起来破坏得有点太多（每页的行突然被忽略 + 不能再点击单元格，这会在另一个窗口中打开）。我猜destroy() 不是在未选中时恢复到原始表/数据的正确方法。那么正确的做法是什么？

会发生这样的事情：

1. 点击复选框：正确过滤数据
2. 取消选中复选框：表格看起来好像恢复正常（但实际上并没有）
3. 再次选中复选框：不再正确过滤数据。 （表格现在是空的）
4. 现在无论我选中还是取消选中都没有关系，表格保持不变（空）

这是我的代码：

var checkbox = $("#checkB");
checkbox.click(function () {
     var table = $('#TABLE_NAME').DataTable();
     if (checkbox.is(":checked")) {
            $.fn.dataTable.ext.search.push(
                function (settings, data, dataIndex) {
                    var num = Number(data[4]);
                    if (num > 0) {
                        return true;
                    }
                    return false;
                }
            );
            table.draw();
        }
    else {
            table.destroy();    
        }
    });

Answer 1

我终于找到了答案。在“其他”部分，我只是写道：

else {
            $.fn.dataTable.ext.search.pop();
            table.draw();
        }

瞧！

Answer 2

就是这样！我找出问题所在。这是最终的工作代码。

提示：我破解了过滤功能

var checkbox = $("#checkB");
var table = $('#example').DataTable();

$.fn.dataTable.ext.search.push(
  function (settings, data, dataIndex) {
      if (checkbox.is(":checked")) {
        return Number(data[1]) > 0 ? true : false;
      } else {
        return true;
      }
  }
);

checkbox.click(function () {
  if (checkbox.is(":checked")) {
    table.draw();
  } else {
    table.draw();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<input type="checkbox" id="checkB" value="Check"> Check this to filter
<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Example</th>
            <th>Number</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Example1</td>
            <td>-10</td>
        </tr>
        <tr>
            <td>Example2</td>
            <td>10</td>
        </tr>
        <tr>
            <td>Example3</td>
            <td>20</td>
        </tr>
    </tbody>
</table>