一个通用的JavaScript分页

最新推荐文章于 2024-08-09 21:30:00 发布

hongri520

最新推荐文章于 2024-08-09 21:30:00 发布

阅读量340

点赞数

分类专栏： java 文章标签： javascript function stylesheet class xhtml include

本文链接：https://blog.csdn.net/hongri520/article/details/5476667

版权

java 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一个通用的JavaScript分页

1.JavaScript代码

Pagination=function(id)
{
 var totalNum=0;
    var maxNum=10;
 var pageUrl="";
 var breakpage = 5;
 var currentposition = 0;
 var breakspace = 2;
 var maxspace = 4;
 var currentpage=1;
 var perpage=10;
 var id =id;
 this.initPage = function(pageName)
 {
   var count = this.getTotalNum();
    perpage = this.getMaxNum(); 
   if (currentpage==null){
    currentpage = 1;
   }else{
    currentpage = parseInt(currentpage);
   }
   var pagecount = Math.floor(count/perpage)+1;
   
   var pagestr = "";
   var prevnum = currentpage-currentposition;
   var nextnum = currentpage+currentposition;
   if(prevnum<1) prevnum = 1;
   if(nextnum>pagecount) nextnum = pagecount;
   pagestr += (currentpage==1)?'<span class="disabled"> <上一页</span>':'<span><a  href="javascript:'+pageName+'.page_onclick('+(this.getIndexPage()-1)+',/''+pageName+'/')"><上一页</a></span>';
   if(prevnum-breakspace>maxspace){
    for(i=1;i<=breakspace;i++)
    pagestr += '<a href="javascript:'+pageName+'.page_onclick('+i+',/''+pageName+'/')">'+i+'</a>';
    pagestr += '...';
    for(i=pagecount-breakpage+1;i<prevnum;i++)
     pagestr += '<a href="javascript:'+pageName+'.page_onclick('+i+',/''+pageName+'/')">'+i+'</a>';
   }else{
    for(i=1;i<prevnum;i++)
    pagestr += '<a href="javascript:'+pageName+'.page_onclick('+i+',/''+pageName+'/')">'+i+'</a>';
   }
   for(i=prevnum;i<=nextnum;i++){
    pagestr += (currentpage==i)?'<span class="current">'+i+'</span>':'<a href="javascript:'+pageName+'.page_onclick('+i+',/''+pageName+'/')">'+i+'</a>';
   }
   if(pagecount-breakspace-nextnum+1>maxspace){
    for(i=nextnum+1;i<=breakpage;i++)
     pagestr += '<a href="javascript:'+pageName+'.page_onclick('+i+',/''+pageName+'/')">'+i+'</a>';
    pagestr += '<span class="break">...</span>';
    for(i=pagecount-breakspace+1;i<=pagecount;i++)
     pagestr += '<a href="javascript:'+pageName+'.page_onclick('+i+',/''+pageName+'/')">'+i+'</a>';
   }else{
    for(i=nextnum+1;i<=pagecount;i++)
      pagestr += '<a href="javascript:'+pageName+'.page_onclick('+i+',/''+pageName+'/')">'+i+'</a>';
   }
   pagestr += (currentpage==pagecount)?'<span class="disabled">下一页  ></span>':'<a href="javascript:'+pageName+'.page_onclick('+(this.getIndexPage()+1)+',/''+pageName+'/')">下一页  ></a>';
  
      this.$(id).className="manu"
      this.$(id).innerHTML=pagestr;
 }
 this.getTotalNum = function()
 {
  return totalNum;
 };
 this.setTotalNum = function(sTotalNum)
 {
  totalNum = sTotalNum;
 };
 this.getMaxNum = function()
 {
  return maxNum;
 };
 this.setMaxNum=function(sMaxNum)
 {
  maxNum = sMaxNum;
 };
 this.getIndexPage = function()
 {
  return currentpage;
 };
 this.setIndexPage=function(sCurrentPage)
 {
  currentpage =sCurrentPage;
 }; 
 this.page_οnclick=function(num,pageStr)
 {
   this.setIndexPage(num);
   pagination_data();
   this.initPage(pageStr);
 };
 this.$=function(objStr)
 {
  return document.getElementById(objStr);
 }

}
function $(objStr)
{
 return document.getElementById(objStr);
}
function pagination_data()
{
}

2.CSS代码

/* CSS Document */
 /* Paginator */
a img {blr:expression(this.onFocus=this.blur())}
area {blr:expression(this.onFocus=this.blur())}
  
.manu {
 PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; MARGIN: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center; FONT-SIZE: 12px;FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
}
.manu A {
 BORDER-RIGHT: #eee 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #eee 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #eee 1px solid; COLOR: #036cb4; PADDING-TOP: 2px; BORDER-BOTTOM: #eee 1px solid; TEXT-DECORATION: none
}
.manu A:hover {
 BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid; BORDER-LEFT: #999 1px solid; COLOR: #666; BORDER-BOTTOM: #999 1px solid
}
.manu A:active {
 BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid; BORDER-LEFT: #999 1px solid; COLOR: #666; BORDER-BOTTOM: #999 1px solid
}
.manu .current {
 BORDER-RIGHT: #036cb4 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #036cb4 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #036cb4 1px solid; COLOR: #fff; PADDING-TOP: 2px; BORDER-BOTTOM: #036cb4 1px solid; BACKGROUND-COLOR: #036cb4
}
.manu .disabled {
 BORDER-RIGHT: #eee 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #eee 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #eee 1px solid; COLOR: #ddd; PADDING-TOP: 2px; BORDER-BOTTOM: #eee 1px solid
}

3.使用例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@include file="/common/taglibs/taglibs.jsp"%>
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <link
   href="${pageContext.request.contextPath}/common/css/pagination.css"
   rel="stylesheet" type="text/css" />
  <script
   src="${pageContext.request.contextPath}/common/js/page-common.js"></script>
 </head>
 <body>

<div id="12333"></div>
<script>
 var page = new Pagination("12333");
 page.setTotalNum(1000);//总共有多少条
 page.setMaxNum(20);//每页显示的条数
       page.setIndexPage(1);//当前所在第几页
       page.initPage("page");//初始化页面
 function pagination_data()
 {
  alert(page.getIndexPage()+":"+page.getMaxNum());
 }
</script>
 </body>
</html>

hongri520

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
一个通用的JavaScript分页

一个通用的JavaScript分页1.JavaScript代码 Pagination=function(id){ var totalNum=0; var maxNum=10; var pageUrl=""; var breakpage = 5; var currentposition = 0; var breakspace = 2;
复制链接

扫一扫

专栏目录