文档章节

203. 使用pageHelper+boostrap分页 页数过多使用....代替

Lucky_Me
 Lucky_Me
发布于 2018/12/10 17:38
字数 1290
阅读 31
收藏 0

1. 效果

2. pagehelper版本的

2.1 引入相关jar 及配置分页插件

   <!-- 10. 分页 pageHelper -->
            <dependency>
                <groupId>com.github.pagehelper</groupId>
                <artifactId>pagehelper</artifactId>
                <version>4.1.4</version>
            </dependency>  

 <!-- 3.3 配置分页插件 -->
                 <property name="plugins">
                    <array>
                      <bean class="com.github.pagehelper.PageHelper">
                        <property name="properties">
                          <value>
                            dialect=mysql
                            reasonable=true
                          </value>
                        </property>
                      </bean>
                    </array>
                  </property>

2.2 后台

2.2.1 controller

2.2.2 业务层

2.2.3 mapper

2.3 前端分页(*)

目的:过多的情况下用"......"代替

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
   <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>系统登录日志</title>
    <%@ include file="../public/url.jsp" %>
    <!--1.入门meta部分   为了确保适当的绘制和触屏缩放,需要在 <head> 之中添加 viewport 元数据标签。-->
            <!--initial-scale=1  是为了保证页面是流动式页面   user-scalable=no 禁止页面缩放功能-->
          <meta name="viewport" content="width=device-width, initial-scale=1">
        <!--2.引入 bootstrap.min.css-->
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
        <!--3.引入jQuery库   必须在bootstrap库之前   建议使用1.x版本的-->
        <script src="js/jquery-2.1.4.min.js"></script>
        <!--4.引入bootstrap库-->
        <script src="js/bootstrap.min.js"></script>
        
        <script type="text/javascript">
        //1.分页 将原来的get提交给位post提交
                function pageTo(pageNum){
                    document.write("<form action='${pageContext.request.contextPath }/pageHelperFunction.action' method=post name=manageDepForm style='display:none'>");
                    document.write("<input type=hidden name='currentPage' value='"+pageNum+"'/>");//参数1
                    document.write("<input type=hidden name='pageSize' value='"+data.pageSize+"'/>");//参数2
                    document.write("</form>");
                    document.manageDepForm.submit(); 
            }

        </script>

