[转]Bootstrap table后端分页（ssm版）
原文地址:https://www.cnblogs.com/flyins/p/6752285.html
说明
bootstrap table可以前端分页，也可以后端sql用limit分页。
这里讲的是后端分页，即实用limit。性能较好，一般均用这种
源码下载地址：https://git.oschina.net/dingshao/pagination_byjava.git
该文主要讲后端分页：
1、前端每点击翻页按钮，就会向后端发出一次请求，后端只查询当前页数所需要的几条数据
2、查询也是后端，会进入服务器
源码
html
<%@ 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>图片上传</title>
<!-- jq -->
<script type="text/javascript" src="<%=basePath%>js/jquery-3.1.1.min.js"></script> <!-- bootstrap -->
<link rel="stylesheet" href="<%=basePath%>/plugs/bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="<%=basePath%>/plugs/bootstrap/js/bootstrap.min.js"></script> <!-- 分页插件 -->
<link rel="stylesheet" href="<%=basePath%>plugs/bootstrap-table/bootstrap-table.min.css">
<script type="text/javascript" src="<%=basePath%>plugs/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="<%=basePath%>plugs/bootstrap-table/bootstrap-table-locale-all.min.js"></script>
</head>
<body>
<div class="container" style="margin-top:100px">
<div class="row">
<!-- 搜索框 -->
<div class="col-xs-6 pull-right">
<div class="input-group">
<input type="text" class=" form-control" name="age" placeholder="请输入年龄">
<input type="text" class=" form-control" name="name" placeholder="请输入姓名">
<span class="input-group-btn">
<button class="btn btn-default search" type="button">Go!</button>
</span>
</div>
</div>
<!-- 表格 -->
<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(searchArgs){
//---先销毁表格 ---
this.obj.bootstrapTable('destroy');
//---初始化表格,动态从服务器加载数据---
this.obj.bootstrapTable({
//【发出请求的基础信息】
url: '<%=basePath%>student/selectByFy',
method: 'post',
contentType: "application/x-www-form-urlencoded", //【查询设置】
/* queryParamsType的默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort
设置为 '' 在这种情况下传给服务器的参数为：pageSize,pageNumber */
queryParamsType:'',
queryParams: function queryParams(params) {
var param = {
pageNumber: params.pageNumber,
pageSize: params.pageSize
};
for(var key in searchArgs){
param[key]=searchArgs[key]
}
return param;
}, //【其它设置】
locale:'zh-CN',//中文支持
pagination: true,//是否开启分页（*）
pageNumber:1,//初始化加载第一页，默认第一页
pageSize: 3,//每页的记录行数（*）
pageList: [2,3,4],//可供选择的每页的行数（*）
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
showRefresh:true,//刷新按钮 //【样式设置】
height: 300,//table的高度
//按需求设置不同的样式：5个取值代表5中颜色['active', 'success', 'info', 'warning', 'danger'];
rowStyle: function (row, index) {
var style = "";
if (row.name=="小红") {style='success';}
return { classes: style }
}, //【设置列】
columns: [
{field: 'id',title: 'id'},
{field: 'name',title: '姓名'},
{field: 'age',title: '年龄'},
{field: 'tool',title: '操作', align: 'center',
formatter:function(value,row,index){
var element =
"<a class='edit' data-id='"+row.id +"'>编辑</a> "+
"<a class='delet' data-id='"+row.id +"'>删除</a> ";
return element;
}
}
]
})
}
} var bstpTable=new BstpTable($("table"));
bstpTable.inint({}) $(".search").click(function(){
var searchArgs={
name:$("input[name='name']").val(),
age:$("input[name='age']").val()
}
bstpTable.inint(searchArgs)
})
</script>
</body>
</html>
controller
package com.dsh.controller; import java.util.HashMap;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.dsh.service.StudentService; @Controller
@RequestMapping("student")
public class StudentController {
@Autowired
private StudentService studentService; @RequestMapping("selectByFy")
@ResponseBody
public Map<String,Object> selectByFy(int pageSize,int pageNumber,String name,Integer age){
/*所需参数*/
Map<String, Object> param=new HashMap<String, Object>();
int a=(pageNumber-1)*pageSize;
int b=pageSize;
param.put("a", a);
param.put("b", b);
param.put("name", name);
param.put("age", age);
return studentService.selectByFy(param);
}
}
service
package com.dsh.service.imp; import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.dsh.mapper.StudentCustomMapper;
import com.dsh.pojo.Student;
import com.dsh.service.StudentService; @Service
public class StudentServiceImp implements StudentService {
@Autowired
private StudentCustomMapper studentDao; @Override
public Map<String,Object> selectByFy(Map<String, Object> param) {
//bootstrap-table要求服务器返回的json须包含：totlal，rows
Map<String,Object> result = new HashMap<String,Object>();
int total=studentDao.selectByFy(null).size();
List<Student> rows=studentDao.selectByFy(param);
result.put("total",total);
result.put("rows",rows);
return result;
}
}
mapper.xml（即dao）
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.dsh.mapper.StudentCustomMapper" >
<select id="selectByFy" resultType="com.dsh.pojo.Student" parameterType="Map">
SELECT *
FROM student
<if test="a!=null">
<where>
<if test="name!=null and name!=''"> name=#{name}</if>
<if test="age!=null and age!=''">AND age=#{age}</if>
</where>
LIMIT #{a},#{b}
</if>
</select>
</mapper>
[转]Bootstrap table后端分页（ssm版）的更多相关文章
- Bootstrap table后端分页（ssm版）
说明bootstrap table可以前端分页,也可以后端sql用limit分页.这里讲的是后端分页,即实用limit.性能较好,一般均用这种源码下载地址:https://git.oschina.ne ...
- bootstrap table 服务器端分页例子分享
这篇文章主要介绍了bootstrap table 服务器端分页例子分享,需要的朋友可以参考下 1,前台引入所需的js 可以从官网上下载 复制代码代码如下: function getTab(){var ...
- Bootstrap table前端分页（ssm版）
说明bootstrap table可以前端分页,也可以后端sql用limit分页.前端分页下性能和意义都不大,故一般情况下不用这种,请看我的另一篇后端分页的博客源码下载地址:https://git.o ...
- 161222、Bootstrap table 服务器端分页示例
bootstrap版本 为 3.X bootstrap-table.min.css bootstrap-table-zh-CN.min.js bootstrap-table.min.js 前端boot ...
- [前端插件]Bootstrap Table服务器分页与在线编辑应用总结
先看Bootstrap Table应用效果: 表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好.还可以设置查询数据 ...
- C# Bootstrap table之 分页
效果如图: 一.声明talbe <div class="container"> <table id="table" class="t ...
- [转]C# Bootstrap table之 分页
本文转自:https://www.cnblogs.com/zhangjd/p/7895453.html 效果如图: 一.声明talbe <div class="container&qu ...
- bootstrap table 服务器端分页--ashx+ajax
1.准备静态页面 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-T ...
- bootstrap table数据分页查询展示
index.php <html> <head> <link rel="stylesheet" href="./css/bootstrap.m ...
随机推荐
- 关于tensorboard启动问题
我在学习过程中遇到了tensorboard无法启动的问题. 按照网上的教程,我无法正常启动tensorboard,全过程没有报错,但是打开tensorboard显示 No dashboards are ...
- python学习笔记——提取网页信息BeautifulSoup4
1 BeautifulSoup概述 beautifulSoup是勇python语言编写的一个HTML/XML的解析器,它可以很好地处理不规范标记并将其生成剖析树(parse tree): 它提供简单而 ...
- C++中的Thunk技术 / 非静态类成员函数作为回调函数 的实现方法
原文:https://blog.twofei.com/616/ 用我的理解通俗地解释一下什么是C++中的Thunk技术吧! Thunk技术就是申请一段可执行的内存, 并通过手动构造CPU指令的形式来生 ...
- golang学习笔记 ---命名
Go语言中的函数名.变量名.常量名.类型名.语句标号和包名等所有的命名,都遵循一个简单的命名规则:一个名字必须以一个字母(Unicode字母)或下划线开头,后面可以跟任意数量的字母.数字或下划线.大写 ...
- shell脚本监控cpu/内存使用率 转
该脚本检测cpu和内存的使用情况,只需要调整memorySetting.cpuSetting.userEmail要发邮件报警的email地址即可 如果没有配置发邮件参数的哥们,已配置了的,直接飞到代码 ...
- easyui combobox 动态加载的两种方法
reload 方法 javascript代码 //指定id 和 text 否则始终选择第一个 $('#contact_city').combobox({ valueField:'id', textFi ...
- PowerDsigner 16逆向工程导入mysql
由于日常数据建模经常使用PowerDesigner,使用逆向工程能更加快速的生成模型提高效率,所以总结使用如下: 1. 安装MYSQL的ODBC驱动 Connector/ODBC 5.1.1 ...
- Groovy 学习手册（1）
1. 需要安装的软件 Java / Groovy 对应 Java 和 Groovy,你需要安装以下软件: Java JDK,例如 JDK 8 IDE,例如 Eclipse,NetBeans 8 Gro ...
- 【转载，待整理】初学 springmvc整合shiro
1. shiro认证流程理解 2. 整合过程 http://blog.csdn.net/dawangxiong123/article/details/53020424 http://blog.csdn ...
- Hive sql 查询数据库查询 top-n
数据库查询*分组排序取top n要求:按照课程分组,查找每个课程最高的两个成绩. 数据文件如下: 第一列no为学号,第二列course为课程,第三列score为分数 mysql> select ...