Bootstrap table using 'checkAll' method only checks the checkboxes in the current page

Question

I have a bootstrap table in my HTML5 page.

When using $('#bk-table').bootstrapTable('checkAll')

Only the checkboxes in current page r checked.

How could I check all the checkboxes in all page?

My bootstrap table:

 <form>
        {% csrf_token %}
        <table  contenteditable='true' class="table table-bordered table-xl" width="100%"  cellspacing="0" style="font-size: 1.0rem;"
                id="bk-table"
                data-toggle="table"
                data-toolbar="#toolbar"
                data-cookie="true"
                data-cookie-id-table="materialId"
                data-show-columns="true"           
                data-show-export="true"           
                data-height="1650"
                data-click-to-select="true"
                data-id-field="id"
                data-show-footer="true"
                data-url="/api/materials/"
                data-query-params="queryParams"
                data-remember-order="true"
                data-pagination="true"
                data-side-pagination="client"
                data-total-field="count"
                data-data-field="results">
          
            <thead class="thead-dark" >

            <tr contenteditable='true'>
                <th data-field="state" name="checkbox" class="data-checkbox"  id="data-checkbox"  data-checkbox="true" ></th>
                <th class ='courseCode' data-field="courseCode"  data-formatter="renderCourse">Course Code</th>

            </tr>
            </thead>
        </table>
    </form>

My button event:

    <button class="button" type="button" onclick="select_all();">Select All</button>
<script>
            function select_all()
            {           
                $('#bk-table').bootstrapTable('checkAll')
            }
</script>

Answer 1

bootstrapTable('checkAll') is for Check/Uncheck all current page rows. For selecting all the pages, first you load data let data = $("#bk-table").bootstrapTable('getData'); and iterate though data object & update the id field state (because data-field="state" for check box) value to true in the object array data then you reload table with your updated data $('#bk-table').bootstrapTable('load', data);

Please find sample updated data object array:

 data = [{"id":1,"courseCode":"Item 1","state":true},{"id":2,"courseCode":"Item 2","state":true},{"id":3,"courseCode":"Item 3","state":true}];

function select_all()
            {           
                let data = $("#bk-table").bootstrapTable('getData');  //getting table data
                for(let i=0;i<data.length;i++){
                           data[i]['state'] = true;
                }
                $('#bk-table').bootstrapTable('load', data); //reloading table data after updation
            }

<button class="button" type="button" onclick="select_all();">Select All</button>

up votes will be appreciated!