Question

我目前正在FooTable项目中尝试创建“全选”复选框。我遇到了两个问题，我不知道该怎么做；

我可以选择所有项目，也可以选择所有项目（与过滤无关）或只是页面上的项目。
我可以显示所有行并进行选择，但不会过滤。
我可以应用过滤器，但仍然选择所有行。

我正在寻找的是一种仅选择已过滤行复选框的方法，即使这些行位于不同页面上也是如此。我认为完成此操作的一种卑鄙的方式是：

将pageSize增加到已过滤的行数以上
选中显示的行中的所有复选框
恢复为OG pageSize

<table class="tg" data-paging="true" data-paging-size="3" data-filtering="true">
  <thead>
    <tr>
      <td>ID</td>
      <td>Name</td>
      <td>Select All:<input type="checkbox" class="check-all"></td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>&nbsp;</td>
      <td><input type="checkbox" class="check-one"></td>
    </tr>
    <tr>
      <td>2</td>
      <td>&nbsp;</td>
      <td><input type="checkbox" class="check-one"></td>
    </tr>
    <tr>
      <td>3</td>
      <td>&nbsp;</td>
      <td><input type="checkbox" class="check-one"></td>
    </tr>
    <tr>
      <td>4</td>
      <td>&nbsp;</td>
      <td><input type="checkbox" class="check-one"></td>
    </tr>
    <tr>
      <td>5</td>
      <td>&nbsp;</td>
      <td><input type="checkbox" class="check-one"></td>
    </tr>
    <tr>
      <td>6</td>
      <td>&nbsp;</td>
      <td><input type="checkbox" class="check-one"></td>
    </tr>
    <tr>
      <td>7</td>
      <td>&nbsp;</td>
      <td><input type="checkbox" class="check-one"></td>
    </tr>
    <tr>
      <td>8</td>
      <td>&nbsp;</td>
      <td><input type="checkbox" class="check-one"></td>
    </tr>
    <tr>
      <td>9</td>
      <td>&nbsp;</td>
      <td><input type="checkbox" class="check-one"></td>
    </tr>
    <tr>
      <td>10</td>
      <td>&nbsp;</td>
      <td><input type="checkbox" class="check-one"></td>
    </tr>
    <tr>
      <td>11</td>
      <td>&nbsp;</td>
      <td><input type="checkbox" class="check-one"></td>
    </tr>
  </tbody>
</table>

jQuery(function($) {
  $('.tg').footable();

  function changePageSize(qs_table, num_rows_page) {
    let newSize = num_rows_page;
    FooTable.get(qs_table).pageSize(newSize);
  }

  function checkedAll(qs_table, qs_checkbox, num_column, checked) {
    var ft = FooTable.get(qs_table)
    ft.pageSize(11);
    FooTable.init(qs_table);
    let rows = ft.rows.all;
    rows.forEach(function(row) {
      row.draw(); //REQUIRED for js rendering row, else selected only chockboxes on the active page
      $(qs_checkbox, row.cells[num_column].$el[0]).prop('checked', checked);
    });
  }

  $(document).on("change", ".check-all", function() {
    checkedAll(".tg", ".check-one", 2, $(this).prop('checked'));
  });
});

这是我的JSFiddle：https://jsfiddle.net/T3DDIE_B3AR/pe2usL5r/

选中FooTable中具有分页和过滤功能的所有复选框

0 个答案: