文档章节

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

苏苏不是玛丽苏
 苏苏不是玛丽苏
发布于 2017/09/03 15:58
字数 597
阅读 39
收藏 0
点赞 0
评论 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
博文 25
码字总数 5298
作品 0
吉林
物联网学习笔记——构建RESTFul平台1

0.前言 前些时间顺着Yeelink学习了RESTFUL,使用PHP和Slim框架尝试实现简单的REST API,树莓派可通过GET方法获得JSON数据包,通过这种方式实现了树莓派和服务器(我的PC)的互动。但是由于没...

thinkyoung ⋅ 2014/12/02 ⋅ 0

学习前端开发,一段心路历程,这个世界根本没有速成的方法

在已经成功的为大家讲解了很多篇有关前端开发的技术文章之后,想跟每一位前端开发人员谈一谈学习前端开发的一些心得。本篇文章我就来给大家说一说我在学习前端开发过程中的一些经验,我把它们...

大数据大佬 ⋅ 06/08 ⋅ 0

huangdf/seezoon-framework-all

项目介绍 基于spring,mybatis,shiro面向接口开发的的一套后台管理系统,方便快速开发;采用常用的技术栈,降低学习成本,项目完全前后端分离,后端定义统一的接口格式,统一参数校验,统一权...

huangdf ⋅ 04/20 ⋅ 0

WEB前端面试的10个最基础JavaScript问题!

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰 ⋅ 05/27 ⋅ 0

WEB前端学习JS灵魂之问:JS为什么是单线程的?

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰 ⋅ 05/27 ⋅ 0

一个非常不错的layer JavaScript插件的使用

一个非常不错的 layer JavaScript 插件的使用–layUI 01.简介 在学过html,css,JavaScript之后,现在也越来越喜欢做出一些比较炫酷的东西,然而无奈自身能力有限,最近自己做一个了小小的jav...

meiqi0538 ⋅ 04/09 ⋅ 0

WEB前端学习面试加分题:同学,你了解TypeScript吗?

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰 ⋅ 05/11 ⋅ 0

WEB前端开发学习:你思考过为什么JavaScript计算浮点数不准确吗?

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰 ⋅ 06/03 ⋅ 0

一个女生对BootStrap的感情

首先说明一下,姐我不是很聪明,但是也做设计,也做前端,同时在移动互联网行业中也混了多年,感触颇多,打算开始记录一下脚步,希望对后来的小弟弟×××们有那么一点帮助,也算一件高兴的事...

BootStrap之路 ⋅ 04/25 ⋅ 0

憧憬Licoy/watchdog-framework

介绍 基于SpringBoot+Shiro+Mybatis+Mybatis-Plus+HikariCP+Redis+Vue+iView等开发的轻量级管理系统快速开发脚手架,拥有角色、用户、资源管理、同时数据更新时关联的用户相应的权限也会实时...

憧憬Licoy ⋅ 04/30 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

vue使用mockjs

在使用vue开发的时候,一直疑惑与mockjs怎么用,开了mockjs的开发文档,还是一脸蒙蔽,无从下手!mockjs在前后端分离开发上进行模拟数据,是不可避掉的一环。在网上看了一些博文还有查阅了其...

JamesView ⋅ 27分钟前 ⋅ 0

解决问题的思路

1.相对来说,程序逻辑解决问题的思路应该更加趋向于通过逻辑结构来解决问题,而不是通过更小的类级别和方法级别的改进 2.类级别和方法级别的改进需要的技术能力更高一点

th778899 ⋅ 33分钟前 ⋅ 0

HTTP请求状态及jQuery AJAX请求异常处理

上一周调优一个项目的Js部分,其中一个严重的问题就是在页面初始化数据时,没有对异常进行处理, 导致Loading一直在等待中,无提示无处理。在用户体验上很不好,即使网络条件无法保证,在出错...

临江仙卜算子 ⋅ 33分钟前 ⋅ 0

error code 1874. innodb is in read only mode--报错解决

参考网页 https://zhidao.baidu.com/question/746894876932022292.html https://blog.csdn.net/shushugood/article/details/80226767 问题背景 创建了一个数据库然后想删除,因为自己本机性能......

karma123 ⋅ 35分钟前 ⋅ 0

JVM系列:jinfo命令详解

jinfo全称Java Configuration Info,主要作用是实时查看和调整JVM配置参数。 一.查看JVM参数 用法:jinfo -flag <name> PID 示例: # jinfo -flag MaxMetaspaceSize 11180 # -XX:MaxMetaspac......

Jacktanger ⋅ 39分钟前 ⋅ 0

exportfs命令、NFS客户端问题、FTP介绍、使用vsftpd搭建ftp

1. exportfs命令 一般情况下重启服务器上nfs服务时,需把客户端上的挂载先卸载掉,以免进程后面杀不掉。当客户端服务器很多时,操作起来就比较麻烦。此时可以使用exportfs命令重新加载下。 ...

laoba ⋅ 48分钟前 ⋅ 0

基于Python的信用评分卡模型分析

信用风险计量体系包括主体评级模型和债项评级两部分。主体评级和债项评级均有一系列评级模型组成,其中主体评级模型可用“四张卡”来表示,分别是A卡、B卡、C卡和F卡;债项评级模型通常按照主...

火力全開 ⋅ 50分钟前 ⋅ 0

执行make命令时报错g++: Command not found

执行make命令时报错g++: Command not found 2016年10月24日 12:31:29 阅读数:4366 朋友安装node时遇到的问题 报错截图: 其实很简单只需要安装一下 yum -y install gcc automake autoconf l...

rootliu ⋅ 50分钟前 ⋅ 0

Loongnix(龙芯)系统,优盘安装指南

U盘安装分为两种方式:"usb disk" 及 "usb cd"。其中usb cd是将usb disk做为usb光驱使用。 usb disk安装步骤: 需要准备一个大小超过3.5G的U盘,格式化ext3格式 下载安装光盘镜像xxx.iso,将...

gugudu ⋅ 53分钟前 ⋅ 0

HTML5中meta属性的使用详解

meta属性在HTML中占据了很重要的位置。如:针对搜索引擎的SEO,文档的字符编码,设置刷新缓存等。虽然一些网页可能没有使用meta,但是作为正规军,我们还是有必要了解一些meta的属性,并且能...

guorongjin ⋅ 56分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部