springboot+freemarker+bootstrap快速实现分页功能(含java源码)
本节是建立在上节的基础上,上一节给大家讲了管理后台表格如何展示数据,但是当我们的数据比较多的时候我们就需要做分页处理了。这一节给大家讲解如何实现表格数据的分页显示。
01
一 准备工作
1:项目要引入freemarker和bootstrap,如果不清楚怎么引入的,请查看以下内容
《10小时入门java开发03springboot+freemarker+bootstrap快速实现管理后台》
https://www.jianshu.com/p/e7962a6478c7
02
二老规矩,看效果图
可以看出我们实现了如下功能
1,表格数据的展示
2,分页效果的实现
3,上一页和下一页的实现
4,当前选中页码加重颜色
下面来看实现步骤
03
一,定义表格和分页组件
简单说说代码
1,head里面是引入bootstrap的样式库
2,table定义表格来展示数据
3,ul里定义分页 代码如下:
<html><head>
<meta charset="utf-8">
<title>freemarker+bootstrap学习</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet"
href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css"></head><body><div class="container-fluid">
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-bordered table-condensed table-striped">
<thead>
<tr>
<th>id</th>
<th>姓名</th>
<th>微信</th>
<th colspan="2">操作</th>
</tr>
</thead>
<tbody>
<#list productInfoPage as productInfo>
<tr>
<td>${productInfo.id}</td>
<td>${productInfo.name}</td>
<td>${productInfo.wechat}</td>
<td>
<#if productInfo.id%2 == 0>
<a href="#">下架</a>
<#else>
<a href="">上架</a>
</#if>
</td>
</tr>
</#list>
</tbody>
</table>
</div>
<#--分页-->
<div class="col-md-12 column">
<ul class="pagination ">
<#if currentPage lte 1>
<li class="disabled "><a class="page-link" href="#">上一页</a></li>
<#else>
<li>
<a class="page-link" href="/pageList?page=${currentPage -
1}&size=${size}">上一页</a>
</li>
</#if>
<#list 1..totalPage as index>
<#if currentPage == index>
<li class="page-item active "><a class="page-link" href="#">${index}</a>
</li>
<#else>
<li>
<a class="page-link" href="/pageList?page=${index}&size=${size}">
${index}</a>
</li>
</#if>
</#list>
<#if currentPage gte totalPage>
<li class="disabled "><a class="page-link" href="#">下一页</a></li>
<#else>
<li>
<a class="page-link" href="/pageList?page=${currentPage + 1}&size=${size}">下一页</a>
</li>
</#if>
</ul>
</div>
</div></div></body></html>
04
二,定义好页面后,我们就来获取数据
同样这里的数据我们先用模拟数据,后面会用数据库里的数据。看下面代码可以看出来,我们模拟了6条数据,然后每页显示2条数据。
package com.qcl.demo.controller;import com.qcl.demo.bean.Demo;import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.RestController;import org.springframework.web.servlet.ModelAndView;import java.util.ArrayList;import java.util.List;import java.util.Map;/**
* Created by qcl on 2019-04-29
* 微信:2501902696
* desc:freemarker学习
*/@RestControllerpublic class DemoController { /*
* 分页效果的实现
* */
@GetMapping("/pageList") public ModelAndView list(@RequestParam(value = "page", defaultValue = "1") Integer page,
@RequestParam(value = "size", defaultValue = "2") Integer size,
Map<String, Object> map) {
List<Demo> demoList = new ArrayList<>(4);
demoList.add(new Demo(1, "标题1", "编程小石头1", "2501902696"));
demoList.add(new Demo(2, "标题2", "编程小石头2", "2501902696"));
demoList.add(new Demo(3, "标题3", "编程小石头3", "2501902696"));
demoList.add(new Demo(4, "标题4", "编程小石头4", "2501902696"));
demoList.add(new Demo(5, "标题5", "编程小石头4", "2501902696"));
demoList.add(new Demo(6, "标题6", "编程小石头4", "2501902696"));
demoList.add(new Demo(7, "标题7", "编程小石头7", "2501902696")); int start = (page - 1) * 2; int end = start + size;
List<Demo> subList = demoList.subList(start, end); int totalPage = (int) Math.ceil(demoList.size() / size);
map.put("productInfoPage", subList);
map.put("totalPage", totalPage);
map.put("currentPage", page);
map.put("size", size); return new ModelAndView("demo/list", map);
}
}
05
三,启动springboot查看效果。
注意每一页地址栏的url
可以看出,我们第一次访问时,默认显示第一页,url里没有page和size字段。访问第2页和第3页时,url里就有了page和size。page是显示那一页,size是每页显示多少条数据。到这里我们就实现的管理后台的分页效果。
06
我会把10小时实战入门java系列课程录制成视频,如果你看文章不能很好的理解,可以去看下视频:
https://edu.csdn.net/course/detail/23443
源码地址
https://github.com/qiushi123/freemarker
END
- 开发者需要掌握的JS事件
- Java 集合系列03之 ArrayList详细介绍(源码解析)和使用示例
- Kosaraju算法、Tarjan算法分析及证明--强连通分量的线性算法
- 关于curl网站运维与开发的那些事
- 并查集Union-find及其在最小生成树中的应用
- go 语言的库文件放在哪里?如何通过nginx代理后还能正确获取远程地址
- 离线Tarjan算法-最近公共祖先问题
- Java文件上传下载实训
- 【网络编程系列】二:socket通信原理及实践
- textrank算法原理与提取关键词、自动提取摘要PYTHON
- 【网络编程系列】一:字节顺序的大端与小端表示法
- Linux下的make命令用法
- 增量数据丢失的原因分析(三)(r8笔记第91天)
- JS之浏览器对象BOM
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- SpringBoot总结之CommandLineRunner
- 详细整理Spring事务失效的具体场景及解决方案
- Vue监听文本框实时输入限制输入长度
- 30 分钟轻松搞定正则表达式基础
- Vant引入CDN实现图片懒加载
- Js时间戳倒计时天时分秒
- 微信小程序引用we-cropper裁切图片
- NodeJs获取get/post传值
- Mybatis源码本地化构建Demo
- NodeJs封装静态web服务器、路由、读取文件获取响应类型
- NodeJs使用ejs模板引擎实现后端渲染
- 如何优雅地本地化构建Mybatis源码
- Vue监听返回键关闭弹出层不返回页面
- Css添加div点击态
- Mybatis源码笔记之浅析ParameterHandler