jsp + jquery 分页插件 （适用分页较多的情况）

最新推荐文章于 2021-08-05 19:36:23 发布
最新推荐文章于 2021-08-05 19:36:23 发布
阅读量1.5k 收藏
点赞数
文章标签： jsp jquery 分页 jquery jsp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lanyingtianshiabc/article/details/17261735
版权

效果图：




<%@ page language="java" contentType="text/html; charset=utf-8"

pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="../resource/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">


var currentpage_static=0;
var datanum_static=0;
var pagesize_static=0;
var maxpagesize_static=0;
//初始化参数
function  initpages(datanum,pagesize,maxpagesize,currentpage){
//求商
var  pagenum=parseInt(datanum/pagesize);
//求余
var  lastpage=(datanum%pagesize);
//总页数
if(lastpage>0){
pagenum++;
}
//公共变量赋值
currentpage_static=currentpage;
datanum_static=datanum;
pagesize_static=pagesize;
maxpagesize_static=maxpagesize;

//组件赋值
$("#pagenum").empty();
$("#datanum").empty();
$("#pagesize").empty();
$("#currentpage").empty();


$("#pagenum").append(pagenum);
$("#datanum").append(datanum);
$("#pagesize").append(pagesize);
$("#currentpage").append(currentpage);

    pagegroup(pagenum,maxpagesize,currentpage);

}
//将页码进行分组
function  pagegroup(pagenum,maxpagesize,currentpage){
    //页码总数
var pages=parseInt(pagenum/maxpagesize);
if(pagenum%maxpagesize>0)
pages++;
//当前页

var curpage=0;
if(currentpage<pagenum){
curpage=parseInt(currentpage/maxpagesize);
if(currentpage%maxpagesize>0)
curpage++;
}else{
curpage=pages;
currentpage_static=pagenum;
}

if(curpage==1){
$("#lastgroupid").attr('disabled',true);
}else{
$("#lastgroupid").attr('disabled',false);
}

if(currentpage==1){
//$("#lastpage").hide();
$("#lastpage").attr('disabled',true);

}else{
$("#lastpage").attr('disabled',false);
}
if(currentpage>=pagenum){
currentpage=pagenum;
$("#nextpage").attr('disabled',true);
}else{
$("#nextpage").attr('disabled',false);
}

//当前所在的第一条数据
var currentfirstpage=(curpage-1)*maxpagesize+1;
//当前所在的最后一条数据
var currentlastpage=0;
if(curpage==pages){
currentlastpage=pagenum;
$("#nextgroupid").attr('disabled',true);
}else{
//非尾页
  currentlastpage=curpage*maxpagesize;
$("#nextgroupid").attr('disabled',false);
}
//展示
$("#pagelist").empty();
for(var i=currentfirstpage;i<=currentlastpage;i++){
var pagehref=null;    
if(i==currentpage){
 pagehref= '<a  href="javascript:void(0)" οnclick="listbypage('+i+')"  style="color: red;">'+i+'</a>';
   }else{
    pagehref= '<a  href="javascript:void(0)" οnclick="listbypage('+i+')" style="color: black;">'+i+'</a>';
   }
$("#pagelist").append(pagehref+"    ");
}

}




//返回跳转的页码
function  jumpTopage(){
currentpage_static=parseInt($("#jumpTo").val());
initpages(datanum_static,pagesize_static,maxpagesize_static,currentpage_static);
usersubmit(currentpage_static);
}


//点击下一组方法
function   nextpagegroup(){
currentpage_static=currentpage_static+20;
initpages(datanum_static,pagesize_static,maxpagesize_static,currentpage_static);
usersubmit(currentpage_static);
}


//点击上一组方法
function   lastpagegroup(){
currentpage_static=currentpage_static-20;
initpages(datanum_static,pagesize_static,maxpagesize_static,currentpage_static);
usersubmit(currentpage_static);


}
//上一页
function  lastpage(){
currentpage_static=currentpage_static-1;
initpages(datanum_static,pagesize_static,maxpagesize_static,currentpage_static);
usersubmit(currentpage_static);
}
//下一页
function  nextpage(){
currentpage_static=currentpage_static+1;
initpages(datanum_static,pagesize_static,maxpagesize_static,currentpage_static);
usersubmit(currentpage_static);
}


//点击页码
function listbypage(page){
currentpage_static=parseInt(page);
initpages(datanum_static,pagesize_static,maxpagesize_static,currentpage_static);
usersubmit(currentpage_static);
}




/*******************用户扩展****************************/
//用户重写提交方法
/* function   usersubmit(page){
window.location.href="./chaxun.jsp?currentpage="+page; 
} */

/*

用法：举例

<%@ include file="/zfpj/pages.jsp" %>
<script>
//分页
var currentpage=1;
currentpage=(<%=request.getParameter("currentpage") %>==null)?1:<%=request.getParameter("currentpage") %>;

/*
1.数据总数
2.每页显示数据数
3.最多显示页数（用于数据量很大的情况）
4.当前页码
*/
initpages(10000,20,20,currentpage);


function   usersubmit(page){
window.location.href="./chaxun.jsp?currentpage="+page; 
}


</script>


*/



</script>
</head>
<body>
<div style="display: inline;">
<!-- 跳转页面  用于submit提交 -->
<input type="hidden" id="topagenum" name="topagenum" />
<button id="lastpage" οnclick="lastpage()"> 上一页</button>
<button id="lastgroupid" οnclick="lastpagegroup()"> << </button>
</div>
<div style="display: inline;" id="pagelist">

