文档章节

bootstrap table对js前端获取的数据进行分页

苏苏不是玛丽苏
 苏苏不是玛丽苏
发布于 2017/09/03 15:58
字数 597
阅读 77
收藏 0

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

© 著作权归作者所有

共有 人打赏支持
苏苏不是玛丽苏
粉丝 1
博文 33
码字总数 6369
作品 0
吉林
私信 提问
easyui-table表格客户端分页实例

版权声明:本文为博主原创文章,如需转载,请标明出处。 https://blog.csdn.net/alan_liuyue/article/details/76783083 一、前言 前一篇博客已经介绍了bootstrap-table的客户端分页,而本...

尘光掠影
2017/08/06
0
0
MVC如何使用开源分页插件shenniu.pager.js

  最近比较忙,前期忙公司手机端接口项目,各种开发+调试+发布现在几乎上线无问题了;虽然公司项目忙不过在期间抽空做了两件个人觉得有意义的事情,一者使用aspnetcore开发了个人线上项目(...

神牛步行3
2016/12/06
0
0
bootstrap-table对前台页面表格的支持

1、bootstrap-table是在bootstrap的基础上面做了一些封装,所以在使用bootstrap-table之前要导入的js和css有   1)基本的还是jQuery   2)引入bootstrap...

小不点丶
2016/12/21
0
0
数据库分页查询和跨页选中行问题处理

今天看到一篇博客,突然想到以前遇到的一个类似的问题,关于分页查询和跨页保持选中行的问题,下面给出答案,一起探讨下吧。 一、什么是数据库分页查询? 即在服务端分页,跳到第n页才查询、...

海岸线的曙光
07/03
0
0
【Bootstrap系列】详解Bootstrap-table

本篇文章将与大家分享bootstrap-table插件,借助于它实现基本的增删改查,导入导出,分页,父子表等。 至于其他技术,如冻结表头,列排列,行拖动,列拖动等,会在后续文章中与大家分享。 一...

Alan_beijing
09/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

thinkphp门窗定制电商平台

这个门窗定制电商平台的目标是,消费者通过门窗定制平台,上传要定制门窗的尺寸数据下订单,电商平台分派订单给厂家商家定制商品,由厂家商家直接发货给消费者。消费者的资金托管在电商平台里...

乐兔CRM
5分钟前
0
0
全局光照---小结

中国龙-扬科
6分钟前
0
0
LAMP架构设置防盗链及访问控制

11月19日任务 11.25 配置防盗链 11.26 访问控制Directory 11.27 访问控制FilesMatch 配置防盗链 为什么要配置防盗链 第三方的站点可以通过引用的方式来获取本服务器上的资源如图片等,但是相...

robertt15
6分钟前
0
0
AWS 推出长期支持的 OpenJDK 免费分发版本 —— Amazon Corretto

简评:听说 Oracle JDK 要收费了,Oracle 要限制 Java 的商业或生产用途,针对这个问题,AWS 将会推出 Amazon Corretto。 Java 是 AWS 用户使用的最流行的编程语言之一,亚马逊一直致力于支持...

极光推送
12分钟前
0
0
Cloudinit如何判断虚拟机为初始化状态

Cloudinit简介 cloudinit是专为云环境中虚拟机的初始化而开发的工具,它从各种数据源读取相关数据并据此对虚拟机进行配置。常见的数据源包括:云平台的metadata服务、ConfigDrive等,常见的配...

空灵飞渡
24分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部