文档章节

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

苏苏不是玛丽苏
 苏苏不是玛丽苏
发布于 2017/09/03 15:58
字数 597
阅读 65
收藏 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
博文 30
码字总数 5606
作品 0
吉林
MVC如何使用开源分页插件shenniu.pager.js

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

神牛步行3
2016/12/06
0
0
数据库分页查询和跨页选中行问题处理

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

海岸线的曙光
07/03
0
0
bootstrap-table对前台页面表格的支持

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

小不点丶
2016/12/21
0
0
Django Bootstrap toolkit

bootstrap为前端的快速开发提供了一个很好的框架;Django则为后端的快速提供了全方位的支持,但是需要自己负责实现前端的视觉部分。一前一后两个框架正好可以结合构建一套完整的开发方案出来...

XuYuan
2013/06/28
0
0
Datatables快速入门开发--一款好用的JQuery表格插件

  博主是一个java后端程序员,前端技术会用但不精通,做后台的一些功能经常要涉及表格的展示,分页,搜索,排序等等一系列功能,在经历了一段时间的原始手段,开始接触并使用Datatables,一个jquer...

冬至饮雪
2017/08/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Mac OS X下Maven的安装与配置

Mac OS X 安装Maven: 下载 Maven, 并解压到某个目录。例如/Users/robbie/apache-maven-3.3.3 打开Terminal,输入以下命令,设置Maven classpath $ vi ~/.bash_profile 添加下列两行代码,之后...

TonyStarkSir
今天
3
0
关于编程,你的练习是不是有效的?

最近由于工作及Solution项目的影响,我在重新学习DDD和领域建模的一些知识。然后,我突然就想到了这个问题,以及我是怎么做的? 对于我来说,提升技能的项目会有四种: 纯兴趣驱动的项目。即...

问题终结者
今天
4
0
打开eclipse出现an error has occurred see the log file

解决方法: 1,打开eclipse安装目录下的eclipse.ini文件; 2,打开的文本文件最后添加一行 --add-modules=ALL-SYSTEM 3,保存重新打开Eclipse。...

任梁荣
昨天
4
0
搞定Northwind示例数据库,无论哪个版本的SQLServer都受用

Northwind数据库 从这里可以找到突破口: http://social.msdn.microsoft.com/Forums/zh-CN/Vsexpressvb/thread/8490a1c6-9018-40c9-aafb-df9f79d29cde 下面是MSDN: http://msdn2.microsoft......

QQZZFT
昨天
1
0
mysql主从同步,安装配置操作

准备 两台mysql服务,我这里准备了如下: 主库:192.168.176.128 从库:192.168.176.131 如何在Linux上安装mysql服务,请看https://blog.csdn.net/qq_18860653/article/details/80250499 操作...

小致dad
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部