установите все флажки в FooTable с разбиением на страницы и фильтрацией - PullRequest
Новая
       14

установите все флажки в FooTable с разбиением на страницы и фильтрацией

0 голосов
/ 27 февраля 2019

В настоящее время я работаю над проектом FooTable, в котором я пытаюсь создать флажок «выбрать все».Я столкнулся с двумя проблемами и не могу понять, как действовать:

  1. Я могу выбрать все элементы, ВСЕ элементы (независимо от фильтрации) или только элементы на странице.
  2. Я могу заставить все строки отображаться и выбирать, но он не будет фильтроваться.
  3. Я могу применить фильтр и все равно выбрать все строки.

То, что я ищу - это способ установить только флажки отфильтрованных строк, даже если строки находятся на разных страницах.Я подумал, что для достижения этой цели может быть использован неуклюжий способ:

  1. увеличить pageSize до количества отфильтрованных строк
  2. установить все флажки в отображаемых строках
  3. вернуться к 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/

...