</head>
<body>
        <!--3. 显示信息  -->
    <table class="table table-bordered">
        <thead>
            <tr align="center" style="color: black;">
                <td> <strong>序号</strong></td>
                <td> <strong>操作账号</strong></td>
                <td> <strong>操作人</strong></td>
                <td> <strong>管理员</strong></td>
                <td> <strong>IP</strong></td>
                <td> <strong>IP归属地</strong></td>
                <td> <strong>网络运营商</strong></td>
                <td> <strong>访问途径</strong></td>
                <td> <strong>浏览器类型</strong></td>
                <td> <strong>操作系统</strong></td>
                <td> <strong>登录时间</strong></td>
                <td><strong>状态</strong></td>
                
            </tr>
            <tbody>
                <c:forEach var="logs" items="${pb.list }"  varStatus="status">
                        <td align="center">${pb.pageSize * (pb.pageNum - 1) + status.count}</td>
                        <td align="center"> admin</td>
                        <td align="center"><font style="color: red">admin</font></td>
                        <td align="center">
                        <c:if test="${logs.isadmin =='0'}">
                                                        是
                                </c:if>
                                <c:if test="${logs.isadmin =='1'}">
                                                        否
                                </c:if>
                        </td>
                        <td align="center">${logs.ip}</td>
                        <td align="center">${logs.city}</td>
                        <td align="center">${logs.isp}</td>
                        <td align="center">${logs.visitType}</td>
                        <td align="center">${logs.browser}</td>
                        <td align="center">${logs.operation}</td>
                        <td align="center">${logs.createTime}</td>
                        <td align="center">
                            <c:if test="${logs.abnormalFlag==0 }">
                                <a href="javascript:updateDataStatus('${logs.id}',1,'${logs.isadmin }')" class="btn-success btn-sm">正常</a>
                            </c:if>
                            <c:if test="${logs.abnormalFlag==1 }">
                                <a href="javascript:updateDataStatus('${logs.id}',0,'${logs.isadmin }')" class="btn btn-danger btn-sm">异常</a>
                            </c:if>
                        </td>
                    </tr>
                </c:forEach>
            </tbody>
        </thead>
    </table>
    <!--  -->
    <font size="5px">共计为您搜索到:${pb.total }条数据;每页显示:${pb.pageSize }条;共${pb.pages }页;当前是第</font>
    <font style="color: red" size="5px">${pb.pageNum}</font><font size="5px">页</font>;
            <!-- 分页开始=======================        -->
                        <div style="height: 400px;">
                             <ul class="pagination">
                            
                                <!-- 上一页  -->
                                <!-- 当当前页码为1时,隐藏上一页按钮  -->
                                <li <c:if test="${pb.pageNum==1 }">class="disabled"</c:if>>
                                <!-- 当当前页码不等于1时,跳转到上一页  -->
                                    <a 
                                    <c:if test="${pb.pageNum==1 }">href="javaScript:void(0)"</c:if>
                                    <c:if test="${pb.pageNum!=1 }">href="javaScript:pageTo('${pb.pageNum-1 }')"</c:if>
                                    >上一页</a>
                                </li>
                                
                                <!-- 页码  -->
                                <!-- 当总页数小于等于7时,显示页码1...7页 -->
                                <c:if test="${pb.pages<=7}">
                                    <c:forEach begin="1" end="${pb.pages}" var="i">
                                        <li <c:if test="${pb.pageNum==i }">class="active"</c:if>>
                                            <a
                                            href="javaScript:pageTo('${i}')">${i}</a>
                                        </li>
                                    </c:forEach>
                                </c:if>
                                <!-- 当总页数大于7时 -->
                                <c:if test="${pb.pages>7}">
                                    <!-- 当前页数小于等于4时,显示1到5...最后一页 -->
                                    <c:if test="${pb.pageNum<=4}">
                                        <c:forEach begin="1" end="5" var="i">
                                            <li <c:if test="${pb.pageNum==i }">class="active"</c:if>>
                                                <a
                                                href="javaScript:pageTo('${i}')">${i}</a>
                                            </li>
                                        </c:forEach>
                                        <li><a href="#">...</a></li>
                                        <li
                                            <c:if test="${pb.pageNum==pb.pages }">class="active"</c:if>>
                                            <a
                                            href="javaScript:pageTo('${pb.pages}')">${pb.pages}</a>
                                        </li>
                                    </c:if>
                                    <!-- 当前页数大于4时,如果当前页小于总页码书-3,则显示1...n-1,n,n+1...最后一页 -->
                                    <c:if test="${pb.pageNum>4}">
                                        <c:if test="${pb.pageNum<pb.pages-3}">
                                            <li><a
                                                href="javaScript:pageTo('${1}')">${1}</a>
                                            </li>
                                            <li><a href="#">...</a></li>
                                            <c:forEach begin="${pb.pageNum-1 }" end="${pb.pageNum+1 }"
                                                var="i">
                                                <li <c:if test="${pb.pageNum==i }">class="active"</c:if>>
                                                    <a
                                                    href="javaScript:pageTo('${i}')">${i}</a>
                                                </li>
                                            </c:forEach>
                                            <li><a href="#">...</a></li>
                                            <li
                                                <c:if test="${pb.pageNum==pb.pages }">class="active"</c:if>>
                                                <a
                                                href="javaScript:pageTo('${pb.pages}')">${pb.pages}</a>
                                            </li>
                                        </c:if>
                                    </c:if>
                                    <!-- 当前页数大于4时,如果当前页大于总页码书-4,则显示1...最后一页-3,最后一页-2,最后一页-1,最后一页 -->
                                    <c:if test="${pb.pageNum>pb.pages-4}">
                                        <li><a
                                            href="javaScript:pageTo('${1}')">${1}</a>
                                        </li>
    
                                        <li><a href="#">...</a></li>
                                        <c:forEach begin="${pb.pages-3 }"
                                            end="${pb.pages }" var="i">
                                            <li <c:if test="${pb.pageNum==i }">class="active"</c:if>>
                                                <a
                                                href="javaScript:pageTo('${i}')">${i}</a>
                                            </li>
                                        </c:forEach>
                                    </c:if>
                                </c:if>
                                <!-- 下一页  -->
                                <!-- 当当前页码为最后一页或者最后一页为0时,隐藏下一页按钮
                                                           当当前页码不等于总页码时,跳转下一页  -->
                                <li
                                    <c:if test="${pb.pageNum==pb.pages || pb.pages==0}">class="disabled"</c:if>>
                                    <a
                                    <c:if test="${pb.pageNum==pb.pages || pb.pages==0 }">href="javaScript:void(0)"</c:if>
                                    <c:if test="${pb.pageNum!=pb.pages }">href="javaScript:pageTo('${pb.pageNum+1 }')"</c:if>>下一页</a>
                                </li>
                            </ul>
                            
                            <!-- 跳转页 -->
                          <%--   <div class="jump">
                                <span class="jump_text">共有${pb.pages }页,${totalElements }条记录,跳到
                                    <input type="text" name="jumpPage"
                                    id="jumpPage"
                                    onkeyup="this.value=this.value.replace(/[^0-9-]+/,'');">页
                                    <button type="button" class="btn btn-primary btn-xs"
                                        onclick="goPage()">GO</button>
                                </span>
                            </div> --%>
    
                        <div style="clear: both;"></div>
            
                    </div>
            <!-- 分页结束=======================        -->

