I have implemented a checkall checkbox for the table but the table has pagination and DOM only gets the elements currently showing on the page. my implementation is not working on other paginations. how can we achieve this task?
.cshtml code
<table id="instruments" class="table table-bordered table-striped table-condensed table-hover smart-form has-tickbox" style="width: 100%;"> <thead> <tr> <th> <input id="chkAffectCheckboxGroup" type="checkbox" /> </th> <th data-class="expand" style="white-space: nowrap">@Model.idResource</th> <th data-hide="phone" style="white-space: nowrap">@Model.SResource</th> <th data-hide="phone" style="white-space: nowrap">@Model.LocationResource</th> </tr> </thead> <tbody> @for (int i = 0; i < Model.Instruments.Count; i++) { var values = Model.Instruments[i].Value.Split('~'); var status = values.Length > 0 ? values[0] : ""; var location = values.Length > 1 ? values[1] : ""; <tr> <td> <label class="checkbox"> @Html.CheckBoxFor(m => m.Instruments[i].Selected, new { @class = "chkInst" }) <i></i> </label> </td> <td><label>@Model.Instruments[i].Text</label></td> <td><label>@status</label></td> <td><label>@location</label></td> </tr> } </tbody> </table>
Jquery Code
$(document).ready( console.log("jquery called"), manageCheckboxGroup('chkAffectCheckboxGroup', 'chkInst') );
JavaScript Code
function manageCheckboxGroup(masterCheckboxId, slaveCheckboxesClass) { $("#" + masterCheckboxId).click(function () { $("." + slaveCheckboxesClass).prop('checked', this.checked); }); $("." + slaveCheckboxesClass).click(function () { if (!this.checked) { $("#" + masterCheckboxId).prop('checked', false); } else if ($("." + slaveCheckboxesClass).length == $("." + slaveCheckboxesClass + ":checked").length) { $("#" + masterCheckboxId).prop('checked', true); } });
I would like if i select checkboxall checked it will show checked in all the pages across pagination. if i move from page 1 to page 2 in table the checkbox will be selected. there are 10 rows in each table and the implementation above only give me 10 selected for the shown page not the other pages.