springboot+freemarker+bootstrap快速实现分页功能(含java源码)

简介: 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

相关文章
|
12天前
|
前端开发
Bootstrap5 分页1
Bootstrap 5 提供了简单易用的分页组件。通过在 `&lt;ul&gt;` 元素上添加 `.pagination` 类,并在 `&lt;li&gt;` 元素上添加 `.page-item` 类,以及在 `&lt;a&gt;` 标签上添加 `.page-link` 类,即可实现基本的分页效果。使用 `.active` 类可以高亮显示当前页。
|
4天前
|
监控 Java 应用服务中间件
高级java面试---spring.factories文件的解析源码API机制
【11月更文挑战第20天】Spring Boot是一个用于快速构建基于Spring框架的应用程序的开源框架。它通过自动配置、起步依赖和内嵌服务器等特性,极大地简化了Spring应用的开发和部署过程。本文将深入探讨Spring Boot的背景历史、业务场景、功能点以及底层原理,并通过Java代码手写模拟Spring Boot的启动过程,特别是spring.factories文件的解析源码API机制。
16 2
|
20天前
|
数据采集 监控 前端开发
二级公立医院绩效考核系统源码,B/S架构,前后端分别基于Spring Boot和Avue框架
医院绩效管理系统通过与HIS系统的无缝对接,实现数据网络化采集、评价结果透明化管理及奖金分配自动化生成。系统涵盖科室和个人绩效考核、医疗质量考核、数据采集、绩效工资核算、收支核算、工作量统计、单项奖惩等功能,提升绩效评估的全面性、准确性和公正性。技术栈采用B/S架构,前后端分别基于Spring Boot和Avue框架。
|
8天前
|
人工智能 监控 数据可视化
Java智慧工地信息管理平台源码 智慧工地信息化解决方案SaaS源码 支持二次开发
智慧工地系统是依托物联网、互联网、AI、可视化建立的大数据管理平台,是一种全新的管理模式,能够实现劳务管理、安全施工、绿色施工的智能化和互联网化。围绕施工现场管理的人、机、料、法、环五大维度,以及施工过程管理的进度、质量、安全三大体系为基础应用,实现全面高效的工程管理需求,满足工地多角色、多视角的有效监管,实现工程建设管理的降本增效,为监管平台提供数据支撑。
24 3
|
12天前
Bootstrap5 分页3
分页的对齐方式可以通过添加不同的类来实现,默认为左对齐,居中对齐需添加 `justify-content-center` 类,右对齐则添加 `justify-content-end` 类。面包屑导航通过 `.breadcrumb` 和 `.breadcrumb-item` 类进行设置,用于显示当前页面在网站中的位置。
|
13天前
|
运维 自然语言处理 供应链
Java云HIS医院管理系统源码 病案管理、医保业务、门诊、住院、电子病历编辑器
通过门诊的申请,或者直接住院登记,通过”护士工作站“分配患者,完成后,进入医生患者列表,医生对应开具”长期医嘱“和”临时医嘱“,并在电子病历中,记录病情。病人出院时,停止长期医嘱,开具出院医嘱。进入出院审核,审核医嘱与住院通过后,病人结清缴费,完成出院。
45 3
|
19天前
|
JavaScript Java 项目管理
Java毕设学习 基于SpringBoot + Vue 的医院管理系统 持续给大家寻找Java毕设学习项目(附源码)
基于SpringBoot + Vue的医院管理系统,涵盖医院、患者、挂号、药物、检查、病床、排班管理和数据分析等功能。开发工具为IDEA和HBuilder X,环境需配置jdk8、Node.js14、MySQL8。文末提供源码下载链接。
|
7天前
|
前端开发 PHP
10 PHP结合bootstrap完成分页
路老师分享了如何使用PHP实现CSDN问答列表的分页功能。首先,通过编写 `index.php` 文件,定义数据和分页逻辑。接着,安装 Composer 并配置 PHP 包管理工具,以引入 `jasongrimes/paginator` 分页插件。最后,展示分页效果并确保代码路径正确。下篇将介绍 PHP 和 Web 页面的交互。
16 0
|
12天前
Bootstrap5 分页2
使用 `.disabled` 类可使分页链接不可点击。通过 `.pagination-lg` 和 `.pagination-sm` 类可调整分页条目的大小,分别设置为大字体和小字体。示例代码展示了如何实现这些效果。
|
安全 Java
Java并发编程笔记之CopyOnWriteArrayList源码分析
并发包中并发List只有CopyOnWriteArrayList这一个,CopyOnWriteArrayList是一个线程安全的ArrayList,对其进行修改操作和元素迭代操作都是在底层创建一个拷贝数组(快照)上进行的,也就是写时拷贝策略。
19549 0