文档章节

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

苏苏不是玛丽苏
 苏苏不是玛丽苏
发布于 2017/09/03 15:58
字数 597
阅读 94
收藏 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
博文 35
码字总数 6674
作品 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
推荐十个最新免费的 jQuery 表格插件

作为开发者都知道插件的重要性,有了插件的帮助,工作会更加高效。这次,我们收集了一些优秀的 jQuery 表格插件介绍给大家。 创建一个表格(table)并调整其规模,是一项艰难而繁琐的工作。作...

oschina
2015/06/10
38.6K
10
Bootstrap Paginator分页插件使用

Bootstrap Paginator分页插件使用 概述 Bootstrap Paginator是一款基于Bootstrap的js分页插件。它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态的改变,以及事...

1027888989178846
2018/12/12
0
0
数据库分页查询和跨页选中行问题处理

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

海岸线的曙光
2018/07/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

centos7重置密码、单用户模式、救援模式、ls命令、chmod命令

在工作当中如果我们错误的配置了文件使服务器不能正常启动或者忘记密码不能登录系统,如何解决这些问题呢?重装系统是可以实现的,但是往往不能轻易重装系统的,下面用忘记密码作为例子讲解如...

李超小牛子
今天
3
0
Python如何开发桌面应用程序?Python基础教程,第十三讲,图形界面

当使用桌面应用程序的时候,有没有那么一瞬间,想学习一下桌面应用程序开发?行业内专业的桌面应用程序开发一般是C++,C#来做,Java开发的也有,但是比较少。本节课会介绍Python的GUI(图形用...

程序员补给栈
今天
5
0
kafka在的使用

一、基本概念 介绍 Kafka是一个分布式的、可分区的、可复制的消息系统。它提供了普通消息系统的功能,但具有自己独特的设计。 这个独特的设计是什么样的呢? 首先让我们看几个基本的消息系统...

狼王黄师傅
今天
3
0
Android JNI总结

0x01 JNI介绍 JNI是Java Native Interface的缩写,JNI不是Android专有的东西,它是从Java继承而来,但是在Android中,JNI的作用和重要性大大增强。 JNI在Android中起着连接Java和C/C++层的作...

天王盖地虎626
昨天
3
0
大数据教程(11.8)Hive1.2.2简介&初体验

上一篇文章分析了Hive1.2.2的安装,本节博主将分享Hive的体验&Hive服务端和客户端的使用方法。 一、Hive与hadoop直接的关系 Hive利用HDFS存储数据,利用MapReduce查询数据。 二、Hive与传统数...

em_aaron
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部