首先该方法除了需要引入bootstrap库和bootstrap-table外,还需要引入一个工具库js:lodash.js    点我

使用时在jquery.min.js、bootstrap.min.js、bootstrap-table.js之后引入 lodash.js

html

<table id="dataShow"></table>

  

#定义一个数组:勾选的结果保留在selections数组中
var selections = [];
$(function () {
     # 注意:该函数定义在jquery初始化里面
$("#dataShow").on('check.bs.table check-all.bs.table ' +
'uncheck.bs.table uncheck-all.bs.table', function (e, rows) {
var ids = $.map(!$.isArray(rows) ? [rows] : rows, function (row) {
return row.managerInfoId;//注意这里的row.id 中的id指的是列表的主键,替换成你使用的就行了比如 managerInfoId等
}),
func = $.inArray(e.type, ['check', 'check-all']) > - ? 'union' : 'difference';
selections = _[func](selections, ids);
});
}); function responseHandler(res) {
$.each(res.rows, function (i, row) {
# 注意这里的row.id 中的id指的是列表的主键,替换成你使用的就行了比如 managerInfoId
# 注意这里的row.state中的state指的是表格中checkbox那一列定义的filed,替换成你使用的就行了比如 state等
          row.state = $.inArray(row.managerInfoId, selections) !== -;
});
return res;
}

主要代码就上面那些,以下是bootstrap-table初始化代码

var TableInit = function () {
var oTableInit = new Object();
oTableInit.Init = function () {
$("#dataShow").bootstrapTable({
url: "<%=path%>/oa/workTime/getManagerList",
method: 'post', //请求方式(*)
striped: true, //是否显示行间隔色
contentType: 'application/x-www-form-urlencoded',
cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
pagination: true, //是否显示分页(*)
maintainSelected: true,
sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)
pageNumber: , //初始化加载第一页,默认第一页,并记录
pageSize: , //每页的记录行数(*)
pageList: [, , , ], //可供选择的每页的行数(*)
queryParams: oTableInit.queryParams,
responseHandler: responseHandler, columns: [{
field: 'state',
checkbox: true
}, {
field: 'managerInfoId',
visible: false

我只是简略的贴了出来,注意标红处跟上面代码的关系

bootstrap-table api:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

bootstrap-table 切换页码保留勾选的checkbox的更多相关文章

  1. element table切换分页不勾选的自带方法

    场景一:没有回显勾选的情况 table表格加row-key标识选中行唯一标识,多选框加reserve-selection设置为true <template> <el-table v- ...

  2. layui table 分页 记住之前勾选的数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. vue ele table表格 设置只能勾选一个

    table 更改属性设置: <el-table ref="multipleTable" :data="tableData" tooltip-effect= ...

  4. Jquery-获取勾选的checkbox的同级节点数量

    // 获取勾选的标签值得上一个兄弟节点 var groups = []; $('input[name="group_name"]:checked').siblings(" ...

  5. element ui中表格table翻页记忆勾选状态

    <el-table ref="multipleTable" :data="datalist" style="width:100%" @ ...

  6. <c:forEach>循环列表,获取勾选的checkbox中某个<td>的值

    <table> <!--列表表头 开始 --> <tr> <th><input type="checkbox" name=&q ...

  7. bootstrap table保留多选框的分页

    有时候需要完成这种情况: 1.需要设置的是如果第一页点击复选框然后点击其他页面的话,第一页的选项被保存了 2.将所有选择好的复选款的数据保存在数组中 bootstrap table官方文档http:/ ...

  8. Bootstrap, 模态框实现值传递,自动勾选

    目录 Bootstrap,模态框自动勾选,值传递 1.父页面 2. 子页面(modal) 模态框 Bootstrap,模态框自动勾选,值传递 场景: ​ 有一个这样的需求, 在父页面有一个table, ...

  9. 轻量级表格插件Bootstrap Table。拥有强大的支持固定表头、单/复选、排序、分页、搜索及自定义表头等功能。

    Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据,支持单选,复选框,排序,分页,显示/隐藏列,固定标题滚动表,响应式设计,Ajax加载JSON数据,点击排序的列,卡片视图等. ...

随机推荐

  1. centos7下yum升级被PackageKit锁定

    新安装centos7后,第一次升级出现下面的错误: Another app is currently holding the yum lock; waiting for it to exit... 另 ...

  2. SPA (单页应用程序)

    单页Web应用 编辑 单页Web应用(single page web application,SPA),就是只有一张Web页面的应用.单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程 ...

  3. http协议与url简介(转)

    一 知识简介 HTTP:(Hypertext transfer protocol)超文本传输协议,是用于从万维网(WWW:World Wide Web)服务器传输超文本到本地浏览器的传送协议. URL ...

  4. ajax用beforeSend自定义请求过程中客户端事件,提高用户体验

    本文为博主原创,未经允许不得转载: 在应用ajax的过程中,当我们再前台提交请求的时候,如果服务端响应事件比较长,就会导致需要等很长时间在前台才能接受到服务端返回的 响应结果,往往会导致用户重复点击按 ...

  5. LA 4287 等价性证明(强连通分量缩点)

    https://vjudge.net/problem/UVALive-4287 题意: 给出n个结点m条边的有向图,要求加尽量少的边,使得新图强连通. 思路:强连通分量缩点,然后统计缩点后的图的每个结 ...

  6. UVa 242 邮票和信封(完全背包)

    https://vjudge.net/problem/UVA-242 题意: 输入s(每个信封能粘贴的最多邮票数量)和若干邮票组合,选出最大连续邮资最大的一个组合(最大连续邮资也就是用s张以内的邮票来 ...

  7. (02) 任务(Jobs)和触发器(Triggers)

    Quart 的 API Quartz API 中的关键接口和类如下: IScheduler-与调度器(scheduler)进行交互的主要 API: IJob-被组件继承和实现,由调度器来执行的接口: ...

  8. python ros 订阅robot_pose获取机器人位置

    #!/usr/bin/env python import rospy import tf from tf.transformations import * from std_msgs.msg impo ...

  9. 【转】cs231n学习笔记-CNN-目标检测、定位、分割

    原文链接:http://blog.csdn.net/myarrow/article/details/51878004 1. 基本概念 1)CNN:Convolutional Neural Networ ...

  10. cygwin install git

    Installation with Cygwin If you're comfortable with Cygwin, then use it to install git, ssh, wget an ...