文档章节

bootstrap-table分页简单例子以及常见问题(文中带源码)

xpbob
 xpbob
发布于 2016/07/22 14:15
字数 642
阅读 1522
收藏 4

在使用bootstrap-table分页遇到不少问题,而且查了不少资料,这里总结一下。


1,导入JS错误

 表现:加入bootstrap-table-zh-CN但是没有汉化,以及提示TypeError: $(...).bootstrapTable is not a function这种类似的错误。

这些都是导入的顺序不对,下面贴一份我的导入顺序

<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery-3.1.0.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/bootstrap-table.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/bootstrap-table-zh-CN.min.js"></script>

2,传入后台的参数不对

        bootstrap-table有两种传递方式,data-query-params-type默认为limit,此时传递给后台的就是limit, offset, search, sort, order。换成其他值,一般我们选择为空串,传递的参数就是pageSize, pageNumber, searchText, sortName, sortOrder.。根据你选择不同,后台的逻辑也要改变。


3,想改变接口的参数

很多时候我们都是自己的方式命名,并不喜欢他的默认,我们只要写一个函数即可

function queryParams(params) {
			return {
				pageSize : params.pageSize,
				page : params.pageNumber
			};
}

此处page,pageSize就是我后台默认接收的参数名称。

然后修改queryParams参数的值为我们写的函数queryParams


4,返回类型

现在一般都默认用JSON,我一开始以为返回的数据是我自己定义出来的JSON串,然后在前台用JS解析,后来发现并不是这么回事,返回的数据格式按照total和rows的键值对来的,total就是总共的数据,rows对应的是查询出来的数据。


附:源码部分

Controller部分

	@RequestMapping("/findUser")
	public @ResponseBody Map<String,Object> show(int page,int pageSize){
		 Map<String,Object> map =new HashMap<>();
		 PageInfo<User> listUser = service.listUser(page, pageSize);//这里是查询逻辑,忽略
		 map.put("total", listUser.getTotal());//总共数据量
		 map.put("rows", listUser.getList());//数据
		 return map;//返回json(利用框架转化)
	}

前端显示标签部分

<table id="dg"></table>

很简单,就是个table,下面是配置的JS

$('#dg').bootstrapTable({
			url : '${pageContext.request.contextPath}/findUser.do',//url默认走的是get
			striped : true,
			dataType: 'json',
			pagination : true,
			pageList : [ 3, 5, 20 ],
			pageSize : 3,
			pageNumber : 1,
			queryParamsType: "",//这里只是选择适合我后台的逻辑,可以选择传入页数和显示数量
			queryParams : queryParams,
			sidePagination : 'server',//设置为服务器端分页
			columns : [ {
				field : 'userName',//返回数据对应的字段
				title : '标题'
			}, {
				field : 'userPassword',
				title : '时间'
			} ]
		});

还有自己改变传入后台数据的函数

		function queryParams(params) {
			return {
				pageSize : params.pageSize,//键就是自己后台的参数
				page : params.pageNumber
			};
		}

以上就是全部设置,下面再附一个文档,方便自己修改属性

http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

© 著作权归作者所有

共有 人打赏支持
xpbob

xpbob

粉丝 98
博文 96
码字总数 77864
作品 0
高级程序员
私信 提问
Bootstrap Table Examples

Bootstrap Table 是一款基于bootstrap封装的表格组件,使用起来比较方便。官方文档对服务器端分页表述不是很清楚,查了它的demo,看到接口返回的数据,可以参考一下他的网页源码。此网页源码...

swingcoder
2017/11/03
0
0
Bootstrap Table简单例子学习

1、Bootstrap Table简介 Bootstrap Table是基于Bootstrap的轻量级表格插件,只需要简单的配置就可以实现强大的支持固定表头、单复选、排序、分页、搜索以及自定义表头等功能。 2、所需要的库...

Elven_Xu
2015/12/31
3.5K
2
easyui-table表格客户端分页实例

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

尘光掠影
2017/08/06
0
0
ABP+AdminLTE+Bootstrap Table权限管理系统第十一节--bootstrap table之用户管理列表

ABP+AdminLTE+Bootstrap Table权限管理系统一期 Github:https://github.com/Jimmey-Jiang/ABP-ASP.NET-Boilerplate-Project-CMS 前往博客园总目录:ABP+AdminLTE+Bootstrap Table权限管理系统......

安与生_
2017/08/31
0
0
基于Metronic的Bootstrap开发框架经验总结(16)-- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理

在业务系统开发中,对表格记录的查询、分页、排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,本随笔介绍这个bootstrap-table是一款非...

walb呀
2017/12/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

使用Maven打包Docker镜像-Jenkins版

前提:Jenkins服务器上安装好Docker,创建Jenkins任务,配置好代码来源,和Build配置: pom.xml中添加docker-maven-plugin: <plugin> <groupId>com.spotify</groupId> <artifactI......

莫在全
10分钟前
0
0
rabbitmq

灰暗
50分钟前
1
0
Flink

flink HA部署 flink搭建,采用分布式部署方式,分别为A,B,C三个节点。其中A为master;A,B,C为worker。 本文使用的用户是hadoop用户(自己新建) 先决条件 Java 1.8.x or higher scala 自己使用...

-九天-
今天
2
0
数据中台和传统数仓的区别

中台系统把业务层同性的算法能力,服务能力,业务能力高度集成,有效组织 ,动态规划。更好的帮助上层业务。 今天就让我们看看关于数据中台的问答吧。 1 Q : 什么是数据中台? A : 数据中台是...

hblt-j
今天
4
0
Java在什么时候会出现内存泄漏

在Java中,内存泄漏就是存在一些被分配的对象,这些对象有下面两个特点,首先,这些对象是可达的,即在有向图中,存在通路可以与其相连;其次,这些对象是无用的,即程序以后不会再使用这些对...

群星纪元
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部