Есть ли способ добавить флажок «выбрать все» в dataTable, который проверяет все флажки в следующих строках таблицы

Question

У меня есть несколько динамических c таблиц на моей странице. В каждой строке есть флажок, который я назначаю значению, которое я получаю из запроса sql. Прикрепленный скриншот ниже: -

Пример с двумя динамическими c таблицами

Может быть более 5-10 таблиц за раз.

Вот мой код руля для структуры таблицы

<div id="collapse_{{major_location_id}}" class="collapse show" aria-labelledby="heading data-parent="#accordion">
                             <div class="card-body">
                                <div class="common_table table-responsive search-input tablecolumnLimit">
                                   <table class="table  locations-table">
                                      <thead>
                                         <tr>
                                            <th>
                                               <label class="custom_checkbox">
                                                  <input class="chk_all" type="checkbox">
                                                  <span class="checkmark"></span>
                                               </label>Location Name
                                            </th>
                                            <th>Address</th>
                                            <th>City</th>
                                            <th>Zipcode</th>
                                         </tr>
                                      </thead>
                                      <tbody>
                                         {{#each locations}}

                                         <tr>
                                            <td>
                                               <label class="custom_checkbox">
                                                  {{#if (eq type 'participant')}}
                                                  <input type="checkbox" class="chk_cls"
                                                     name="participant_locations[]" value="{{location_id}}">
                                                  {{else}}
                                                  <input type="checkbox" class="chk_cls"
                                                     name="non_participant_locations[]" value="{{location_id}}">
                                                  {{/if}}
                                                  <span class="checkmark"></span>
                                               </label>{{location_name}}</td>
                                            <td>{{this.address1}}</td>
                                            <td>{{this.donor_city}}</td>
                                            <td>{{this.zip}}</td>
                                         </tr>
                                         {{/each}}
                                      </tbody>
                                   </table>
                                </div>
                             </div>
                          </div>

Вот мой скрипт для таблицы данных.

 $(document).ready(function () {
     //          var rowCount = $('#myTable tr').length;

     var table = $('.locations-table').dataTable();

     $(".chk_all").on('click', function () {
        /* I want to check all the checkboxes that exists in the table which **this** button 
           belongs to. Keeping in mind the hidden checkboxes due to pagination.
     });

)};

Следующий код работает только для одного стол:

$("#chk_all").on('click', function () {
    var cells = table.api().cells().nodes();
    $(cells).find('.chk_cls').prop('checked', this.checked);
});

Answer 1

Следующее изменение в предложении Эндрю сработало для меня. Я использовал $ (this), чтобы найти ближайшую к моему флажку Check All таблицу, а затем использовал переменную, чтобы получить все ячейки.

$(".chk_all").on('click', function () {
     var myTable = $(this).closest(table);
     var cells = $(myTable).dataTable().api().cells().nodes();
     $(cells).find('.chk_cls').prop('checked', this.checked);
});

Answer 2

Вы можете использовать тот же DataTables API , который вы уже используете, но просто предоставить другой селектор - например:

var cells = $('.dataTable').dataTable().api().cells().nodes();

Это находит все таблицы, которые используют класс dataTable. Оттуда вы можете использовать остальную часть вашего существующего логи c.