jquery - 是否可以将复选框与 dynatable 一起使用？

Question

我正在使用 dynatable（https://www.dynatable.com/）来显示数据，并且我有复选框列来选择如下所示的行

但是当我更改页面时，复选框状态更改为未选中。

我通过表头中的复选框选择所有行

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 年前发布的，但它没有解决方案） 以前的线程

Answer 1

这是您进行一些更改后的代码，

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