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="#" onclick="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.希望看官们不要吝啬赞美与批评哟

七、

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