最近在學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;
    }
}

六、問題以及總結

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

七、