bootstrap-table分别实现前端和后端的分页项目
1,前端分页
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
<meta charset="utf-8">
<title>bootstrap-table</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件(一般不用引入) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<!-- Latest compiled and minified Locales -->
<script src="https://unpkg.com/[email protected]/dist/locale/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
<div class="jumbotron">
<h1>hello</h1>
</div>
<div id="toolBar">
<form class="form-inline" role="form" action="getPage">
<button class="btn btn-primary" type="button">delete</button>
<button class="btn btn-primary" type="button">new</button>
<input class="form-control" type="text" placeholder="name">
<button class="btn btn-default" type="button">submit</button>
</form>
</div>
<div class="container" style="margin-top:100px">
<div class="row">
<!-- 表格 -->
<div class="col-xs-12">
<table class="table table-striped table-bordered table-hover"></table>
</div>
</div>
</div>
<script type="text/javascript">
class BstpTable {
constructor(obj) {
this.obj = obj;
}
inint() {
//---先销毁表格 ---
this.obj.bootstrapTable('destroy');
//---初始化表格,动态从服务器加载数据---
this.obj.bootstrapTable({
//【发出请求的基础信息】
url: '<%=basePath%>student/pages',
method: 'post',
contentType: "application/x-www-form-urlencoded",
//【其它设置】
locale: 'zh-CN',//中文支持
pagination: true,//是否开启分页(*)
pageNumber: 1,//初始化加载第一页,默认第一页
pageSize: 3,//每页的记录行数(*)
pageList: [2, 3, 4],//可供选择的每页的行数(*)
sidePagination: "client", //分页方式:client客户端分页,server服务端分页(*)
showRefresh: true,//刷新按钮
search: true,//是否显示表格搜索,此搜索是客户端搜索,不会进服务端
//【样式设置】
height: 300,//table的高度
//【设置列】
columns: [
{field: 'id', title: 'id'},
{field: 'name', title: '姓名'},
{field: 'age', title: '年龄'},
{field: 'professional', title: '专业'},
]
})
}
}
var bstpTable = new BstpTable($("table"));
bstpTable.inint()
</script>
</body>
</html>
接口:
/**
* 分页
*
* @return
*/
@RequestMapping(value = "/pages")
@ResponseBody
public List<Student> getPages() {
List list = new ArrayList();
for (int i = 0; i < 10; i++) {
Student s = new Student();
s.setId(i);
s.setAge(i + 10);
s.setName("姓名:" + i);
s.setProfessional("专业名:" + i);
list.add(s);
}
return list;
}
实体类:
package com.demo.pojo;
public class Student {
private int id;
private String name;
private String professional;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getProfessional() {
return professional;
}
public void setProfessional(String professional) {
this.professional = professional;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
private int age;
}
2,后端分页
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
<meta charset="utf-8">
<title>bootstrap-table</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件(一般不用引入) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<!-- Latest compiled and minified Locales -->
<script src="https://unpkg.com/[email protected]/dist/locale/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
<div class="jumbotron">
<h1>hello</h1>
</div>
<div id="toolBar">
<form class="form-inline" role="form" action="getPage">
<button class="btn btn-primary" type="button">delete</button>
<button class="btn btn-primary" type="button">new</button>
<input class="form-control" type="text" placeholder="name">
<button class="btn btn-default" type="button">submit</button>
</form>
</div>
<div class="container" style="margin-top:100px">
<div class="row">
<!-- 表格 -->
<div class="col-xs-12">
<table class="table table-striped table-bordered table-hover"></table>
</div>
</div>
</div>
<script type="text/javascript">
class BstpTable {
constructor(obj) {
this.obj = obj;
}
inint() {
//---先销毁表格 ---
this.obj.bootstrapTable('destroy');
//---初始化表格,动态从服务器加载数据---
this.obj.bootstrapTable({
//【发出请求的基础信息】
url: '<%=basePath%>student/page',
method: 'post',
contentType: "application/x-www-form-urlencoded",
dataField: "data",//这是返回的json数组的key.默认好像是"rows".这里只有前后端约定好就行
//【其它设置】
locale: 'zh-CN',//中文支持
pagination: true,//是否开启分页(*)
queryParams:queryParams,//请求服务器时所传的参数
sidePagination:'server',//指定服务器端分页
pageNumber: 1,//初始化加载第一页,默认第一页
pageSize: 3,//每页的记录行数(*)
pageList: [2, 3, 4],//可供选择的每页的行数(*)
showRefresh: true,//刷新按钮
search: true,//是否显示表格搜索,此搜索是客户端搜索,不会进服务端
responseHandler: responseHandler,//请求数据成功后,渲染表格前的方法
//【样式设置】
height: 300,//table的高度
//【设置列】
columns: [
{field: 'id', title: 'id'},
{field: 'name', title: '姓名'},
{field: 'age', title: '年龄'},
{field: 'professional', title: '专业'},
]
})
}
}
var bstpTable = new BstpTable($("table"));
bstpTable.inint()
//请求服务数据时所传参数
function queryParams(params){
return {
pageSize : params.limit, //每一页的数据行数,默认是上面设置的10(pageSize)
pageIndex : params.offset/params.limit+1, //当前页面,默认是上面设置的1(pageNumber)
param : "Your Param" //这里是其他的参数,根据自己的需求定义,可以是多个
}
}
//请求成功方法
function responseHandler(result){
var errcode = result.errcode;//在此做了错误代码的判断
if(errcode != 0){
alert("错误代码" + errcode);
return;
}
//如果没有错误则返回数据,渲染表格
return {
total : result.dataLength, //总页数,前面的key必须为"total"
data : result.rowDatas //行数据,前面的key要与之前设置的dataField的值一致.
};
};
</script>
</body>
</html>
接口:
@RequestMapping(value = "/page") @ResponseBody public Map getPage(int pageIndex, int pageSize) { System.out.println("12346789"); int limit = pageSize; int offset = (pageIndex - 1) * pageSize; Map paramMap = new HashMap(); paramMap.put("limit", limit); paramMap.put("offset", offset); /**/ /**( * * * * 返回pageBean 到前端 处理 */ return studentService.getPage(paramMap); }
运行效果如上
源码地址:https://download.****.net/download/zzq272804553/11162043