Umair Ahmad

Umair Ahmad

  • 2.1k
  • 32
  • 334

Check All checkbox not working across the table pagination razer mvc

May 16 2022 12:49 PM

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.


Answers (2)