</body>
</html>

3. 传统方式分页教程

 

https://my.oschina.net/springMVCAndspring/blog/1831977

4. 附件

源码:

码云:

https://gitee.com/Luck_Me/paging_demo/tree/master

百度云:

    链接:https://pan.baidu.com/s/1pjW9pQmPxib8aubUfAQRxA 
提取码:mmyp 
 

 

© 著作权归作者所有

共有 人打赏支持
Lucky_Me
粉丝 10
博文 209
码字总数 76251
作品 0
美国
私信 提问
bootstrap && layui 两种分页的实现

最近做的项目中后台界面用的layui框架,前台界面用的是boostrap框架,这就导致我在做分页的过程中要考虑前台两种分页的动态实现,现在我已经爬出这个坑了,哈哈,给大家分享一下,写的不好的...

爱前端的小白
2017/09/09
0
0
Laravel --实战篇 (自定义分页类)

前言 : 框架中有封装好的分页类方法,但是这个方法如果是在数据量比较大的项目中,无疑是在无形中给项目挖了一个隐藏的坑,因为如果是看DB类源码的分页基础是把所有的数据都拿了,只不过根据给...

zhiqiangw
2016/10/06
21
0
freemarker实现分页 jsp实现分页 java内存分页

很多时候我们都会用到分页,模版渲染有的用的是jsp,velocity,freemarker。。。 今天搞了下分页的发现有点烧脑,哈。首先后台进行分页的时候会直接在sql里面实现,这个都大同小异,这里来说...

雨翔河
2016/09/28
62
1
Vue.js分页组件实现:diVuePagination

完整版下载地址:https://gitee.com/dgx/diVuePagination 完整版演示地址:http://dgx.gitee.io/divuepagination/#/ 一.准备工总 利用vue-cli和webpack如何快速搭建一个项目我们已经有过介绍...

透笔度
2017/10/20
0
1
使用 vue2.0 实现一个简洁的分页组件

前言 使用 vue-cli 初始化项目 使用 vuex 管理数据 node v6.9.2,npm v3.10.9 分页效果预览: 在线 demo github 地址 分页效果截图 分页原理 实现分页主要依靠两个参数,偏移量(offset)、限...

一颗板栗
2017/04/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

嵌入式应用选择合适的微控制器

准备所需硬件接口列表 使用微控制器的基本硬件框图,准备一份微控制器需要支持的所有外设接口的列表。微控制器中有两种常见的接口类型需要列出。第一种是通信接口,这些是外围设备,如USB,S...

linuxCool
15分钟前
2
0
Group by使用

概述 GROUP BY我们可以先从字面上来理解,GROUP表示分组,BY后面写字段名,就表示根据哪个字段进行分组,如果有用Excel比较多的话,GROUP BY比较类似Excel里面的透视表。 GROUP BY必须得配合...

小橙子的曼曼
26分钟前
3
0
机械臂写中文

Make Me a Hanzi https://www.skishore.me/makemeahanzi/ 使用uArm Swift Pro机械臂写中文-毛笔字 https://github.com/makelove/Robot_Arm_Write_Chinese...

itfanr
38分钟前
4
0
OSChina 周三乱弹 —— 孤独到都和病毒发生了感情了

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @-冰冰棒- :#今日歌曲推荐# 逃跑计划《一万次悲伤 (Live)》 《一万次悲伤 (Live)》- 逃跑计划 手机党少年们想听歌,请使劲儿戳(这里) 现在...

小小编辑
今天
1K
14
test

//// main.c// Test//// Created by 吕颖 on 2019/1/16.// Copyright © 2019年 carmen. All rights reserved.//#include <stdio.h>#include <stdlib.h>#include <t......

carmen-ly
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部