select all checkboxes in all pages

Question

I have created a table in ASP.NET MVC that includes checkboxes. You can see this table as table with checkboxes. I have implemented a script that allows the checkboxes to be automatically checked when the upper checkbox is selected. However, this functionality works only on page1 and does not work on other pages.
Is there any way to write code so that all checkbox are checked in all pages?
In my code, I have work it by challflag function.
Hears my code:

My code(The form):

<form>    
                <table class="gridtable" id="example">
                    <thead>
                        ...
                    </thead>
                    <tfoot>
                        <tr>
                            <th>
                                <input class="rowCheckbox" type="checkbox" id="selectAll" style="margin-right: 5px; width: auto;" value="@select" onchange="challflag(this)" />
                                <label for="selectAll" id="myDiv">انتخاب همه</label>
                            </th>
                           ....
                        </tr>
                    </tfoot>
                    <tbody>
                        @if (selectedCourseId != null)
                        {
                            foreach (var item in Model)
                            {
                                if (item.CourseNumber == select)
                                {
                                    <tr>
                                        <td class="d1">
                                            <input type="checkbox" class="rowCheckbox" name="@item.CourseNumber" value="@item.Id" @(item.RegisterSituation ? "checked" : "") onchange="chflag(this)" />
                                        </td>
                                        <td>@item.OstadName</td>
                                        <td>@item.OstadFamily</td>
                                        <td>@item.EmployName</td>
                                        <td>@item.AcademicRank</td>
                                        <td>@item.CollegeName</td>
                                    </tr>
                                }
                            }
                        }


                    </tbody>

                </table>
</form>

My script:

 <script>
     function challflag(checkbox) {
         var flag = checkbox.checked;
         var chcn = checkbox.value;

         // Check or uncheck all checkboxes in the DataTable
         $(checkbox).closest('table').find('input.rowCheckbox').prop('checked', flag);

         // Rest of your code

         $.ajax({
             url: "/Admin/OstadCourses/CheckboxAll",
             type: "POST",
             data: { chcn, flag },
             error: function () {
                 alert("Error!");
             }
         });
     }
 </script>

Other scripts:

 <script>
     $(document).ready(function () {
         $('#example').DataTable();
     });
 </script>
 <script src="~/Scripts/jquery.dataTables.min.js"></script>
 <script src="~/Scripts/jquery-3.7.0.js"></script>


 <script>
     new DataTable('#example', {
         initComplete: function () {
             this.api()
                 .columns()
                 .every(function (index) {
                     let column = this;
                     let title = column.footer().textContent;

                     if (index === 0) {
                         // Skip the first column (index 0)
                         return;
                     }

                     // Create input element
                     let input = document.createElement('input');
                     input.placeholder = title;
                     column.footer().replaceChildren(input);
                     input.addEventListener('keyup', () => {
                         if (column.search() !== input.value) {
                             column.search(input.value).draw();
                         }
                     });
                 });
         }
     });
 </script>

Answer 1

You are using DataTables to display a table with checkboxes, and you have implemented a script to check/uncheck all checkboxes on the current page when a master checkbox is clicked if I am Right !?

For checking/unchecking all checkboxes on all pages, you need to handle this on the server side and when the master/main/parent checkbox is clicked, you should send an AJAX request to the server to update the status of all checkboxes

I tried to modify your code

function challflag(checkbox) {
    var flag = checkbox.checked;
    var chcn = checkbox.value;

    // Sending an AJAX request to the server to update checkbox status
    $.ajax({
        url: "/Admin/OstadCourses/CheckboxAll",
        type: "POST",
        data: { chcn: chcn, flag: flag },
        success: function () {
            $(checkbox).closest('table').find('input.rowCheckbox').prop('checked', flag);
        },
        error: function () {
            alert("Error!");
        }
    });
}

Note: in your controller, handle AJAX request and update the status of all checkboxes and you need to iterate through all the items on all pages and update their checkbox status.