</div>
<div style="display: inline;">
<button id="nextgroupid" οnclick="nextpagegroup()">>></button>
<button id="nextpage"οnclick="nextpage()"> 下一页</button>
    第<div style="display: inline;" id="currentpage"></div>页    
    共<div style="display: inline;" id="pagenum"></div>页     
    共<div style="display: inline;" id="datanum"></div>条    
  每页<div style="display: inline;" id="pagesize"></div>条  
 
转到<input type="text" id="jumpTo" style="width: 30px"/> 页 
<button οnclick="jumpTopage()">跳转</button>
    </div>


</body>
</html>
蓝婴天使
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jsp分页插件
05-27
java 简单分页工具， 包含css,js,jsp代码
JSP分页插件
04-26
很好用的分页插件，只要查询结果是一个集合都可以使用，使用前将jar包放置web目录下，tld文档放置WEB-INF根目录下即可，每个调用页面引入标签，将集合放入循环即可。
jsp + jquery 分页组件
漫无目的猿猿的博客
11-03 454
背景： 最近公司买了一套其他公司的代码，其中后台管理系统是用的jsp开发的，好多年前的技术不接触都有点忘了，自动前后端分离后，前端不学后端，后端不学前端的知识，其中负责维护该项目的后端同事也是听悲催的，没接触过呀，于是找到前端帮忙做下改功能，是一个简单的表格的展示。 于是抽出了两个小时写了个表格分页的组件。什么？你问我为什么花了这么久，jquery 写的页面，然后还需要嵌入的jsp中，都忘的差不多了好吗。。。。废话不多説，直接上代码。 先看下效果图 然后是代码 <!DOCTYPE ht
分页jsp插件，分页插件
09-14
分页jsp，将该jsp引入需要分页的页面，传入参数就行。通过将页面引入，可实现单个点击分页，也可实现，输入数字分页。
jQuery分页插件jquery.pagination.js使用方法解析
01-21
jquery.pagination.js插件，此jQuery插件为Ajax分页插件，一次性加载全部数据，故分页切换时无刷新与延迟，只是重写指定dom元素中的html内容，如果数据量较大不建议用此方法，因为加载会比较慢； jQuery的多数插件...
jquery分页插件结合jsp实例
06-12
本教程将详细介绍如何使用jQuery分页插件与JavaServer Pages（JSP）结合，实现一个高效的分页功能。我们将重点讨论jQuery分页插件jPagination的使用方法，以及它与JSP的集成。 首先，`jQuery`是一种轻量级的...
Servlet+jsp+AJax的分页及增删改查
06-13
在本文中，我们将深入探讨如何使用Servlet、JSP和Ajax技术实现一个完整的增删改查（CRUD）功能以及分页。Servlet是Java Web应用程序的一部分，用于处理客户端请求和响应。JSP则是一种动态网页技术，它允许在服务器端...
利用JQuery写一个简单的异步分页插件
11-23
这个插件适用于需要动态加载数据的Web应用程序，特别是在用户界面中展示大量数据时，分页能提高用户体验并减少页面加载时间。 首先，我们需要理解异步分页的基本原理。在异步分页中，前端页面通过发送Ajax请求获取...
分页 下一页翻书特效_SSM 框架！实现分页和搜索分页
weixin_39732825的博客
12-05 135
点击上方 "程序员小乐"关注公众号, 星标或置顶一起成长 每天凌晨00点00分, 第一时间与你相约 每日英文 We don't need to meet again for we are just passers by.To forget is the best commemoration for each other. 很多人不需要再见，因为只是路过而已。遗忘就是我们给彼此最好的纪念。 每...
jsp分页插件(内附源码)
12-19
一款非常通用的jsp分页插件，相信这款插件是所有程序员的最爱。不需要写任何的代码，只需要引用插件就可以了（内附有源码）。
jsp分页插件--PageBean(java源码)
01-14
/* * @(#)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; } }
JspPageControlor分页插件
03-24
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日
jsp ajax 分页插件,jQuery分页插件(原创)
weixin_26820427的博客
08-05 112
插件描述：基于jQuery简单的分页器更新时间：2019/1/17 上午8:16:40更新说明：修改了一个bug，在调用的时候初始化，防止重复生成分页器。备注：目前无法自定义显示的页码数，只能固定显示10个。日后会考虑增加自定义显示页码数。使用方法HTML结构：父div里面包着一个子div，子div类名不可变，父div不一定需要用id，类名也可以js调用：Pagination({ele:'#el...
一个JSP分页组件
javatwt的专栏
03-02 1682
简单实用，拿到这里和大家一起分享. package page;import java.util.List;import java.util.Vector; public class Pagination {  private int 
JSP分页插件及其详解
08-12
JSP分页插件及其详解，插件功能能够实现分页及其登陆验证的实现等功能
Struts2.1.6+jQuery Flexigrid 实现JSON分页与Ajax交互
本文档主要介绍了如何在Struts2.1.6框架下结合Spring、Hibernate、jQuery、Flexigrid、Thickbox和MySQL技术实现动态数据分页显示。以下是详细步骤和关键知识点： 1. **技术栈组合**: - Struts2.1.6: 作为Web MVC...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值