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>
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!