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));
  }

在线试一试