分页 下一页翻书特效_SSM 框架!实现分页和搜索分页

点击上方 "程序员小乐"关注公众号, 星标或置顶一起成长

每天凌晨00点00分, 第一时间与你相约

每日英文

We don't need to meet again for we are just passers by.To forget is the best commemoration for each other.

很多人不需要再见,因为只是路过而已。遗忘就是我们给彼此最好的纪念。

每日掏心话

走远了再回头看,很多人已经淡忘,只有很少的人牵连着我们的幸福与快乐,这才是我们真正要珍惜的地方。

来自:在路上 | 责编:乐乐

链接:blog.csdn.net/zhshulin

74a8da5538099c9f33153316cdf93a5f.png

程序员小乐(ID:study_tech)第 659 次推文 图片来自网络

往日回顾:你不知道的 IDEA Debug 调试小技巧!

正文

分页是Java Web项目常用的功能,昨天在Spring MVC中实现了简单的分页操作和搜索分页,在此记录一下。使用的框架为(MyBatis+SpringMVC+Spring)。

首先我们需要一个分页的工具类:

1.分页

import java.io.Serializable;
/**
* 分页
*/
public class Page implements Serializable {
private static final long serialVersionUID = -3198048449643774660L;
private int pageNow = 1; // 当前页数
private int pageSize = 4; // 每页显示记录的条数
private int totalCount; // 总的记录条数
private int totalPageCount; // 总的页数
@SuppressWarnings("unused")
private int startPos; // 开始位置,从0开始
@SuppressWarnings("unused")
private boolean hasFirst;// 是否有首页
@SuppressWarnings("unused")
private boolean hasPre;// 是否有前一页
@SuppressWarnings("unused")
private boolean hasNext;// 是否有下一页
@SuppressWarnings("unused")
private boolean hasLast;// 是否有最后一页
/**
* 通过构造函数 传入 总记录数 和 当前页
* @param totalCount
* @param pageNow
*/
public Page(int totalCount, int pageNow) {
this.totalCount = totalCount;
this.pageNow = pageNow;
}
/**
* 取得总页数,总页数=总记录数/总页数
* @return
*/
public int getTotalPageCount() {
totalPageCount = getTotalCount() / getPageSize();
return (totalCount % pageSize == 0) ? totalPageCount
: totalPageCount + 1;
}
public void setTotalPageCount(int totalPageCount) {
this.totalPageCount = totalPageCount;
}
public int getPageNow() {
return pageNow;
}
public void setPageNow(int pageNow) {
this.pageNow = pageNow;
}
public int getPageSize() {
return pageSize;
}
public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}
public int getTotalCount() {
return totalCount;
}
public void setTotalCount(int totalCount) {
this.totalCount = totalCount;
}
/**
* 取得选择记录的初始位置
* @return
*/
public int getStartPos() {
return (pageNow - 1) * pageSize;
}
public void setStartPos(int startPos) {
this.startPos = startPos;
}
/**
* 是否是第一页
* @return
*/
public boolean isHasFirst() {
return (pageNow == 1) ? false : true;
}
public void setHasFirst(boolean hasFirst) {
this.hasFirst = hasFirst;
}
/**
* 是否有首页
* @return
*/
public boolean isHasPre() {
// 如果有首页就有前一页,因为有首页就不是第一页
return isHasFirst() ? true : false;
}
public void setHasPre(boolean hasPre) {
this.hasPre = hasPre;
}
/**
* 是否有下一页
* @return
*/
public boolean isHasNext() {
// 如果有尾页就有下一页,因为有尾页表明不是最后一页
return isHasLast() ? true : false;
}
public void setHasNext(boolean hasNext) {
this.hasNext = hasNext;
}
/**
* 是否有尾页
* @return
*/
public boolean isHasLast() {
// 如果不是最后一页就有尾页
return (pageNow == getTotalCount()) ? false : true;
}
public void setHasLast(boolean hasLast) {
this.hasLast = hasLast;
}
}

有了这个工具类后,首先编写MyBatis的XxxxMapper.xml配置文件中的SQL语句,如下:


select
*
from 表名 WHERE user_id = #{userId,jdbcType=INTEGER} limit #{startPos},#{pageSize}
SELECT COUNT(*) FROM 表名 WHERE user_id = #{userId,jdbcType=INTEGER}

