Posted in Javascript onAugust 12, 2015
下面是一段javascript实现的分页代码，当然必须要结合后台代码实现。大家可以自行分析一下代码，希望能够给大家带来一定的帮助,代码如下:
<script type="text/javascript">
function setPage(opt)
{
if(!opt.pageDivId || opt.allPageNum < opt.curpageNum || opt.allPageNum < opt.showPageNum)
{
return false
}
var allPageNum=opt.allPageNum; //总的页数
var showPageNum=opt.showPageNum; //显示的页数
var curpageNum=opt.curpageNum; // 当前的页数
var pageDIvBox=document.getElementById(opt.pageDivId);
//左边或右边显示页码的个数
var lrNum=Math.floor(showPageNum/2);
if(curpageNum>1)
{
var oA=document.createElement('a');
oA.href='#1';
oA.innerHTML='首页'
pageDIvBox.appendChild(oA);
}
if(curpageNum>1)
{
var oA=document.createElement('a');
oA.href='#'+(curpageNum-1);
oA.innerHTML='上一页'
pageDIvBox.appendChild(oA);
}
if(curpageNum<showPageNum-2||allPageNum==showPageNum)
{
for(var i=1;i<=showPageNum;i++)
{
var oA = document.createElement('a');
oA.href = '#'+i;
if(curpageNum==i)
{
oA.innerHTML = i;
}
else
{
oA.innerHTML = "[" + i + "]";
}
pageDIvBox.appendChild(oA);
}
}
else
{
//倒数第一页的处理
if(allPageNum-curpageNum<lrNum && curpageNum == allPageNum-1)
{
for(var i=1;i<=showPageNum;i++)
{
console.log((curpageNum - showPageNum + i));
var oA = document.createElement('a');
oA.href = '#'+ (curpageNum - (showPageNum-1) + i);
if(curpageNum == (curpageNum - (showPageNum-1) + i))
{
oA.innerHTML = (curpageNum - (showPageNum-1) + i)
}
else
{
oA.innerHTML = '['+(curpageNum - (showPageNum-1) + i)+']'
}
pageDIvBox.appendChild(oA);
}
}
//最后一页的处理
else if(allPageNum-curpageNum<lrNum && curpageNum == allPageNum)
{
for(var i=1;i<=showPageNum;i++)
{
console.log((curpageNum - showPageNum + i));
var oA = document.createElement('a');
oA.href = '#'+ (curpageNum - showPageNum + i);
if(curpageNum == (curpageNum - showPageNum + i))
{
oA.innerHTML = (curpageNum - showPageNum + i)
}
else
{
oA.innerHTML = '['+(curpageNum-showPageNum + i)+']'
}
pageDIvBox.appendChild(oA);
}
}
else
{
for(var i=1;i<=showPageNum;i++)
{
var oA = document.createElement('a');
oA.href = '#'+ (curpageNum - (showPageNum-lrNum) + i);
if(curpageNum == (curpageNum - (showPageNum-lrNum) + i))
{
oA.innerHTML = (curpageNum - (showPageNum-lrNum) + i)
}
else
{
oA.innerHTML = '['+(curpageNum - (showPageNum-lrNum) + i)+']'
}
pageDIvBox.appendChild(oA);
}
}
}
if(curpageNum<allPageNum)
{
for(var i=1;i<=2;i++)
{
if(i==1)
{
var oA = document.createElement('a');
oA.href='#'+(parseInt(curpageNum)+1);
oA.innerHTML = '下一页'
}
else
{
var oA = document.createElement('a');
oA.href='#'+allPageNum;
oA.innerHTML = '尾页'
}
pageDIvBox.appendChild(oA);
}
}
var oA = document.getElementsByTagName('a');
//给页码添加点击事件
for(var i=0;i<oA.length;i++)
{
oA[i].onclick = function(){
//当前点的页码
var sHref = this.getAttribute('href').substring(1);
//清空页数显示
pageDIvBox.innerHTML = '';
setPage({
pageDivId:'page',
showPageNum:5, //显示的个数
allPageNum:10, //总页数
curpageNum:sHref //当前页数
})
}
}
}
window.onload=function()
{
setPage({
pageDivId:'page',
showPageNum:5, //显示的个数
allPageNum:10, //总页数
curpageNum:1 //当前页数
})
}
</script>
示例二：
<html>
<head>
<style type="text/css">
body{
font-size:12px;
}
</style>
</head>
<body>
<input type="button" value="分页" onclick="initializePageNav(1)">
<div id="pageDir"></div>
<script language="JavaScript">
<!--
function initializePageNav(iCurrPage)
{
var iPageSize = 20;
var iProCount = 2121;
var b = ((iProCount%iPageSize)!=0);
var iPageCount = parseInt(iProCount/iPageSize)+(b?1:0);
if (iCurrPage > iPageCount) return false;
iCurrPage = parseInt(iCurrPage);
var sTemp = "";
var sTemp1 = "每页:"+ iPageSize +"/<span style='color:red'>"+ iProCount +"</span>条 页数:<span style='color:blue'>"+ iCurrPage +"</span>/"+ iPageCount +"页";
var sTemp2 = "<input type=\"text\" id=\"goPageNo\" value=\""+iCurrPage+"\" size=\"3\" /><input type=\"button\" value=\"GO\" onclick=\"initializePageNav($('goPageNo').value);\" />"
if (iProCount==0)
{
sTemp = "<font color='#cccccc'>首页 上一页 下一页 末页</font>";
}
else if (iPageCount==1)
{
sTemp = "<font color='#cccccc'>首页 上一页 下一页 末页</font>"
}
else if (iPageCount==iCurrPage)
{
sTemp = "<a href='Javascript:initializePageNav(1)'>首页</a> <a href='Javascript:initializePageNav("+(iPageCount-1)+")'>上一页</a> <font color='#cccccc'>下一页 末页</font>"
}
else if (iCurrPage==1)
{
sTemp = "<font color='#cccccc'>首页 上一页 </font><a href='Javascript:initializePageNav("+(iCurrPage+1)+")'>下一页</a> <a href='Javascript:initializePageNav("+iPageCount+")'>末页</a>"
}
else
{
sTemp = "<a href='Javascript:initializePageNav(1)'>首页</a> <a href='Javascript:initializePageNav("+(iCurrPage-1)+")'>上一页</a> <a href='Javascript:initializePageNav("+(iCurrPage+1)+")'>下一页</a> <a href='Javascript:initializePageNav("+(iPageCount)+")'>末页</a>"
}
$("pageDir").innerHTML = sTemp +" "+ sTemp2 + " " + sTemp1 ;
CollectGarbage();
}
function $(o)
{
return document.getElementById(o);
}
initializePageNav(1)
//-->
</script>
</body>
</html>
示例三：
实现的效果是：上一页、第一页、…（上n个页码）、n个页码、…（下n个页码）、最后一页、下一页。n可以是奇数也可以是偶数，一般都喜欢取奇数
//总页数，当前页数，跳转地址，第一页和最后一页之间显示的页码数量
function pageBar(tp,cp,url,pn){
var str = ‘<ul class=”page”>';
if(tp>1 && cp>1){
var prev = cp-1;
str += ‘<li><a class=”prev” title=”上一页” href=”javascript:goPage(‘+prev+‘,\”+url+‘\');”><span>上一页</span></a></li> ‘;
}else{
str += ‘<li><a class=”prev” title=”上一页” href=”javascript:void(0);”><span>上一页</span></a></li> ‘;
}
if(tp>1){
//第一页
if(cp==1){
str +=‘<li class=”current”><a href=”javascript:goPage(1,\”+url+‘\');”><span>1</span></a></li> ‘;
}else{
str +=‘<li><a href=”javascript:goPage(1,\”+url+‘\');”><span>1</span></a></li> ‘;
}
if(tp>2){
var pnh = Math.floor(pn/2);
//循环开始页码
var s = cp-pnh;
if(s<=1){
s = 2;
}
//循环结束页码
var e = cp+pnh;
if(e>=tp){
e = tp-1;
}
if(s<=(1+pnh)){
if(tp>(pn+2)){
e = s+(pn-1);
if(e>=tp){
e = tp-1;
}
}else{
s = 2;
}
}
if(e>=(tp-pnh)){
if(tp>(pn+2)){
s = e-(pn-1);
if(s<=1){
s = 2;
}
}else{
e = tp-1;
}
}
if(e<s){
e = s;
}
//第一页后的多页跳转
if(s>2){
var sp = cp-pn;
if(sp<1){
sp=1;
}
str += ‘<li><a name=”break” href=”javascript:goPage(‘+sp+‘,\”+url+‘\');”><span>…</span></a></li> ‘;
}
for(var i=s;i<=e;i++){
if(i==cp){
str += ‘<li class=”current”><a href=”javascript:goPage(‘+i+‘,\”+url+‘\');”><span>'+i+‘</span></a></li> ‘;
}else{
str += ‘<li><a href=”javascript:goPage(‘+i+‘,\”+url+‘\');”><span>'+i+‘</span></a></li> ‘;
}
}
//最后一页前的多页跳转
if(e < (tp-1)){
var ep = cp+pn;
if(ep>tp){
ep=tp;
}
str += ‘<li><a name=”break” href=”javascript:goPage(‘+ep+‘,\”+url+‘\');”><span>…</span></a></li> ‘;
}
}
//最后一页
if(cp==tp){
str +=‘<li class=”current”><a href=”javascript:goPage(‘+tp+‘,\”+url+‘\');”><span>'+tp+‘</span></a></li> ‘;
}else{
str +=‘<li><a href=”javascript:goPage(‘+tp+‘,\”+url+‘\');”><span>'+tp+‘</span></a></li> ‘;
}
}else{
str +=‘ <li class=”current”><a href=”javascript:void(0);”><span>1</span></a></li> ‘;
}
if(tp>1 && cp<tp){
var next = cp+1;
str += ‘<li><a class=”next” title=”下一页” href=”javascript:goPage(‘+next+‘,\”+url+‘\');”><span>下一页</span></a></li>';
}else{
str += ‘<li><a class=”next” title=”下一页” href=”javascript:void(0);”><span>下一页</span></a></li>';
}
str += ‘</ul>';
return str;
}
//跳转页码，跳转地址
function goPage(cp,url){
window.location.href = url+cp;
}
javascript实现简单的分页特效
- Author -
hebedich声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@