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步的操做。