spring boot 系列学习记录:http://www.cnblogs.com/jinxiaohang/p/8111057.html

码云源码地址:https://gitee.com/jinxiaohang/springboot

  本次练习在之前第04章—整合Mybatis基础上进行,也算是Bootstrap-Table基础上进行扩展。

在使用mybatis时,我会将实体类属性和表字段名一致,这样可以不用配映射关系,会自动映射。

在使用JPA时,要以一定方式进行设置实体类属性和表字段名,举个例子:类名UserInfo->表名user_info ,属性userId->字段user_id,属性password->字段password。

一、下载组件

下载bootstrap-table:http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/

下载bootstrap:https://v3.bootcss.com/

下载jqurey:http://jquery.com/

  下载源码后解压出来,在demo中导入我们想要的代码。

如下图所示:

  jquery的一个js文件、

  bootstrap的一个js文件、一个css文件、一个字体包

  bootstrap-table的两个js文件、一个css文件

二、bootstrap-table使用

  在resources下的static中,新建一个html文件添加以下内容:(这里就与第17章写的不太一样了)

<!DOCTYPE html>
<html lang="zh-CN">
<head> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>
开始使用 Bootstrap Table
</title> <link rel="stylesheet" href="css/bootstrap.min.css"><!--需要添加fonts图标显示才会好-->
<link rel="stylesheet" href="css/bootstrap-table.min.css">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-table.min.js"></script>
<script src="js/bootstrap-table-zh-CN.min.js"></script> </head> <body>
<div class="container">
<div id="toolbar" class="btn-group">
<button id="btn_add" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
</button>
<button id="btn_edit" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
</button>
<button id="btn_delete" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
</button>
</div>
<table id="table"></table>
</div>
</body> <script>
//先销毁表格
$('#table').bootstrapTable('destroy'); $('#table').bootstrapTable({ url:'/api/user/paging',
method: 'GET', //请求方式(*)
//contentType: "application/x-www-form-urlencoded",//一种编码。好像在post请求的时候需要用到。这里用的get请求,注释掉这句话也能拿到数据
//dataType:'jsonp', //跨域设置
toolbar: '#toolbar', //工具按钮用哪个容器
pagination: true, //是否显示分页(*)
pageNumber:1,//初始化加载第一页,默认第一页
pageSize: 2,//每页的记录行数(*)
pageList: [2,3,4],//可供选择的每页的行数(*)
dataField: "rows",//这是返回的json数组的key.默认好像是"rows".这里只有前后端约定好就行
showColumns: true, //是否显示所有的列
//minimumCountColumns: 2, //最少允许的列数
showRefresh: true, //是否显示刷新按钮
queryParamsType:'',
queryParams: function queryParams(params) {
var param = {
offset: (params.pageNumber-1)*params.pageSize,//偏移量
limit: params.pageSize//长度
};
return param;
},
sidePagination: "server",
columns: [{
checkbox: true,
align: 'center'//水平居中
}, {
field: 'userId',
title: 'ID',
align: 'center'//水平居中
}, {
field: 'username',
title: 'Name',
align: 'center'//水平居中
}, {
field: 'password',
title: 'Age',
align: 'center'//水平居中
}
]
});
</script>

三、分页在各层的实现

dao层添加:

    @Select("select * from user limit #{offset},#{limit}")
List<User> paging(Map<String,Object> param);

service层添加:

    /**
* 分页获取数据
* @param param
* @return
*/
Map<String,Object> paging(Map<String,Object> param);

serviceimpl层添加:

    @Override
public Map<String,Object> paging(Map<String, Object> param) {
//bootstrap-table要求服务器返回的json须包含:totlal,rows
Map<String,Object> result = new HashMap<String,Object>();
List<User> rows = userMapper.paging(param);
int total = userMapper.list().size();
result.put("total",total);
result.put("rows",rows);
return result;
}

controller层添加:

    @GetMapping("paging")
public Map<String,Object> paging(@RequestParam int limit,@RequestParam int offset){
/*所需参数*/
Map<String, Object> param=new HashMap<String, Object>();
param.put("limit", limit);
param.put("offset", offset);
return userService.paging(param);
}

四、运行展示

  访问http://127.0.0.1:8080/api/user/paging?offset=0&limit=5,接口数据格式展示:

  运行效果展示:

显示条数可根据两项修改。

pageSize: 2,//每页的记录行数(*)
pageList: [2,3,4],//可供选择的每页的行数(*)

五、总结

  这次才实现真正意义上的分页。

