Можно ли использовать чекбоксы с dynatable? - PullRequest
Новая
       33

Можно ли использовать чекбоксы с dynatable?

0 голосов
/ 18 марта 2019

Я использую dynatable (https://www.dynatable.com/) для отображения данных, и у меня есть столбец флажок, чтобы выбрать строки, как показано ниже enter image description here

но когда я меняю страницу, состояние флажка меняется на непроверенное.

enter image description here

Я выбираю все строки с помощью флажка в заголовке таблицы

HTML код 

<table class="table table-bordered" id="customerDataTable" style="">
   <!-- Table head -->
   <thead>
      <tr>
         <th data-dynatable-column="dynatable-generated-0" data-dynatable-no-sort="true" data-dynatable-generated="0" class="dynatable-head">
            <!-- Default unchecked -->
            <div class="custom-control custom-checkbox">
               <input type="checkbox" class="custom-control-input" id="tableCheckId">
            </div>
         </th>
         <th data-dynatable-column="name" class="dynatable-head"><a class="dynatable-sort-header" href="#">name</a></th>
         <th data-dynatable-column="companyName" class="dynatable-head"><a class="dynatable-sort-header" href="#">Company Name</a></th>
         <th data-dynatable-column="email1" class="dynatable-head"><a class="dynatable-sort-header" href="#">email1</a></th>
         <th data-dynatable-column="balance" class="dynatable-head"><a class="dynatable-sort-header" href="#">Balance</a></th>
      </tr>
   </thead>
   <!-- Table head -->
   <!-- Table body -->
   <tbody>
      <tr>
         <td style="text-align: left;">
            <div class="custom-control custom-checkbox"><input type="checkbox" class="custom-control-input tableCheckClass">
               <span class="checkedRow" data-checked="false"></span>
            </div>
         </td>
         <td style="text-align: left;">Adam Moore</td>
         <td style="text-align: left;">Contact Electrical Pty Ltd</td>
         <td style="text-align: left;">adam.moore@contactgroup.com.au</td>
         <td style="text-align: left;">$0</td>
      </tr>
      <tr>
         <td style="text-align: left;">
            <div class="custom-control custom-checkbox"><input type="checkbox" class="custom-control-input tableCheckClass">
               <span class="checkedRow" data-checked="false"></span>
            </div>
         </td>
         <td style="text-align: left;">Amanda McIntosh</td>
         <td style="text-align: left;">Rexel - Shepparton</td>
         <td style="text-align: left;">Amanda.McIntosh@rexel.com.au</td>
         <td style="text-align: left;">$0</td>
      </tr>
      <tr>
         <td style="text-align: left;">
            <div class="custom-control custom-checkbox"><input type="checkbox" class="custom-control-input tableCheckClass">
               <span class="checkedRow" data-checked="false"></span>
            </div>
         </td>
         <td style="text-align: left;">Andrew Barr</td>
         <td style="text-align: left;">Concept AV Australia Pty Ltd</td>
         <td style="text-align: left;">andrewb@conceptav.net.au</td>
         <td style="text-align: left;">$0</td>
      </tr>
      <tr>
         <td style="text-align: left;">
            <div class="custom-control custom-checkbox"><input type="checkbox" class="custom-control-input tableCheckClass">
               <span class="checkedRow" data-checked="false"></span>
            </div>
         </td>
         <td style="text-align: left;">Anthony Sottosanti</td>
         <td style="text-align: left;">Node Audio Visual Systems</td>
         <td style="text-align: left;">anthony.sottosanti@nodeav.com.au</td>
         <td style="text-align: left;">$0</td>
      </tr>
      <tr>
         <td style="text-align: left;">
            <div class="custom-control custom-checkbox"><input type="checkbox" class="custom-control-input tableCheckClass">
               <span class="checkedRow" data-checked="false"></span>
            </div>
         </td>
         <td style="text-align: left;">Brian Lawrence</td>
         <td style="text-align: left;">CAVS</td>
         <td style="text-align: left;">Brian.Lawrence@cavs.net.au</td>
         <td style="text-align: left;">$0</td>
      </tr>
      <tr>
         <td style="text-align: left;">
            <div class="custom-control custom-checkbox"><input type="checkbox" class="custom-control-input tableCheckClass">
               <span class="checkedRow" data-checked="false"></span>
            </div>
         </td>
         <td style="text-align: left;">Craig Deakin</td>
         <td style="text-align: left;">AV Media Systems VIC</td>
         <td style="text-align: left;">CraigD@avsystems.com.au</td>
         <td style="text-align: left;">$0</td>
      </tr>
      <tr>
         <td style="text-align: left;">
            <div class="custom-control custom-checkbox"><input type="checkbox" class="custom-control-input tableCheckClass">
               <span class="checkedRow" data-checked="false"></span>
            </div>
         </td>
         <td style="text-align: left;">Daniel Woodward</td>
         <td style="text-align: left;">Rutledge AV</td>
         <td style="text-align: left;">daniel.woodward@rutledge.com.au</td>
         <td style="text-align: left;">$0</td>
      </tr>
      <tr>
         <td style="text-align: left;">
            <div class="custom-control custom-checkbox"><input type="checkbox" class="custom-control-input tableCheckClass">
               <span class="checkedRow" data-checked="false"></span>
            </div>
         </td>
         <td style="text-align: left;">Dave</td>
         <td style="text-align: left;">Precision Industries Group</td>
         <td style="text-align: left;">dave@precisionindustries.com.au</td>
         <td style="text-align: left;">$0</td>
      </tr>
      <tr>
         <td style="text-align: left;">
            <div class="custom-control custom-checkbox"><input type="checkbox" class="custom-control-input tableCheckClass">
               <span class="checkedRow" data-checked="false"></span>
            </div>
         </td>
         <td style="text-align: left;">Donal O'Sullivan</td>
         <td style="text-align: left;">Clare Communications</td>
         <td style="text-align: left;">Donal@clarecom.com.au</td>
         <td style="text-align: left;">$0</td>
      </tr>
      <tr>
         <td style="text-align: left;">
            <div class="custom-control custom-checkbox"><input type="checkbox" class="custom-control-input tableCheckClass">
               <span class="checkedRow" data-checked="false"></span>
            </div>
         </td>
         <td style="text-align: left;">Doug Falloon</td>
         <td style="text-align: left;">Fredon Technology Pty Ltd</td>
         <td style="text-align: left;">dfalloon@fredon.com.au</td>
         <td style="text-align: left;">$0</td>
      </tr>
   </tbody>
   <!-- Table body -->
</table>

$('#tableCheckId').on('click', function(){
      // Check/uncheck all checkboxes in the table
      var rows = table.find('tr');
      $('input[type="checkbox"]', rows).prop('checked',this.checked);

(этот вопрос был опубликован ранее 4 года назад, но не имеет решения) предыдущая тема

1 Ответ

0 голосов
/ 18 марта 2019

Вот ваш код после внесения некоторых изменений, 

$(function(){
        $('#customerDataTable').DataTable();
        $('#tableCheckId').on('click', function(){
            $('input:checkbox').not(this).prop('checked', this.checked);
        })
    })
...