纵有疾风起
人生不言弃

Java入门010~springboot+freemarker+bootstrap快速实现分页功能

本节是建立在上节的基础上,上一节给大家讲了管理后台表格如何展示数据,但是当我们的数据比较多的时候我们就需要做分页处理了。这一节给大家讲解如何实现表格数据的分页显示。

准备工作

还是老规矩,看效果图

Java入门010~springboot+freemarker+bootstrap快速实现分页功能插图

可以看出我们实现了如下功能

  • 1,表格数据的展示
  • 2,分页效果的实现
  • 3,上一页和下一页的实现
  • 4,当前选中页码加重颜色

下面来看实现步骤

一,定义表格和分页组件

简单说说代码

  • head里面是引入bootstrap的样式库
  • table定义表格来展示数据
  • 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%20-%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%201}&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%20+%201}&size=${size}">下一页</a>                    </li>                </#if>            </ul>        </div>    </div></div></body></html>

二,定义好页面后,我们就来获取数据

同样这里的数据我们先用模拟数据,后面会用数据库里的数据。
看下面代码可以看出来,我们模拟了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);    }}

三,启动springboot查看效果。

注意每一页地址栏的url

Java入门010~springboot+freemarker+bootstrap快速实现分页功能插图(1)

Java入门010~springboot+freemarker+bootstrap快速实现分页功能插图(2)

Java入门010~springboot+freemarker+bootstrap快速实现分页功能插图(3)

可以看出,我们第一次访问时,默认显示第一页,url里没有page和size字段。
访问第2页和第3页时,url里就有了page和size。page是显示那一页,size是每页显示多少条数据。
到这里我们就实现的管理后台的分页效果。

我会把10小时实战入门java系列课程录制成视频,如果你看文章不能很好的理解,可以去看下视频:https://edu.csdn.net/course/detail/23443

有任何关于编程的问题都可以加我微信2501902696(备注编程开发)

编程小石头,码农一枚,非著名全栈开发人员。分享自己的一些经验,学习心得,希望后来人少走弯路,少填坑。

文章转载于:https://www.jianshu.com/p/46bbb1db9bf4

原著是一个有趣的人,若有侵权,请通知删除

未经允许不得转载:起风网 » Java入门010~springboot+freemarker+bootstrap快速实现分页功能

分享到: 生成海报
avatar

评论 抢沙发

评论前必须登录!

立即登录   注册

切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活