bootstrap table對js前端獲取的數據進行分頁

前期：data數據是js前端獲取：好比一個在前端寫死的數據，並非經過bootstrap的url來獲取。對這樣的數據進行分頁。

1，引入bootstrap-table.js

2，設置bootstrapTable的初始化及設定，好比有哪些方法，標題名稱是哪些

$("#monitorConfigThread").bootstrapTable({
            clickToSelect:true,
            locale:'zh-CN',//中文支持
            pagination: true,//是否開啓分頁（*）
            pageNumber:1,//初始化加載第一頁，默認第一頁
            pageSize: 10,//每頁的記錄行數（*）
            pageList: [],//可供選擇的每頁的行數（*）
            sidePagination: "server", //分頁方式：client客戶端分頁，server服務端分頁（*）
            //onPageChange是bootstrapTable中的方法：當點擊table頁碼的時候，觸發此事件
            onPageChange:function(number,size){
              if(searchItem){//點擊跳頁時判斷，知足條件執行function1
                  function1(number);//將頁碼數傳遞給function1
              }else{
                  function2(number);
              }
                
            },
            columns:[
                      {
                         title:'監控名稱',
                         field:'name',
                         align: 'center',
                         valign: 'middle'
                      },{
                        title:'操做',
                        field:'operate',//operate是必須的，這樣點擊e或d的時候纔會執行event方法
                        align: 'center',
                        valign: 'middle',
                        formatter: function(){  
                        var e = '<span class="editThis" style="cursor:pointer;"></span>;'  
                        var d ='<span class="removeThis" style="cursor:pointer;"></span> ';  
                          return e+d; 
                          },
                        events:{//bootstrapTable方法，給class或者是id綁定事件
                          //給editThis綁定點擊事件，點擊時觸發editItemList
方法並穿參數r。events固定有4個參數，r中包含editaThis所在行的內容
                          'click .editThis':function(e,v,r,i){  
                                editItemList(r);                            
                            },
                            'click .removeThis':function(e,v,r,i){
                                removeItemList(r);
                                $("#removeModal").css('background','none');
                            }
                          }

                    ]

3，整理數據date的格式，而後給bootstrapTable傳值

//data的格式以下，是一個對象，必須包含total總頁數，和rows全部行的內容
//rows要是數組格式，total是數字
               var data={            
                          "total":response.page.total,
                          "rows":response.content
                      }
//將data的值傳遞給bootstrapTable生成表格,load在每次從新傳入data的時候，會自動刷新表格數據，
//我的以爲比refresh好用
$("#monitorConfigThread").bootstrapTable('load',data);

4，以上就是所有，包含分頁。一般onPageChange事件,events事件,formatter事件，load方法能知足絕大是的需求。事實上我之前遇到過用refreshOptions加載不出來表格的狀況：

$("#monitorConfigThread").bootstrapTable('refteshOptions',function（）{

       data:data,

      columns:[....]，

    //這裏面沒有ajax

});

加上refreshOptions以後表格就出不來，去掉refreshOptions後就能夠出來表格，然而個人data不是固定不變的，因此必需要有表格刷新。後來發現了table的表格必須先要初始化才行，就像第2步的操做。