Hiro.pagenav:自渲染、自解析的分页插件 v1.8更新

发表时间:2010年07月8日 最近更新时间: 2010-07-08 14:26 字体大小:12号14号

这次的插件更新是对之前的分页插件：Hiro.pagenav:自渲染、自解析的分页插件 2010年04月16日的升级与修复版本。

downloaddemo

一、升级说明：

  1. 原版本在页面加载完成后一次性渲染出所有的页面（为显示的页面都隐藏在DOM中），这样的弊端是若一个分页的页码过多的时候，for循环会执行很多遍（total_page_num次）。
    新版采用的是首次渲染要显示的页码，而不显示的页码用’…’表示，当点击了新的页码是再重新渲染出新的页码DOM，那么每次只需for循环show_page_size次。这样的好处是第一次的渲染速度会大大增加；
  2. 原版本在一个页面中只能出现一个分页，若出现多个时，后面的调用方法会覆盖之前的方法，最终只执行了最后一条调用记录，并且渲染后的结果只会出现在第一个分页上。
    新版仍旧使用了老的样式和class属性，只是在调研时使用唯一的ID查找分页，那么一个页面中的各个分页的ID不同，执行的效果也就不相干了。
  3. 原版本设置页码的样式class属性时，是通过序号i的大小来判断设置的，若页码过万或者过亿，那么就要判断多次(如:if(i>100000) { classProp = ‘ class=”w6″‘;})。
    新版则是通过序号的长度来组合了字符串来设置样式class属性，具体见下面贴出的js代码。

二、Demo页面的HTML源码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div id="wrapper">
	<ul class="pageNav" id="nav_01"><li>初始化中...</li></ul>
    <br />
    <br />
    <br />
    <br />
    <br />
	<ul class="pageNav" id="nav_02"><li>初始化中...</li></ul>
    <br />
    <br />
    <br />
    <br />
    <br />
    <h3>有回调函数</h3>
	<ul class="pageNav" id="nav_03"><li>初始化中...</li></ul>
</div>

三、样式表代码：

和原版本的样式表一样：点击 Hiro.pagenav:自渲染、自解析的分页插件 2010年04月16日 查看。

四、pagenav.v1.8代码：

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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128

/**
 * AJAX分页
 * version : 1.8
 *
 * @param $pageNav  为了兼容一个页面中有多个.pageNav的情况，给每个分页一个不同的分页ID
 * @param total_page_num 总页数
 * @param show_page_size 显示页码数
 * 
 * Notes:
 *		1.6		修复total_page_num过多一次渲染的bug，修正为没点一次渲染一次的方式
 *		1.7		插件版,并修复一个页面多个分页的bug
 *		1.8		修正页码宽度判断，根据页码i的长度设置样式class
 */
;(function($) {
	$.fn.pageNav = function(total_page_num, show_page_size, callback) {
		if(total_page_num < = 1) {
			return false;
		};
		var $pageNav = this;
 
		var last_page_pos = 0;
 
		var showPage = function(curr_page_num) {
			var isShowMore = true;
			if(total_page_num <= show_page_size) {
				show_page_size = total_page_num;
				isShowMore = false;
			};
			var start_page = 1;
			var end_page = show_page_size;
			var show_start_more = '';
			var show_end_more = '';
			var l_size = (show_page_size%2 == 0) ?  Math.round(show_page_size/2)-1 : parseInt(show_page_size/2);	//左边
 
			var moreHtml = '<li class="more">...';
 
			if(isShowMore) {
				if(curr_page_num > 1 &&　curr_page_num　< total_page_num) {
					if(curr_page_num < last_page_pos && l_size == 0) {	//向左,若左边没有了，生成一个，如show_page_size=2
						start_page = curr_page_num - 1;
					} else {
						start_page = curr_page_num - l_size;
					};
				} else if(curr_page_num == total_page_num) {
					start_page = curr_page_num - show_page_size + 1;
				};
				if(start_page < 1) {
					start_page = 1;
				};
 
				end_page = show_page_size + start_page - 1;
				if(end_page > total_page_num) {
					end_page = total_page_num;
					start_page = end_page - show_page_size + 1;
				};
 
				if(start_page > 1) {
					show_start_more = moreHtml;
				};
				if(end_page < total_page_num) {
					show_end_more = moreHtml;
				};
			};
 
			$pageNav.html(function() {
				var html = '<li>总共<label class="total_page_num">' + total_page_num + '</label>页，当前第<label class="curr_page_num">'+curr_page_num+'</label>页';
				html += '<li class="first"><a href="#first">首页</a></li><li class="prev"><a href="#prev">上一页</a></li>'+show_start_more;
				for(var i=start_page; i< =end_page; i++) {
					var classProp = '';
					var len = i.toString().length;
 
					if(i == curr_page_num) {
						classProp = 'curr_page';
					};
 
					if(len > 1) {
						classProp += ' w'+len.toString();
					};
 
					html += '<li class="pages"><a href="#' + i + '" class="'+ classProp +'">' + i + '</a></li>';
				};
				html += show_end_more+'<li class="next"><a href="#next">下一页</a></li><li class="last"><a href="#last">末页</a></li>';
				$(this).html(html);
			});
		};
 
		showPage(1);	//首次时渲染
 
		$('a', $pageNav).live('click', function(e) {
			e.preventDefault();
			if($(this).hasClass('.curr_page')) {	//点击当前页，不做处理
				return false;
			};
 
			var $parentLi = $(this).parent('li'),
				total_page_num = parseInt($pageNav.find('.total_page_num').text()), //总的页数
				curr_page_num = parseInt($pageNav.find('.curr_page_num').text());	//当前页数
 
			last_page_pos = parseInt($pageNav.find('.curr_page').text());		//记录点击之前的位置
 
			if($parentLi.hasClass('first')) {					//首页
				curr_page_num = 1;
			} else if($parentLi.hasClass('prev')) {				//上一页
				if(curr_page_num > 1) {							//当前页码大于1时才会有上一页
					curr_page_num--;
				};
			} else if($parentLi.hasClass('next')) {				//下一页
				if(total_page_num > curr_page_num) {			//总页码大于当前页码时才会有下一页
					curr_page_num++;
				};
			} else if($parentLi.hasClass('last')) {				//末页
				curr_page_num = total_page_num;
			} else {											//根据点击数字翻页
				curr_page_num = parseInt($(this).text());
			};
 
			if(curr_page_num == last_page_pos) {	//上一页、下一页、首页、末页时，若预加载页和当前页相同，不做加载处理
				return false;
			};
 
			showPage(curr_page_num);
 
			if(callback) {
				callback(curr_page_num);
			};
		});
	};
})(jQuery);