此处我们可以看到,2个需要分别传入3个和1个参数,此时在对应的DAO文件IXxxxDao中编写接口来编写对应的方法,方法名和mapper.xml中的id属性值一致:

/**
* 使用注解方式传入多个参数,用户产品分页,通过登录用户ID查询
* @param page
* @param userId
* @return startPos},#{pageSize}
*/
public List selectProductsByPage(@Param(value="startPos") Integer startPos,@Param(value="pageSize") Integer pageSize,@Param(value="userId") Integer userId);
/**
* 取得产品数量信息,通过登录用户ID查询
* @param userId
* @return
*/
public long getProductsCount(@Param(value="userId") Integer userId);

接口定义完成之后需要编写相应的业务接口和实现方法,在接口中定义这样一个方法,然后实现类中覆写一下:

/**
* 分页显示商品
* @param request
* @param model
* @param loginUserId
*/
void showProductsByPage(HttpServletRequest request,Model model,int loginUserId);

接下来实现类中的方法就是要调用DAO层和接受Controller传入的参数,进行业务逻辑的处理,request用来获取前端传入的参数,model用来向JSP页面返回处理结果。

@Override
public void showProductsByPage(HttpServletRequest request, Model model,int loginUserId) {
String pageNow = request.getParameter("pageNow");
Page page = null;
List products = new ArrayList();
int totalCount = (int) productDao.getProductsCount(loginUserId);
if (pageNow != null) {
page = new Page(totalCount, Integer.parseInt(pageNow));
allProducts = this.productDao.selectProductsByPage(page.getStartPos(), page.getPageSize(), loginUserId);
} else {
page = new Page(totalCount, 1);
allProducts = this.productDao.selectProductsByPage(page.getStartPos(), page.getPageSize(), loginUserId);
}
model.addAttribute("products

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JspPageControlor分页插件使用说明 1、次插件将数据库查询和分页操作分离开,在查询的时候,不管采用什么设计模式,都必须实现 PageListener接口。 2、接口里面包含四个方法 (1)、publicListdoSelect(intrecordStart,intsizePage),参数recordStart表示从第几条 记录开始查询。参数sizePage表示一次查几条记录。返回一个list对象(该list对象可以是 一个记录集,也可以是一个POJO类对象) (2)、publicintgetCount(),查询该表中的记录总数,返回一个int对象。 (3)、publicvoidclose(),放置所有关闭操作的方法。 3、调用页面,必须添加PageListener******,即实现addPageListener(Object)方法,参数为操作 数据库类的对象。 4、用getRecord()方法获取存有记录的list对象; 用getFirstPage()方法获取'首页'的标记; 用getPageUp()方法获取'上一页'的标记; 用getPageDown()方法获取'下一页'的标记; 用getLastPage()方法获取'末页'的标记; 用getPageForward()方法获取'跳转到第几页'的输入框标记; 用getCountRecord()方法获取总记录数; 用getCountPage()方法获取总页数; 用getCurrentPage()方法获取当前页数; 5、如果需要把上一页,下一页等标记换成图片,则只需调用 setPageDown('图片路径+图片名'), setPageUp('图片路径+图片名'), setFirstPage('图片路径+图片名'), setLastPage('图片路径+图片名'); 详细操作请查看帮助文档和具体实现案例; PageControlor分页插件(次插件仅支持jsp) 包含3个文件: PageControlor分页插件; 分页的帮助文档; 分页插件使用案例; 运行使用具体案例时,须注意以下几点: 1、运行环境为jdk(1.4以上),Tomcat(5.0以上),mysql(5.0.x); 2、运行时须改动init.properties,把数据库名,用户名和密码改称自己数据库的设置; 3、将news.sql文件导入到您的mysql服务里面。 开发者:千里web架构实验室成员--刘捷 2007年10月29日
/* * @(#)PageControl.java 1.00 2004-9-22 * * Copyright 2004 2004 . All rights reserved. * PROPRIETARY/CONFIDENTIAL. Use is subject to license terms. */ package com.hexiang.utils; /** * PageControl, 分页控制, 可以判断总页数和是否有上下页. * * 2008-07-22 加入输出上下分页HTML代码功能 * * @author HX * @version 1.1 2008-9-22 */ public class PageBean { /** 每页显示记录数 */ private int pageCount; /** 是否有上一页 */ private boolean hasPrevPage; /** 记录总数 */ private int recordCount; /** 是否有下一页 */ private boolean hasNextPage; /**总页面数 */ private int totalPage; /** 当前页码数 */ private int currentPage; /** * 分页前的页面地址 */ private String pageUrl; /** * 输出分页 HTML 页面跳转代码, 分链接和静态文字两种. * 2008-07-22 * @return HTML 代码 */ public String getPageJumpLinkHtml() { if(StringUtil.isEmpty(pageUrl)) { return ""; } // 检查是否有参数符号, 没有就加上一个? if(pageUrl.indexOf('?') == -1) { pageUrl = pageUrl + '?'; } StringBuffer buff = new StringBuffer("<span id='pageText'>"); // 上一页翻页标记 if(currentPage > 1) { buff.append("[ <a href='" + pageUrl + "&page=" + (currentPage - 1) + "' title='转到第 " + (currentPage - 1) + " 页'>上一页</a> ] "); } else { buff.append("[ 上一页 ] "); } // 下一页翻页标记 if(currentPage < getTotalPage()) { buff.append("[ <a href='" + pageUrl + "&page=" + (currentPage + 1)+ "' title='转到第 " + (currentPage + 1) + " 页'>下一页</a> ] "); } else { buff.append("[ 下一页 ] "); } buff.append("</span>"); return buff.toString(); } /** * 输出页码信息: 第${currentPage}页/共${totalPage}页 * @return */ public String getPageCountHtml() { return "第" + currentPage + "页/共" + getTotalPage() + "页"; } /** * 输出 JavaScript 跳转函数代码 * @return */ public String getJavaScriptJumpCode() { if(StringUtil.isEmpty(pageUrl)) { return ""; } // 检查是否有参数符号, 没有就加上一个? if(pageUrl.indexOf("?") == -1) { pageUrl = pageUrl + '?'; } return "<script>" + "// 页面跳转函数\n" + "// 参数: 包含页码的表单元素,例如输入框,下拉框等\n" + "function jumpPage(input) {\n" + " // 页码相同就不做跳转\n" + " if(input.value == " + currentPage + ") {" + " return;\n" + " }" + " var newUrl = '" + pageUrl + "&page=' + input.value;\n" + " document.location = newUrl;\n" + " }\n" + " </script>"; } /** * 输出页面跳转的选择框和输入框. 示例输出: * <pre> 转到 <!-- 输出 HTML SELECT 元素, 并选中当前页面编码 --> <select onchange='jumpPage(this);'> <c:forEach var="i" begin="1" end="${totalPage}"> <option value="${i}" <c:if test="${currentPage == i}"> selected </c:if> >第${i}页</option> </c:forEach> </select> 输入页码:<input type="text" value="${currentPage}" id="jumpPageBox" size="3"> <input type="button" value="跳转" onclick="jumpPage(document.getElementById('jumpPageBox'))"> </pre> * @return */ public String getPageFormJumpHtml() { String s = "转到\n" + "\t <!-- 输出 HTML SELECT 元素, 并选中当前页面编码 -->\n" + " <select onchange='jumpPage(this);'>\n" + " \n"; for(int i = 1; i <= getTotalPage(); i++ ) { s += "<option value=" + i + "\n"; if(currentPage == i) { s+= " selected "; } s += "\t>第" + i + "页</option>\n"; } s+= " </select>\n" + " 输入页码:<input type=\"text\" value=\"" + currentPage + "\" id=\"jumpPageBox\" size=\"3\"> \n" + " <input type=\"button\" value=\"跳转\" onclick=\"jumpPage(document.getElementById('jumpPageBox'))\"> "; return s; } /** * 进行分页计算. */ private void calculate() { if (getPageCount() == 0) { setPageCount(1); } totalPage = (int) Math.ceil(1.0 * getRecordCount() / getPageCount()); // 总页面数 if (totalPage == 0) totalPage = 1; // Check current page range, 2006-08-03 if(currentPage > totalPage) { currentPage = totalPage; } // System.out.println("currentPage=" + currentPage); // System.out.println("maxPage=" + maxPage); // // Fixed logic error at 2004-09-25 hasNextPage = currentPage < totalPage; hasPrevPage = currentPage > 1; return; } /** * @return Returns the 最大页面数. */ public int getTotalPage() { calculate(); return totalPage; } /** * @param currentPage * The 最大页面数 to set. */ @SuppressWarnings("unused") private void setTotalPage(int maxPage) { this.totalPage = maxPage; } /** * 是否有上一页数据 */ public boolean hasPrevPage() { calculate(); return hasPrevPage; } /** * 是否有下一页数据 */ public boolean hasNextPage() { calculate(); return hasNextPage; } // Test public static void main(String[] args) { PageBean pc = new PageBean(); pc.setCurrentPage(2); pc.setPageCount(4); pc.setRecordCount(5); pc.setPageUrl("product/list.do"); System.out.println("当前页 " + pc.getCurrentPage()); System.out.println("有上一页 " + pc.hasPrevPage()); System.out.println("有下一页 " + pc.hasNextPage()); System.out.println("总页面数 " + pc.getTotalPage()); System.out.println("分页 HTML 代码 " + pc.getPageJumpLinkHtml()); } /** * @return Returns the 当前页码数. */ public int getCurrentPage() { return currentPage; } /** * 设置当前页码, 从 1 开始. * @param currentPage * The 当前页码数 to set. */ public void setCurrentPage(int currentPage) { if (currentPage <= 0) { currentPage = 1; } this.currentPage = currentPage; } /** * @return Returns the recordCount. */ public int getRecordCount() { return recordCount; } /** * @param recordCount * The recordCount to set. */ public void setRecordCount(int property1) { this.recordCount = property1; } /** * @return Returns the 每页显示记录数. */ public int getPageCount() { return pageCount; } /** * @param pageCount * The 每页显示记录数 to set. */ public void setPageCount(int pageCount) { this.pageCount = pageCount; } public String getPageUrl() { return pageUrl; } public void setPageUrl(String value) { pageUrl = value; } }
SSM框架中,使用JavaScript实现分页的方法如下: 1. 在页面中添加分页所需的HTML元素,如下: ``` <div id="pageDiv"> <ul class="pagination"> <li><a href="javascript:void(0);" onclick="toPage(1)">首页</a></li> <li><a href="javascript:void(0);" onclick="toPage(pageNum-1)">上一页</a></li> <li><a href="javascript:void(0);" onclick="toPage(pageNum+1)">下一页</a></li> <li><a href="javascript:void(0);" onclick="toPage(pages)">末页</a></li> </ul> </div> ``` 其中,toPage函数用于跳转到指定的页码,pageNum表示当前页码,pages表示总页数。 2. 在页面中添加JavaScript代码,用于发送分页请求,如下: ``` <script type="text/javascript"> // 分页请求函数 function toPage(pageNum) { // 发送分页请求 $.ajax({ url: "/user/list", type: "get", data: {pageNum: pageNum}, success: function (data) { $("#tableDiv").html(data); } }); } </script> ``` 其中,$.ajax()函数用于发送分页请求,url表示请求的URL地址,type表示请求的方式,data表示请求的参数,success表示请求成功后的回调函数,data表示服务返回的数据,将其填充到表格中即可。 3. 在Controller中添加分页查询的方法,并返回分页结果,如下: ``` @RequestMapping("/list") public String list(@RequestParam(defaultValue = "1") Integer pageNum, @RequestParam(defaultValue = "10") Integer pageSize, Model model) { // 查询数据 List<User> userList = userService.getUserList(pageNum, pageSize); // 封装分页对象 PageInfo<User> pageInfo = new PageInfo<>(userList); // 将分页对象和数据传递给页面 model.addAttribute("pageInfo", pageInfo); model.addAttribute("userList", userList); return "user/list_table"; } ``` 其中,getUserList方法用于查询数据,PageInfo对象用于封装分页信息,将其传递给页面即可。 4. 在页面中添加表格元素,用于显示分页数据,如下: ``` <div id="tableDiv"> <table class="table table-bordered table-hover"> <thead> <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <!-- 使用Thymeleaf循环遍历用户列表 --> <tr th:each="user : ${userList}"> <td th:text="${user.id}"></td> <td th:text="${user.name}"></td> <td th:text="${user.age}"></td> </tr> </tbody> </table> </div> ``` 其中,使用Thymeleaf循环遍历用户列表,并将查询到的用户数据填充到表格中。 以上就是使用JavaScript实现分页查询的方法,该方法可以自由控制分页请求,实现灵活性较高。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值