在我们之前讲述的课程中都是使用easyui的datagrid进行分页的。由于easyui的样式比较老旧，目前来说使用bootstrap作为后台管理系统的页面越来越多，那么下面我们就来看看如何使用bootstrap table进行分页操作。

首先我们先看看效果图：

看到了使用bootstrap table进行分页的效果图之后大家应该发现这个效果要比easyui好看很多。那么下面就来给大家讲解下如何使用bootstrap table。

第一步下载相应资源：地址：bootstrap table下载地址

第二步引用使用

1.引入 Bootstrap 库（假如你的项目还没有使用）和 bootstrap-table.css 到 head 标签下。

[HTML] 纯文本查看 复制代码

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-table.css">

2.引入 jQuery 库，bootstrap 库（假如你的项目还没有使用）和 bootstrap-table.js 到 head 标签下或者在 body 标签关闭之前（一般建议这么做）。

[HTML] 纯文本查看 复制代码

<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-table.js"></script>
<-- put your locale files after bootstrap-table.js -->
<script src="bootstrap-table-zh-CN.js"></script>

我们前台的处理很简单 只需要建立一个table并分配一个id

[HTML] 纯文本查看 复制代码

                <div class="col-sm-12">
                    <div class="example">
                        <table id="userTable">
                        </table>
                    </div>
                </div>

当然Bootstrap table还提供了一种简介的用法，直接在table标签里面定义类似“data-...”等相关属性，就不用再js里面注册了，但这种用法虽然简单，但不太灵活，所以咱们还是统一使用在js里面初始化的方式来使用table组件。
使用在js里面初始化的方式来使用table组件的写法:

[JavaScript] 纯文本查看 复制代码

        $('#userTable').bootstrapTable({
            url: '/admin/user/list',         //请求后台的URL（*）
            method: 'get',                      //请求方式（*）
            toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: false,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            queryParams: oTableInit.queryParams,//传递参数（*）
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber:1,                       //初始化加载第一页，默认第一页
            pageSize: 5,                       //每页的记录行数（*）
            pageList: [5,10,15,20],        //可供选择的每页的行数（*）
            search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            strictSearch: true,

            showColumns: true,                  //是否显示所有的列
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: false,                //是否启用点击选中行
//                height: 425,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "id",                     //每一行的唯一标识，一般为主键列
            showToggle:false,                    //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                   //是否显示父子表
            showExport: false,
            columns: [{

                checkbox: true,
                align: 'center',
                valign: 'middle'
            }, {
                field: 'username',
                title: '用户名'
            }, {
                field: 'phone',
                title: '电话'
            }, {
                field: 'sex',
                title: '性别',
                formatter:sexFormatter
            }, {
                field: 'remarks',
                title: '备注'
            },  {
                field: "id",
                title: "操作",
                formatter: actionFormatter,
                align: 'center',
                valign: 'middle'
            }]
        });

表格的初始化也很简单，定义相关的参数即可。上面一些重要的参数都加了注释，并且初始化Table必须的几个参数也用（*）做了标记，如果你的表格也有太多的页面需求，直接用必须的参数就能解决。同样，在columns参数里面其实也有很多的参数需要设置，比如列的排序，对齐，宽度等等。这些我觉得比较简单，不会涉及表格的功能，看看API就能搞定。
关于js详细属性的配置可以自己翻看api文档。

在这里我要强调下我所遇到的问题：
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
这个属性我们如果有很多数据那么使用前台分页势必会对我们的项目造成性能上的影响所以最好还是使用后台的分页。
使用后台的分页需要注意:返回的结果必须包含total、rows两个参数。漏写或错写都会导致表格无法显示数据。相反，如果是客户端分页，这里要返回一个集合对象到前端。
后台代码：

[Java] 纯文本查看 复制代码

 @RequestMapping("/list")
    @ResponseBody
    public  Map list(int limit, int offset, String search) {
        if(offset !=0){
            offset = offset/limit;
        }
        offset+= 1;
        EntityWrapper<User> ew=new EntityWrapper();
      
        ew.like("username",search).orderBy("id",false);
        Page<User> page = userService.selectPage(new Page<User>(offset, limit),ew);
        Map<String, Object> map = new HashMap();
        map.put("total", page.getTotal());
        map.put("rows",page.getRecords());
        return map;
    }

1.我们可以从方法的参数发现分页插件会给我们的后台传递这么几个参数：limit，offset，search
我们逐个来分析:
limit：每页查询的条数。
offset：查询的条数的偏移量。注意：这里offset不是页数我的后台需要传递一个页数去进行分页查询所以只能使用 (offset/limit)+1的方式来获取页数。
search：默认输入域中的值。
2.我们在 table的列（field）中使用了formatter这个属性。
（1）formatter:使用这个属性我们可以做一些简单的判断。
比如：

[JavaScript] 纯文本查看 复制代码

function sexFormatter(value, row, index) {
        if (value == 1)
            return "男";
    else if (value == 2)
        return "女";
    else
        return "未知";
}

进行了性别的判断 table获取的是1，2使用formatter进行了简单的替换。
（2）formatter:使用这个属性我们可以展示操作的按钮

[JavaScript] 纯文本查看 复制代码

function actionFormatter(value, row, index) {
    var state = row.state;
    var id = row.id;
    var res = '<button data-toggle="modal" class="btn btn-primary btn-xs" href="list.html#modal-form" data-row='+id+'>修改</button>';
    if (state == 1)
        res += ' <button type="button" class="btn btn-default btn-xs" >禁用</button>';
    else
        res += ' <button type="button" class="btn btn-info btn-xs" >启用</button>';
    res += ' <button type="button" class="btn btn-danger btn-xs">删除</button>';
    return res;
}

通过formatter将id传递可以实现单条数据的CRUD的操作。
3进行批量操作（比如批量删除）获取选中的id：

[JavaScript] 纯文本查看 复制代码

function getIdSelections() {
    return $.map($("#userTable").bootstrapTable('getSelections'), function(row) {
        //console.log("rowid=:"+ row.id)
        return row.id
    });
}

通过该方法就可以获取选中的id集合
进行批量删除的js如下：

[JavaScript] 纯文本查看 复制代码

    var users =  new Array()
    users =  getIdSelections();


    if(users.length <=0){
        layer.alert("请选择一条数据");
        return;
    }
    layer.confirm('您确定要删除' + users.length + '条数据', {
        btn: ['确定','取消'] //按钮
    }, function(){
        $.ajax({
            type: 'POST',
            url: "deleteBatch",
            data: {ids: users},
            traditional: true,//这里设置为true
            success: function (status) {
                if (status == 1) {
                    layer.msg('删除成功', {icon: 1});
                    $('#userTable').bootstrapTable('refresh', {url: '/admin/user/list'});
                }else {
                    layer.msg('删除失败', {icon: 1});
                }
            },
            dataType: "json"
        });
    }, function(){
        layer.msg('您已取消操作', {
            time: 1000, //20s后自动关闭
            btn: ['明白了', '知道了']
        });
    });

这样我们就可以实现用 bootstrap table 进行分页。

受教了，纯干货