bootStrap-table 后台分页超详解？

最近在学bootStrap ，学的我头都大了，刚刚解决了个bootStrap的table的组件，就想来分享下，方便自己日后查阅，也看能不能让你们学的轻松点。。

首先贴上官网的自夸：

BootStrap Table是基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。

不过倒也确实厉害，很好看！

接着贴出我弄的效果图：

是不是贼好看呢。。嘿嘿

接下来进入正题吧！！

注：本章只讲解 后台分页。

一、首先，你需要有bootStrap的环境：

<link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.css">
<link href="lib/bootstrap_table/bootstrap-table.css" rel="stylesheet" type="text/css">
<script src="lib/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
<script src="lib/bootstrap_table/bootstrap-table.js"></script>
<!-- 这个汉化包可选，但是必须在bootstrap-table.js后面哦 -->
<script src="lib/bootstrap_table/bootstrap-table-zh-CN.js"></script>

*哪里下载你们这么聪明我就不说啦，百度一下你就知道

二、在你的html的某处创建一个标签

<!--id可变的！！-->
<table id="table_server" ></table>

*这里，为了好看，我加了面板

<div class="panel panel-default">
<div class="panel-body">
<table id="table_server" ></table>
</div>
</div>

三、写js！！

下面直接贴出我的js代码

<script type="text/javascript">
$(function () {

    var t = $("#table_server").bootstrapTable({
        url: 'http://localhost:8080/uc/getUserSplit',
        method: 'get',
        dataType: "json",
        striped: true,//设置为 true 会有隔行变色效果
        undefinedText: "空",//当数据为 undefined 时显示的字符
        pagination: true, //分页
        // paginationLoop:true,//设置为 true 启用分页条无限循环的功能。
        showToggle: "true",//是否显示 切换试图（table/card）按钮
        showColumns: "true",//是否显示 内容列下拉框
        pageNumber: 1,//如果设置了分页，首页页码
        // showPaginationSwitch:true,//是否显示 数据条数选择框
        pageSize: 5,//如果设置了分页，页面数据条数
        pageList: [5, 10, 20, 40],	//如果设置了分页，设置可供选择的页面数据条数。设置为All 则显示所有记录。
        paginationPreText: '‹',//指定分页条中上一页按钮的图标或文字,这里是<
        paginationNextText: '›',//指定分页条中下一页按钮的图标或文字,这里是>
        // singleSelect: false,//设置True 将禁止多选
        search: false, //显示搜索框
        data_local: "zh-US",//表格汉化
        sidePagination: "server", //服务端处理分页
        queryParams: function (params) {//自定义参数，这里的参数是传给后台的，我这是是分页用的
            return {//这里的params是table提供的
                cp: params.offset,//从数据库第几条记录开始
                ps: params.limit//找多少条
            };
        },
        idField: "userId",//指定主键列
        columns: [
            {
                title: '#',//表的列名
                field: 'userId',//json数据中rows数组中的属性名
                align: 'center'//水平居中
            },
            {
                title: '账号',
                field: 'loginName',
                align: 'center'
            },
            {
                title: '真实姓名',
                field: 'realName',
                align: 'center'
            },
            {
                //EMAIL
                title: '邮箱',
                field: 'email',
                align: 'center'
            },
            {
                //部门名字
                title: '部门',
                field: 'dept.dname',//可以直接取到属性里面的属性，赞
                align: 'center'
            },
            {
                title: '状态',
                field: 'userStatus',
                align: 'center',
                formatter: function (value, row, index) {//自定义显示，这三个参数分别是：value该行的属性，row该行记录，index该行下标
                    return row.userStatus == 0 ? "正常" : row.userStatus == 1 ? "请假" : "离职";
                }

            },
            {
                title: '操作',
                field: 'userId',
                align: 'center',
                formatter: function (value, row, index) {//自定义显示可以写标签哦~
                    return '<a href="#" mce_href="#" οnclick="edit(\'' + row.userId + '\')">操作</a> ';
                }
            }

        ]
    });


    t.on('load-success.bs.table', function (data) {//table加载成功后的监听函数
        console.log("load success");
        $(".pull-right").css("display", "block");
    });

});
</script>

*以上部分注释来自bootstrap-table官方文档：点击打开链接

四、给出我的json数据格式：

{
    "page": 1,
    "rows": [
        {
            "dept": {
                "deptDesc": "",
                "deptno": 10,
                "dname": "销售部"
            },
            "loginName": "lisi",
            "loginPwd": "456",
            "realName": "李四",
            "userId": 3,
            "userStatus": "0"
        },
        {
            "dept": {
                "$ref": "$.rows[0].dept"
            },
            "loginName": "wangwu",
            "loginPwd": "789",
            "realName": "王五",
            "userId": 4,
            "userStatus": "0"
        },
        {
            "dept": {
                "$ref": "$.rows[0].dept"
            },
            "loginName": "zhaoliu",
            "loginPwd": "111",
            "realName": "赵六",
            "userId": 5,
            "userStatus": "0"
        },
        {
            "dept": {
                "deptno": 20,
                "dname": "华南区域"
            },
            "loginName": "fanqi",
            "loginPwd": "222",
            "realName": "范七",
            "userId": 6,
            "userStatus": "0"
        },
        {
            "dept": {
                "$ref": "$.rows[3].dept"
            },
            "loginName": "maoba",
            "loginPwd": "333",
            "realName": "毛八",
            "userId": 7,
            "userStatus": "0"
        }
    ],
    "total": 11
}

五、后台返回的数据的包装类

public class TableSplitResult<T> implements Serializable{

    private  Integer page;
    private Integer total;
    private T rows;


    public TableSplitResult() {
    }

    public TableSplitResult(Integer page, Integer total, T rows) {
        this.page = page;
        this.total = total;
        this.rows = rows;
    }

    public Integer getPage() {
        return page;
    }

    public void setPage(Integer page) {
        this.page = page;
    }

    public Integer getTotal() {
        return total;
    }

    public void setTotal(Integer total) {
        this.total = total;
    }

    public T getRows() {
        return rows;
    }

    public void setRows(T rows) {
        this.rows = rows;
    }
}

六、问题以及总结

1.不知道大家有没有发现并且疑惑那个js代码底部那个方法里面的

$(".pull-right").css("display", "block");

因为我配置完成并显示数据的时候数据是分页了，但是分页条一直没显示不出来审查元素后发现它的display竟然等于none！

这我当然不能忍啦，在各种属性尝试加上百度谷歌折腾了三个小时后，依旧百撕不得骑姐，只好出此下下策，在表格load完成后多分页对display属性改成block。。。

虽说过程很颠簸，但是看着这么好看的分页，还是蛮爽的。。哈哈哈

2.如果大家知道上面那个问题怎么解决，一定要告诉我啊！！

3。大家记得后台返回数据的时候要带上page和total属性啊！！

4.希望看官们不要吝啬赞美与批评哟

七、

谢谢观看，第一次写博客，可能写得不大好，但是还是希望对你有用。。