我最近也是剛剛開始寫部落格，目的就是記錄給自己看的。

bootstrap-table 分頁 無意是挺煩的。

網上也有，但是不是那麼簡單。其實我就是一個新人。我也看不懂他們寫的。

<table data-toggle="table" data-mobile-responsive="true"
data-row-style="rowStyle" data-show-columns="true"
class="table table-hover" id="customerlist">

</table>

上面是html 的程式碼 就是一些設定的樣式 屬性什麼的（具體我也不是很懂）

就是這個樣子 。（先給你們看一下，大概什麼樣子）

//分頁查詢
//這個就是ajax (bootstrap-table自帶的方法)這裡 有幾點要講

function queryAlarmPage(){
$('#customerlist').bootstrapTable('destroy');//這是一個銷燬方法防止呼叫的時候重複載入（你也可以去掉這句話）
$('#customerlist').bootstrapTable({

//columns 就是th （就是table thead tr th 你不懂我就是真沒有辦法了）
   columns: [{
   field: 'CustomerName',  //field這個是你資料庫裡的欄位！（如果不管的話，可能是你實體類對應的別的名字）
   title: '客戶姓名',

//title 就是標題（th）
   align:'center',

//align:'center' 是居中顯示（可以讓每一列都居中，可以去掉）
   sortable: true

//sortable:true 就是排序
   }, {
field: 'SystemId',
       title: '系統編號',
       align:'center',
       sortable: true
   }, {
       field: 'AlarmContent',
       title: '報警資訊',
       align:'center',
       sortable: true
   }, {

//不懂無所謂，queryParamsType:'limit', 我們寫上這句話就行了。別想太多。看到後面你就懂了。
   queryParams: function (params) {

//請求伺服器資料時，你可以通過重寫引數的方式新增一些額外的引數，例如 toolbar 中的引數 如果 queryParamsType = 'limit' ,返回引數必須包含
limit, offset, search, sort, order 否則, 需要包含: 
pageSize, pageNumber, searchText, sortName, sortOrder. 
返回false將會終止請求

//上面是官方的說明。其實我覺得就是你後臺往回傳的時候setAttr("":)引號裡寫上pageSize, pageNumber, searchText, sortName, sortOrder.就行。我個人覺得是這樣。（我暫時還沒有用到。）
       return {//return 就是把資料往controller後臺控制器傳值
           pageSize: params.limit,//分頁必須寫的兩個引數pageSize，rowoffset，名字你可以自己定義。這個pageSize每頁顯示的條數，rowoffset每一頁的第一條資料的索引（下標）
           rowoffset:params.offset

       }

//function(params){}就相當於ajax裡的success：function(obj){}的方法 params就是obj。

obj呢就是後臺傳的啊！！也有人喜歡用list,msg傳其實就是個名字。（後臺傳什麼隨便你）function(params) params和後臺傳的那個名字不對應也行！反正都一樣。（最好名字一樣。）

//怕你們不懂我截圖給你們看一下pageSize和rowoffset的值

第一頁的值（上）pageSize=10&rowoffset=0

第二頁的值（上）pageSize=10&rowoffset=10

你能大概懂了吧//不懂再多看看，多想想

   },
   url: './alarm/queryPage'  //url 就是你後臺的controller裡的方法路徑 和ajax的url一樣！
});
}

//心好累由於 寫的比較多。不方便喜歡複製的同學，複製。（下面簡潔可複製）我也喜歡複製。

//分頁查詢
function queryAlarmPage(){
$('#customerlist').bootstrapTable('destroy');
$('#customerlist').bootstrapTable({
   columns: [{
    field: 'CustomerName',
    title: '客戶姓名',
    align:'center',
    sortable: true
   }, {
    field: 'SystemId',
       title: '系統編號',
       align:'center',
       sortable: true
   }, {
       field: 'AlarmContent',
       title: '報警資訊',
       align:'center',
       sortable: true
   }, {
    field: 'AlarmTime',
       title: '報警時間',
       align:'center',
       sortable: true
   },{
    field: 'DevIp',
       title: 'IP地址',
       align:'center',
       sortable: true
   },{
    field: 'Remark',
       title: '報警詳情',
       align:'center',
       sortable: true
   }],
   sortName: 'AlarmId',
   sortOrder: 'asc',
   pagination: true, //分頁
   sidePagination: 'server',
   pageNumber:1,
   pageSize:10,
   pageList: [10 , 20, 50, 100],
   showColumns:false,
   search: false,
   queryParamsType:'limit',
   queryParams: function (params) {
       return {
           pageSize: params.limit,
           rowoffset:params.offset
       }
   },
   url: './alarm/queryPage'
});
}

//前臺就這樣了

//後臺

//我用的是JFinal框架開發的，雖然不會有不同，但是應該能比較好懂。

//Controller分頁查詢的方法
public void queryPage(){
//pageSize是10 20 30 50 分頁頁面顯示的條數之前也是講過
//rowoffset 是每一頁的第一條資料的索引（下標）（不懂看上面的兩個比較圖）
String pagesize=this.getPara("pageSize");

//getPara("pageSize")就是jFinal封裝的getparameter()方法
//getPara("pageSize")裡的pageSize 就是上面傳的引數，return方法（return{ pageSize:params.limit, rowoffset:params.offset}）

int offset = Integer.valueOf(this.getPara("rowoffset"));
    int size = (offset/Integer.valueOf(pagesize))+1;

//之前也是看過了rowoffset的值，我們要做處理，（每頁的第一條資料索引/頁數）+1=頁數

    String pagenum = String.valueOf(size);
   
//得出表資料一共多少條數（總共的條數）
    List<Alarm> num = Alarm.dao.queryAlarmList();

    //System.out.println(num.size());

//num.size()是得到list裡面有多少條資料
   
Page<Alarm> obj=Alarm.dao.queryPage(pagenum, pagesize);

//jFinal 有一個寫好（封裝好的）的Page類//這個也不重要。
if(obj==null){
this.setAttr("state", "FAILED");
this.setAttr("msg", "載入Alarm表格資料失敗！");
this.renderJson();
return;
}else{
this.setAttr("total",num.size());//設定返回資料"total",必須是total這個名字！！（我覺得是這樣必須是這個名字），因為total是總共的條數！看下面圖的藍色框！
this.setAttr("rows", obj.getList());//"rows"也是必須是這個名字不能改！！（我覺得是這樣必須是的，我之前不是這個名字反正錯了！！！）
this.renderJson();//返回json資料給前臺
return;
}

}

紅色框！！假如你的資料比較少就一頁，就不會有（就是沒有）分頁欄。就是紅色框哦。

黑色框就是 pageList: [10 , 20, 50, 100],前臺設定的！pageList引數我設定了4個值（10,20,50,100）但是隻顯示了10,20 的資料。因為 資料少！！這個和資料的多少有關係！！

再說幾點1.total，和rows 必須是這個名字 total是總條數，rows則是你的所有的資料！！

2.obj.getList()是我有這個方法，可能你沒有這個方法！！你得自己想方法得到list 的所有的資料！

好了最重要的一點來了！！！！

就是controller的資料格式！！！!

就是後臺傳的兩個引數total,rows

total,裝的是總條數，rows裝的是所有資料。

controller原始碼

//分頁查詢
public void queryPage(){
    String pagesize=this.getPara("pageSize");
    int offset = Integer.valueOf(this.getPara("rowoffset"));
    int size = (offset/Integer.valueOf(pagesize))+1;
    String pagenum = String.valueOf(size);
    List<Alarm> num = Alarm.dao.queryAlarmList();
    //System.out.println(num.size());
    
    Page<Alarm> obj=Alarm.dao.queryPage(pagenum, pagesize);
    if(obj==null){
        this.setAttr("state", "FAILED");
        this.setAttr("msg", "載入Alarm表格資料失敗！");
        this.renderJson();
        return;
    }else{
        this.setAttr("total",num.size());
        this.setAttr("rows", obj.getList());
        this.renderJson();
        return;
    }

}

好了end....