bootstrap table对js前端获取的数据进行分页
bootstrap table对js前端获取的数据进行分页
苏苏不是玛丽苏 发表于5个月前
bootstrap table对js前端获取的数据进行分页
  • 发表于 5个月前
  • 阅读 8
  • 收藏 0
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

前期: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步的操作。

共有 人打赏支持
粉丝 0
博文 20
码字总数 5267
×
苏苏不是玛丽苏
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: