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

来源：互联网发布：球球大作战代点软件编辑：程序博客网时间：2024/06/11 17:25

效果图：

<%@ 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)" onclick="listbypage('+i+')" style="color: red;">'+i+'</a>';
}else{
pagehref= '<a href="javascript:void(0)" onclick="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;">

<input type="hidden" id="topagenum" name="topagenum" />
<button id="lastpage" onclick="lastpage()"> 上一页</button>
<button id="lastgroupid" onclick="lastpagegroup()"> << </button>
</div>
<div style="display: inline;" id="pagelist">

</div>
<div style="display: inline;">
<button id="nextgroupid" onclick="nextpagegroup()">>></button>
<button id="nextpage"onclick="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 onclick="jumpTopage()">跳转</button>
</div>

</body>
</html>

0 0

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

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