Bootstrap表格插件Bootstrap Table配置教程

bootstrap table分页时保持选择状态,非常有用的功能

设置maintainSelected为true可以保持选中状态,当用户点击下一页然后再次返回上一页时还可以保持选中状态,不管是客户端分页还是服务器端分页都支持该属性。非常实用的功能,实际应用中通常需要在好几个分页中来回查找需要删除或者审核的数据,有了这个属性就不用一页一页的来回切换了。

// 保持选择状态
var columns = [{
            field :"checked",  // 1,设置选择列 *************
            title: '编号', 
            checkbox:true
        }, {
            field: 'ProductName',
            title: '产品名称'
        }, {
            field: 'StockNum',
            title: 'Item 库存'
 }];


$('#table').bootstrapTable({
        url: '/package/bootstrap-table-1.14.1/data.json',
        pagination: true,//2,开启分页 *************
        search: true, //开启刷选
        columns: columns,
        pageSize:2,  
        maintainSelected :true, //3,开启分页保持选择状态,就是用户点击下一页再次返回上一页
        toolbar:"#toolbar"
    });
  //获取选中行来检测是否保持了状态
  function getSels()
  {
    var rows = $('#table').bootstrapTable('getSelections');
    alert(JSON.stringify(rows));
  }

在线试一试

文章目录
快速入门 bootstrap table方法 bootstrap table事件 bootstrap table下载 基础配置 row Attributes设置行属性 custom Sort自定义排序 table Cache缓存数据 content Type设置 response Handler total/Data Field JSON格式 escape显示html标签 idField和selectItemName cardView卡片视图模式 detailView详情视图模式 icons图标相关设置 本地化中文设置 列相关设置 columns基础设置 sortable列排序 column选择操作列 column列属性列表 分页设置 bootstrap table服务端分页 table Method 方式设置 data Type数据格式 custom AJAX 自定义ajax bootstrap table前端分页 bootstrap table查询搜索 smartDisplay作用 分页时保持选择状态 工具栏相关 showHeader显示头部 showFooter显示底部 showColumns开启列刷选 showPaginationSwitch分页 showRefresh刷选按钮 showFullscreen toolbar工具栏设置 样式设置 固定表头并美化表头 设置表格样式隔行变色 rowStyle设置行样式 theadClasses设置表头样式 footerStyle底部样式