第18章—后端分页(Mybatis)的更多相关文章

  1. 第19章—后端分页(PageHelper)

    spring boot 系列学习记录:http://www.cnblogs.com/jinxiaohang/p/8111057.html 码云源码地址:https://gitee.com/jinxia ...

  2. Thymeleaf前后端分页查询

    分页查询是一个很常见的功能,对于分页也有很多封装好的轮子供我们使用. 比如使用mybatis做后端分页可以用Pagehelper这个插件,如果使用SpringDataJPA更方便,直接就内置的分页查询 ...

  3. [转]Bootstrap table后端分页(ssm版)

    原文地址:https://www.cnblogs.com/flyins/p/6752285.html 说明bootstrap table可以前端分页,也可以后端sql用limit分页.这里讲的是后端分 ...

  4. python 进行后端分页详细代码

    后端分页 两个接口 思路: 1. 先得到最大页和最小页数(1, 20) --> 传递给前端, 这样前端就可以知道有多少个页数 2. 通过传递页数得到当前页对应数据库的最大值和最小值 3. 通过s ...

  5. Bootstrap table后端分页(ssm版)

    说明bootstrap table可以前端分页,也可以后端sql用limit分页.这里讲的是后端分页,即实用limit.性能较好,一般均用这种源码下载地址:https://git.oschina.ne ...

  6. 第18章 集合框架(2)-Set接口

    第18章 集合框架(2)-Set接口 Set是Collection子接口,模拟了数学上的集的概念 Set集合存储特点 1.不允许元素重复 2.不会记录元素的先后添加顺序 Set只包含从Collecti ...

  7. Java 第18章 多态

    18 章  --> 多态 继承: extends 抽象类 abstract (限制类的实例化) 抽象方法 public abstract void show(); //抽象方法只有方法的声明,没 ...

  8. LPTHW 笨方法学python 18章

    看完18章以后,发现第一个练习中,使用了*args读取全部的的输入参数作为一个元组,但是在他的练习中只给了两个变量去赋值,当用户不清楚这个函数的定义时,就可能会给出过多的变量进这个函数,那么就会出现如 ...

  9. 《TCP/IP详解卷1:协议》第17、18章 TCP:传输控制协议(1)-读书笔记

    章节回顾: <TCP/IP详解卷1:协议>第1章 概述-读书笔记 <TCP/IP详解卷1:协议>第2章 链路层-读书笔记 <TCP/IP详解卷1:协议>第3章 IP ...

随机推荐

  1. [elk]logstash grok原理

    logstash语法 http://www.ttlsa.com/elk/elk-logstash-configuration-syntax/ https://www.elastic.co/guide/ ...

  2. JSON的String字符串与Java的List列表对象的相互转换

    1.JSON的String字符串与Java的List列表对象的相互转换 在前端: 1.如果json是List对象转换的,可以直接遍历json,读取数据. 2.如果是需要把前端的List对象转换为jso ...

  3. 最大子矩阵 hdu1081

    To The Max Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...

  4. 通过ip查看主机名和端口占用情况

      1. 知道对方ip查看对方的计算机名 方法:开始->运行->cmd->net view 对方ip 或者 开始->运行->cmd->nbtstat -a 对方ip ...

  5. 解决Linux环境下Tomcat启动卡住问题

    最近发现在服务器上启动tomcat,会存在卡住的情况,这种情况是每次必现,通过搜索发现是随机数生成问题.解决方案如下 将$JAVA_HOME/jre/lib/security/Java.securit ...

  6. maven项目编译:程序包com.sun.image.codec.jpeg不存在 这个类文件的位置在jre/lib/rt.jar

    转载:http://superich2008.iteye.com/blog/2047830 失败提示信息为:程序包com.sun.image.codec.jpeg不存在 这个类文件的位置在jre/li ...

  7. tf命令总结

    $/AutoBuild/WpfApp/WpfApp/MainWindow.xaml 发现tf workspaces /collection:http://192.168.175.117:8080/tf ...

  8. 编写可维护的JavaScript----笔记(二)

    01.何时使用注释 添加注释的一般原则是,在需要让代码变得更清晰时添加注释 难于理解的代码 浏览器特性hack 注释声明: TODO 说明代码还没完成,应当包含下一步要做的事情 XXX 说明代码是有问 ...

  9. 【Selenium】之谷歌、IE、火狐浏览器各个版本的浏览器驱动下载地址

    地址:chromedriver官网下载地址: http://chromedriver.storage.googleapis.com/index.html(失效了) http://npm.taobao. ...

  10. 修改net基本三层 动软生产

    控制层(dal) 模型层-实体类(Model) 显示层-web