先放一個效果圖：

引用什麼js.Css檔案大家都知道，不清楚的可以看我的另一篇部落格bootStrap table簡單使用，直接放js,看重點吧!!!

js:

 //初始化Table
    oTableInit.Init = function () {
        $('#tb_formalJob').bootstrapTable({
            url: httpRequestUrl + '/adminEntArea/jobInfo/queryJobList',         //請求後臺的URL（*）
            ajaxOptions: {
                crossDomain: true,
                "headers": {
                    "content-type": "application/json",
                    "replayid": getRandomNumber(),
                },
                "xhrFields": {
                    "withCredentials": true
                },
            },
            method: 'post',                      //請求方式（*）
            // contentType: "application/x-www-form-urlencoded",
            // toolbar: '#toolbar',                //工具按鈕用哪個容器
            striped: true,                      //是否顯示行間隔色
            cache: false,                       //是否使用快取，預設為true，所以一般情況下需要設定一下這個屬性（*）
            pagination: true,                   //是否顯示分頁（*）
            sortOrder: "asc",                   //排序方式
            queryParamsType: '',
            paginationShowPageGo: true,
            showJumpto: true,
            pageNumber: 1, //初始化載入第一頁，預設第一頁
            
 
queryParams: queryParams,//請求伺服器時所傳的引數
            sidePagination: 'server',//指定伺服器端分頁
            pageSize: 1,//單頁記錄數
            pageList: [10, 20, 30, 40],//分頁步進值
            search: true, //是否顯示錶格搜尋，此搜尋是客戶端搜尋，不會進服務端，所以，個人感覺意義不大
            silent: true,
            showColumns: true,                  //是否顯示所有的列
            showRefresh: true,                  //是否顯示重新整理按鈕
            minimumCountColumns: 2,             //最少允許的列數
            uniqueId: "formalJobId",                     //每一行的唯一標識，一般為主鍵列
            columns: [{
                checkbox: true
            }, {
                field: 'jobName',
                title: '職位名稱',
                align: 'center',
            }, {
                field: 'releaseTime',
                title: '釋出時間',
                align: 'center'
            }, {
                field: 'expiredTime',
                title: '截至時間',
                align: 'center'
            }, {
                field: 'operation',
                title: '操作',
                align: 'center',
                events: operateEvents,//給按鈕註冊事件
                formatter: addFunctionAlty//表格中增加按鈕
            }],
 

 // 得到查詢的引數
    function queryParams(params) {
        var temp = {   //這裡的鍵的名字和控制器的變數名必須一直，這邊改動，控制器也需要改成一樣的
            pageNum: params.pageNumber,
            pageSize: params.pageSize,
            jobType: jobType,
            isExpired: isExpired
        };
        return temp;
    };

注意注意！！！！！！！！！！！！！！！！！！

後臺返回的資料格式一定得是這樣的！！！！不然沒法分頁

{

rows:data, //存放的是後臺返回的資料

total:total //存放的是總的資料條數

}