JavaScript实现列表分页功能特效

   最近写了一个js分页的方法,尽管已经有现成的可以用,但还是想自己写写,搞搞清楚。最终实现的效果是:上一页、第一页、…(上n个页码)、n个页码、…(下n个页码)、最后一页、下一页。n可以是奇数也可以是偶数,一般都喜欢取奇数,星石调用的时候传入的参数是5。写的时候,主要注意了以下几个地方:

  页码等于1时,只显示上一页、第一页、最后一页,且都没有跳转;

  页码小于等于2时,不需要中间的n个页码;

  页码小于等于n时,显示所有页码,不显示2个“…”;

  2个“…”换页时,换n个页码,如果接近最前面或最后面几页了,则显示最前面或最后面n个页码。

  下面贴出代码,供大家探讨:

  ?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110

//总页数,当前页数,跳转地址,第一页和最后一页之间显示的页码数量
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;
}

  以上所述就是本文的全部内容了,希望大家能够喜欢。

时间: 2024-11-16 16:14:13

JavaScript实现列表分页功能特效的相关文章

JavaScript实现列表分页功能特效_javascript技巧

最近写了一个js分页的方法,尽管已经有现成的可以用,但还是想自己写写,搞搞清楚.最终实现的效果是:上一页.第一页.-(上n个页码).n个页码.-(下n个页码).最后一页.下一页.n可以是奇数也可以是偶数,一般都喜欢取奇数,星石调用的时候传入的参数是5.写的时候,主要注意了以下几个地方: 页码等于1时,只显示上一页.第一页.最后一页,且都没有跳转: 页码小于等于2时,不需要中间的n个页码: 页码小于等于n时,显示所有页码,不显示2个"-": 2个"-"换页时,换n个页

thinkPHP5使用laypage分页插件实现列表分页功能

一.背景 在使用thinkPHP框架做项目的时候,经常会遇到对列表的内容进行分页.thinkPHP框架中自带了分页功能,但是有缺陷.这个缺陷是每次返回每页数据给页面时需要重新加载页面所需要的JS.CSS等资源.如果页面包含的JS过多.过大,会增加流量压力.因此,我们使用laypage插件.每次使用ajax请求获取每页的数据就可以了,不需要重复加载页面. 二.分页流程 如下图所示: 流程说明: 1) 调研App.php中的函数,该函数调用fetch函数.fetch函数渲染list.html.   

推荐一款PHP+jQuery制作的列表分页的功能模块_php实例

做了一个列表分页的功能模块,主要的文件包括分页类 page.class.php 和 控制 ajax 分页的ajax.js,主要功能有: 1.可以选择 3 种常见的 url 分页格式: 2.可以选择 url 分页 还是 ajax 分页: 3.两种分页方式都可以自定义分页 a 标签的文字: 4.url 分页方式可以自定义分页偏移量: 5.url 分页方式可以选择手动跳转方式:手动输入页码跳转 或 下拉菜单选择页码跳转. 列表分页功能含有但不一定全部包含的元素包括: 首页.下一页.上一页.末页.具体页

JavaScript分页功能的实现方法

 JavaScript分页功能的实现方法  这篇文章主要介绍了JavaScript分页功能的实现方法,涉及javascript操作分页的相关技巧,需要的朋友可以参考下     本文实例讲述了JavaScript分页功能的实现方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 4

利用AJAX实现WordPress中的文章列表及评论的分页功能_javascript技巧

文章列表页分页 一.加载 jQuery 库既然是 jQuery 驱动的 Ajax ,加载 jQuery 库是必须的. 二.文章列表格式在你的文章列表页面(首页 index.php.归档 archive.php )需要确保有以下类似的结构 <!-- 包含所有文章的容器 --> <div id="content"> <!-- 各文章的容器 --> <div class="post"></div> <div

JavaScript分页功能的实现方法_javascript技巧

本文实例讲述了JavaScript分页功能的实现方法.分享给大家供大家参考.具体实现方法如下: <script> //定义page为全局变量,以便下面使用 var page; window.onload = function() { var table = document.getElementById("table"); var btnAdd = document.getElementById("btnAdd"); var btnModify = do

【SSH项目实战】国税协同平台-26.分页功能编写

可以看到,我们之前的用户管理.角色管理和信息发布管理的列表下均有这些东西: 总共1条记录,当前第 1 页,共 1 页    上一页  下一页 到  这个就是美工留给我们做分页的,我们接下来就以信息发布管理模块为例做一个分页功能. 我们在做之前首先分析一下我们分页的规则: 总共1条记录,当前第 1 页,共 1 页    上一页  下一页 到   属性有: 总记录数 当前页号 总页数 页大小 列表记录 使用例子: 共6条记录,每页3条,共2页 总页数 = 总记录数/页大小 共7条记录,每页3条,共3

Angularjs 实现分页功能及示例代码_AngularJS

基于Angularjs实现分页 前言        学习任何一门语言前肯定是有业务需求来驱动你去学习它,当然ng也不例外,在学习ng前我第一个想做的demo就是基于ng实现分页,除去基本的计算思路外就是使用指令封装成一个插件,在需要分页的列表页面内直接引用. 插件       在封装分页插件时我实现了几种方式总体都比较零散,最后找到了一个朋友(http://www.miaoyueyue.com/archives/813.html)封装的插件,觉还不错,读了下他的源码就直接在项目中使用了. 原理和

基于Angularjs实现分页功能_AngularJS

前言 学习任何一门语言前肯定是有业务需求来驱动你去学习它,当然ng也不例外,在学习ng前我第一个想做的demo就是基于ng实现分页,除去基本的计算思路外就是使用指令封装成一个插件,在需要分页的列表页面内直接引用. 插件 在封装分页插件时我实现了几种方式总体都比较零散,最后找到了一个朋友(http://www.miaoyueyue.com/archives/813.html)封装的插件,觉还不错,读了下他的源码就直接在项目中使用了. 原理和使用说明 1.插件源码主要基于angular direct