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

准备工作

1，项目要引入freemarker和bootstrap，如果不知道怎么引入的，请查看
《10小时入门java开发03 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">

    <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>idth>                    <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>

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

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

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

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

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

bootstrap table 分页_Java入门007~springboot+freemarker+bootstrap快速实现分页功能相关推荐

java freemarker 分页_10小时入门java开发04 springboot+freemarker+bootstrap快速实现分页功能...
本节是建立在上节的基础上,上一节给大家讲了管理后台表格如何展示数据,但是当我们的数据比较多的时候我们就需要做分页处理了.这一节给大家讲解如何实现表格数据的分页显示. 准备工作还是老规矩,看效果图可 ...
bootstrap table教程--使用入门基本用法
笔者在查询bootstrap table资料的时候,看了很多文章,发觉很多文章都写了关于如何使用bootstrap table的例子,当然最好的例子还是官网.但是对于某部分技术人员来说,入门还是不够详 ...
bootstrap table 适应移动端_前端框架bootstrap和layui有什么区别
做前端的小伙伴肯定都用过或听过Bootstrap和LayUi,小编我虽然不是专业的前端程序员,但是对于前端还是颇有研究,闲暇事情会经常研究各种前端框架的源码,一来可以借鉴优秀框架的思想,二来可以顺便学 ...
Java项目:销售团队后台管理系统(java+SpringBoot+FreeMarker+bootstrap+echarts+mysql)
源码获取:博客首页 "资源" 里下载! 项目介绍该项目为后管系统,主要功能包括: 看板.业务机会管理.客户管理.联系人管理.我的日报.团队日报.主数据管理:组织架构管理:系统管理 ...
bootstrap table 光标_第三章之Bootstrap 表格与按钮功能
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 学习要点: 1.表 ...
bootstrap table border粗细_Web前端开发(18)——Bootstrap响应式布局
使用步骤 ①下载Bootstrap 进入Bootstrap中文网(https://www.bootcss.com/)可以直接下载Bootstrap代码以及使用文档. ②将代码复制项目中下载下来之后会 ...
Java后台微信点餐小程序开发最新版笔记，Springboot+Mysql+Freemarker+Bootstrap+微信小程序实现扫码点餐小程序，包含语音提示，微信消息推送，网页管理后台
由于之前的Java后台微信点餐小程序有些知识点过时了,所以今天重新出一版,把里面过时的知识点更新下前五章是部署笔记,后面是知识点的详细讲解,大家可以先看部署笔记,部署起来后,再跟着详细知识学习. 第 ...
JS组件系列——表格组件神器：bootstrap table
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...
一、bootstrap table 初体验
http://blog.csdn.net/yin767833376/article/details/52153487 前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法 ...

bootstrap table 分页_Java入门007~springboot+freemarker+bootstrap快速实现分页功能