Tengo una tabla de arranque en mi página HTML5.
Al usar $('#bk-table').bootstrapTable('checkAll')
Solo las casillas de verificación en la página actual están marcadas.
¿Cómo podría marcar todas las casillas de verificación en todas las páginas?
Mi tabla de arranque:
<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>Mi evento de botón:
<button class="button" type="button" onclick="select_all();">Select All</button> <script> function select_all() { $('#bk-table').bootstrapTable('checkAll') } </script>bootstrapTable('checkAll') es para marcar/desmarcar todas las filas de la página actual. Para seleccionar todas las páginas, primero carga los datos let data = $("#bk-table").bootstrapTable('getData'); e itere a través del objeto de datos y actualice el state del campo de identificación (porque el valor data-field="state" para la casilla de verificación) sea true en los datos de la matriz de objetos y luego vuelva a cargar la tabla con sus datos actualizados $('#bk-table').bootstrapTable('load', data);
Encuentre una matriz de objetos de datos actualizados de muestra:
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>se agradecerán los votos!