bootstrap table 多选框分页保留示例代码

在使用bootstrap table的复选框功能的时候，由于采用服务端分页，当在第一页选择了某些数据，然后点击第二页选择一些数据，再次点回第一页，发现原先选择的数据已经清空了，原来的多选框并不支持翻页保留多选数据。

解决思路：

在分页的时候，吧原先选择的数据用一个全局变量保存，当再次翻页回来时，判断当前页数据是否存在于保存的数据数组中，存在则状态为选择。当然当取消选择的时候也要去删除数组中相应的数据。

为了解决这个问题，在查github上查文档发现有人提出了这个问题，并且作者wenzhixin 也编写了相应的例子来演示，想看原问题的点击打开链接。

想直接看示例的点击打开链接

原示例是使用html方式来实现的表格，并使用服务端分页。并且相关js方法并不完善，我也踩了很多坑，所以本博客在原作者编写的示例的基础上，做了相关更改，在此展示和说明：

var $table; 
var selectionIds = []; //保存选中ids 
$(function () { 
 $table = $("#example1").bootstrapTable({ 
 contentType:"application/x-www-form-urlencoded; charset=UTF-8", //初始化编码 
 url:'<%=basePath%>/order/queryOrderList', 
 method: 'post', 
 striped:true,  //奇偶行渐色表 
 pagination:true, //显示分页 
 clickToSelect:true, //是否选中 
 maintainSelected:true, 
 sidePagination: "server", //服务端分页 
 idField:"id", 
 pageSize: 10, 
 responseHandler:responseHandler, //在渲染页面数据之前执行的方法，此配置很重要!!!!!!! 
 columns: [ 
  {field: 'checkStatus',checkbox: true}, //给多选框赋一个field值为“checkStatus”用于更改选择状态!!!!! 
  {field: 'id',visible:false}, 
  {field: 'orderNumber',title: "订单编号",align:'center',width:'10%'} 
 ] 
 }); 
 //选中事件操作数组 
 var union = function(array,ids){ 
 $.each(ids, function (i, id) { 
  if($.inArray(id,array)==-1){ 
  array[array.length] = id; 
  } 
  }); 
  return array; 
 }; 
 //取消选中事件操作数组 
 var difference = function(array,ids){ 
  $.each(ids, function (i, id) { 
   var index = $.inArray(id,array); 
   if(index!=-1){ 
   array.splice(index, 1); 
   } 
  }); 
  return array; 
 }; 
 var _ = {"union":union,"difference":difference}; 
 //绑定选中事件、取消事件、全部选中、全部取消 
 $table.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.id; 
  }); 
  func = $.inArray(e.type, ['check', 'check-all']) > -1 ? 'union' : 'difference'; 
  selectionIds = _[func](selectionIds, ids); 
 }); 
}); 
 //表格分页之前处理多选框数据 
 function responseHandler(res) { 
  $.each(res.rows, function (i, row) { 
  row.checkStatus = $.inArray(row.id, selectionIds) != -1; //判断当前行的数据id是否存在与选中的数组，存在则将多选框状态变为true 
  }); 
  return res; 
 } 

 原示例中并没有给出union和difference方法，是我自己按着思路实现的。开始并没有实现此功能，后来发现要给checkbox字段加上一个filed字段，并与responseHandler方法中更改的row字段一致，才能实现功能。

以上所述是小编给大家介绍的bootstrap table 多选框分页保留示例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# bootstrap  # 多选框  # table  # Angularjs+bootstrap+table多选（全选）支持单击行选中实现编辑、删除功能  # bootstrap table之通用方法（ 时间控件  # 导出  # 动态下拉框  # 表单验证  # 选中与获取信息）代码分享  # bootstrap制作jsp页面（根据值让table显示选中）  # BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选  # 分页  # 多选  # 服务端  # 在此  # 第一页  # 翻页  # 小编  # 是否存在  # 组中  # 我也  # 基础上  # 这个问题  # 要去  # 提出了  # 给大家  # 很重要  # 写了  # 想看  # 要给  # 并与 

相关文章： 如何通过远程VPS快速搭建个人网站？  建站中国必看指南：CMS建站系统+手机网站搭建核心技巧解析  如何通过虚拟机搭建网站？详细步骤解析  如何通过虚拟主机快速完成网站搭建？  建站一年半SEO优化实战指南：核心词挖掘与长尾流量提升策略  如何配置支付宝与微信支付功能？  建站主机选购指南与交易推荐：核心配置解析  如何选择高效可靠的多用户建站源码资源？  建站VPS配置与SEO优化指南：关键词排名提升策略  宝塔新建站点报错如何解决？  学生网站制作软件,一个12岁的学生写小说，应该去什么样的网站？  建站之星免费版是否永久可用？  建站主机空间推荐 高性价比配置与快速部署方案解析  Dapper的Execute方法的返回值是什么意思 Dapper Execute返回值详解  如何快速搭建二级域名独立网站？  网页设计与网站制作内容,怎样注册网站？  建站之星免费模板：自助建站系统与智能响应式一键生成  如何获取PHP WAP自助建站系统源码？  如何高效利用200m空间完成建站？  如何撰写建站申请书？关键要点有哪些？  如何在阿里云香港服务器快速搭建网站？  制作网站公司那家好,网络公司是做什么的？  购物网站制作费用多少,开办网上购物网站，需要办理哪些手续？  黑客如何通过漏洞一步步攻陷网站服务器？  网站制作员失业,怎样查看自己网站的注册者？  清除minerd进程的简单方法  制作销售网站教学视频,销售网站有哪些？  Python路径拼接规范_跨平台处理说明【指导】  攀枝花网站建设,攀枝花营业执照网上怎么年审？  简单实现Android文件上传  广州网站设计制作一条龙,广州巨网网络科技有限公司是干什么的？  网站广告牌制作方法,街上的广告牌，横幅，用PS还是其他软件做的？  如何在阿里云虚拟主机上快速搭建个人网站？  官网自助建站平台指南：在线制作、快速建站与模板选择全解析  如何用搬瓦工VPS快速搭建个人网站？  威客平台建站流程解析：高效搭建教程与设计优化方案  头像制作网站在线观看,除了站酷，还有哪些比较好的设计网站？  如何选择美橙互联多站合一建站方案？  北京网站制作的公司有哪些,北京白云观官方网站？  官网网站制作腾讯审核要多久,联想路由器newifi官网  教育培训网站制作流程,请问edu教育网站的域名怎么申请？  宠物网站制作html代码,有没有专门介绍宠物如何养的网站啊？  建站之星安装后界面空白如何解决？  番禺网站制作公司哪家值得合作,番禺图书馆新馆开放了吗？  动图在线制作网站有哪些,滑动动图图集怎么做？  如何在VPS电脑上快速搭建网站？  Python如何创建带属性的XML节点  如何用免费手机建站系统零基础打造专业网站？  大连 网站制作,大连天途有线官网？  logo在线制作免费网站在线制作好吗,DW网页制作时，如何在网页标题前加上logo？