I am using dynatable(https://www.dynatable.com/) for displaying the data and I have checkbox column to select the rows like below
but when I change the page, the checkbox state changes to unchecked.
I am selecting all rows by checkbox in table header
HTML code
<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);(this question was posted earlier 4 years ago but it don't have a solution) previous thread
