javascript实现简单的分页特效
下面是一段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+xml技术实现分页浏览
共有两个文件tmh.htm & tt.xml 源代码如下: tmh.htm 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="
-
JavaMe开发绘制文本框TextEdit
[问题描述] TextEdit是采用GameCanvas绘制的文本编辑器.本文结合实例给出实现的方法. [原理] 1 运用Graphics.GameCanvas绘制文本框和光标. 2 检测到输入事件时,跳转到 高级界面->TextBox .通过系统调用输入法完成输入. 3 将TextBox输入的值返回给TextEdit对象. [设计模式] 这个过程有点类似装饰模式,实际上,实现输入的还是TextBox,只是给TextBox装饰了一下,形成了一个漂亮的外观. [代码清单] TextEdit.jav
-
javascript 支持页码格式的分页类
但是他们插件的附属功能很多又不需要,而且没必要就为了这么一个功能区引用这个库,为速度考虑吧,当然你服务器好也行,但是其实这个效果不是必须的,但是觉的会常用,所以就包装成类了,供以后使用,也供有需要的人学习使用. 下面只是一个简单的demo,用的话自己可以在编辑页码样式,有默认的格式.不废话了,自己看吧,有注释使用说明...类(3kb)使用可以参照demo,不明白使用的可以留言. 以后会慢慢写一些项目开发中常遇到的问题,以及解决方案,和大家学习分享. jpage.js 复制代码 代码如下: /*
-
Javascript实现的分页函数
/** * 分页类构造 * 参数 nTotalList: 总条数 * 参数 nPageSize: 每页显示条数 * 参数 nPageNum: 当前页码 * 参数 sPageUrl: 分页链接的URL,页码以[pn]代替,输出时将被替换为实际页码 * 参数 nPageListSize: 页码列表(下拉框)中显示的最多页码条数.该参数可省略,默认100 */ function Pagination(nTotalList, nPageSize, nPageNum, sPageUrl, n
-
Java web velocity分页宏示例
复制代码 代码如下: #macro(pager $url $pager)<ul class="pagination"> #set($FRONT_LEN = 4) #set($BEHIND_LEN = 5) #set($PAGER_LEN = 10) #set($PAGER_CENTER = $!{pager.pageNum} - $!{BEHIND_LEN}) <li #if($!{pager.currentPage} == 1) class="disabl
-
javascript 新闻标题静态分页代码 (无刷新)
一个模板,从数据库取n条记录,生成静态. 做单页面的静态化,索引页面是用JS对数组进行组合的. 因为记录只是一个标题,一个链接,字节数不会太大, 那么用js去用这个大数组进行分页,貌似不错,很节约带宽! 还是很棒的,简单,实用,值得推荐! JS代码: 复制代码 代码如下: function title_array(title, link_add, store_time) { this.title = title; this.link_add = link_add; this.store_t
-
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.curpag
-
纯javascript实现分页(两种方法)
先给大家贴效果图: 网上确实有很多分页的插件以及开源代码,单本是一个后台开发猿,前台css等样式还驾驭不住,所以就开始自己去写了.其实这个分页原理很简单,就是用ajax往后台传值(当前页码),后台使用limit进行分页. 因为这是我自己第一次动手用js写分页,写的应该也不是很完美,有些公共的没有抽取出来,但是用起来还是可以的,这块代码是可以把它当做公共的分页去处理的,我就是用 这块代码写了两个稍微不同一些的分页!公共的代码抽取的也差不多,主要就是ajax后台以及返回的值不同而已,只要把总页码的值
-
java调用oracle分页存储过程示例
1.分页类 复制代码 代码如下: package org.zh.basic; /** * 页面类 * * @author keven * */public class PageInfo { // 定义 private String p_tableName; // -表名 private String p_strWhere; // --查询条件 private String p_orderColumn; // --排序的列 private String p_orderS
-
Jquery与JS两种方法仿twitter/新浪微博 高度自适应无缝滚动实现代码
首先是Jquery 无标题文档 $(function(){ var scrtime; $("#con").hover(function(){ clearInterval(scrtime); },function(){ scrtime = setInterval(function(){ var $ul = $("#con ul"); var liHeight = $ul.find("li:last").height(); $ul.animate({
-
JavaMe开发绘制可自动换行文本
[问题描述] JavaMe Graphics类中的drawString不支持文本换行,这样绘制比较长的字符串时,文本被绘制在同一行,超过屏幕部分的字符串被截断了.如何使绘制的文本能自动换行呢? [分析] drawString无法实现自动换行,但可以实现文本绘制的定位.因此可考虑,将文本拆分为多个子串,再对子串进行绘制.拆分的策略如下: 1 遇到换行符,进行拆分: 2 当字符串长度大于设定的长度(一般为屏幕的宽度),进行拆分. [步骤] 1 定义一个String和String []对象: priv
-
Java(基于Struts2) 分页实现代码
分页实现的基本过程是这样的: 1. 设置自己的分页器的基本参数(可以从配置文件中读取) ■每页显示的记录条数 ■每次最多显示多少页 2. 编写设置分页器其他参数的函数 主要参数有以下几个: 总记录条数 总页数 当前页号:现在显示的页数 每页显示的记录条数 当前页开始行(第一行是0行) 第一页页号 最后页页号 下一页页号 上一页页号 画面上显示的起始页号 画面上显示的结束页号 参数基本实现原理:设置以上各个参数,实际上只需要三个参数就可以对所有的其他变量进行设置,即总记录条数,每页显示记录数,每次
-
JavaMe开发自适应滚动显示
[问题描述] 我们常看到一些滚动显示的实例,比如UC浏览器中,显示网页的内容.当内容比较多时,采用滚动分页显示是合理的.在Canvas中绘图中,多余的内容被截断了.如何实现滚动分页显示呢? [原理] JavaMe中有一个坐标变换的功能.当触发相应的按键事件时,我们就让其显示相应的页,并且使滚动条滚动到相应的位置. [代码清单] ShowHelp.java package com.token.view; import javax.microedition.lcdui.Font; import ja