五、插件调用以及回调函数说明：

Demo页面调用代码：

1
2
3
4
5
6
7
8
9
10
11
12
13

	<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="pagenav.v1.8.min.js"></script>
    <script type="text/javascript">
    jQuery(function($) {
		var alertCurrPage = function(curr_page_num) {
			alert('当前页为：'+curr_page_num);
		};
 
        $('#nav_01').pageNav(20, 6);
        $('#nav_02').pageNav(40, 16);
        $('#nav_03').pageNav(200, 10, alertCurrPage);
    });
    </script>

回调函数说明：
在当前页定义了相关的处理函数后，可将该函数作为分页的回调函数传递给pagenav插件，插件代码题内会通过分页点击获得当前分页页码，在通过页码处理传入的函数体。（也就是说此处的回调函数是将整个函数体作为Function类型的参数传入了插件中）。

评论数:10 条 浏览次数:1,065 views
不错不错，已经有 个评论！
  1. MOPVHS
    2010年07月12日 15:01 回复

    沙发观看~~

  2. 皇家元林
    2010年07月22日 10:10 回复

    真佩服你把wp玩的这么好。。。。

    • Hiro
      2010年07月22日 10:12

      可惜我不会做设计，不然可以设计的更好。
      一直想换主题，可以一点新布局的概念都没！！

  3. 皇家元林
    2010年07月22日 10:19 回复

    呵呵 我也不会设计
    你能做的这么好，想到厉害了
    不过设计也是可以学的，相信你有这个天赋。。。

    • Hiro
      2010年07月22日 10:23

      可惜啊，没这天赋。之前的主题都是参照了别的网站修改来的。

      最近找了一圈，都没发现我要的风格，所以也没法改！！

  4. morolu
    2010年07月23日 18:22 回复

    有个问题 如何设置起始页

    如果我做的不是无刷新翻页 点击第二页 我用函数 跳到第二 页 翻页 怎么设置在起始第二 而不是第一页？

    • Hiro
      2010年07月24日 21:38

      默认是从第一页开始的，若要设置其他的起始页，可以多设置一个变量。

      不是无刷新翻页的话，这个比就不必使用了，你到了另一页面后JS都是重新执行的！！
      你只要把样式拷过去用好了。

  5. morolu
    2010年07月25日 12:07 回复

    谢谢：）
    您发布的原版js 我复制下来 出现脚步错误。。 不知道是什么问题

    可以发个到我的邮箱吗 morolu@126.com 谢谢

    接下来就是原来的问题

    不是无刷新翻页 比如 我翻页到第10页 页面 就重新执行了js ，但是执行后 翻页js 还是指向的是第一页

    脚步也是

    • Hiro
      2010年07月25日 16:45

      我说了，若你是用来做刷新页面分页的话，JS就不要用了，用样式就好了。
      你下载的压缩包中是没有jQuery库的，自己链接一下！！
      重新加载页面JS代码都会重新执行的，所以肯定默认是在第一页的！！

  6. learn italian language
    2010年10月3日 11:04 回复

    请问www.ihiro.org博主您发表博文时，是用客户端工具还是直接在Blog后台编辑发？有什么心得没？

我要评论

  • * *