发一个昨天晚上新鲜出炉的Javascript(js)分页程序，带详解，业余水平。。。。 不用任何jquery 之类的库
发一个昨天晚上刚写好的js分页程序。
较早之前写过一个，不过后来发现有问题，不好用，所以在端午节前夜，我把它重新写了一遍。
下面开始正题：
目标：写一个JS分页函数，函数能够根据给出的总页数和当前页自动生成相应的html代码并且插入的到给定的父容器中。
实现：
分页原理：分页就是将很长的内容按规定长度分开，在PHP中是通过 mysql数据库语言中 LIMIT来实现获取指定部分的数据。
LIMIT的用法简要在这简要介绍下，详细用法 请见 MySQL 5.5 Reference Manual。（我这里用的是5.5，当然也可以看看其他版本的）
LIMIT 有两个参数（我不知道叫参数对不对）
LIMIT [offset,] rows
第一个为偏移量，第二个为返回的行数。
例如，我们要查询时间最新的6条记录可以这样写
SELECT * FROM `table` WHERE 1 ORDER BY `date` DESC LIMIT 0, 6
了解了这个，分页就变得简单了。。。
无论您使用AJAX 还是什么，改变的只是 数据库的语句的LIMIT 中的 [offset]
页码算法
我们先对定义的变量进行下说明
1、函数参数 total_page, current_page, father 分别为总页数，当前页，父容器的id
2、pager_length pager 的长度 （具体见下图）
3、head_length head 长度（具体见下图）
4、tail_length tali的长度 （具体见下图）（tail_length 需要和 head_length 相等 ）
5、a_tag 插入的标签名
6、a_class 插入标签的类名
7、a_id 插入标签的id
8、a_name 插入标签的name
9、disable_class 不可用时的样式的类（ 比如当前页为第一页的时候，prev则为disable）
10、select_class 选中状态的样式的类（当前页显示的样式，譬如换个背景啥的）
11、code 最后拼接生成的代码
调用的其他函数为
1 function fill_tag(a_tag, a_class, a_id, a_name, a_html){
2 a_class = (a_class == '') ? '' : ' class="'+a_class+'"';
3 a_id = (a_id == '') ? '' : ' id="'+a_id+'"';
4 a_name = (a_name == '') ? '' : ' name="'+a_name+'"';
5 var code = '<'+a_tag+a_class+a_id+a_name+' >'+a_html+'</'+a_tag+'>';
6 return code;
7 }
该函数返回一个给定了标签名，class，id，name，以及标签内容的的html字符串
下面开始具体的实现
分为两种情况：
总页数小于pager_length （如下图）
总页数大于pager_length（如下图）
首先给出
情形1时的方法，这种情况很简单，循环total_page次就可以了
1 if( total_page < pager_length )
2 {
3 for(i = 0; i < total_page; i++)
4 {
5 code += (i+1 != current_page) ? fill_tag(a_tag, a_class, a_id, a_name, i+1) : fill_tag(a_tag, select_class, a_id, a_name, i+1);
6 }
7 }
而对于第二种情况，又可以分为三种子情况
分别如下
不需要出现左边的"..."；
不需要出现右边的"...“；
两边都要出现"..."；
下面我们对每一种情况具体的分析：
首先我们需要算出整个pager的半长，我叫他offset
1 var offset = ( pager_length - 1) / 2;
这个变量的作用 我们后面再谈。
为了方便说明，我们此处假设
1 pager_length = 11;
2 header_length = tailer_length = 2；
此时offset = 5
1、不需要出现左边的"..."；
先看一个图
此图中，带X的方框表示当前页，可以看出：
当前页小于等于offset+1的时候，不需要出现左边的...
1 if( current_page <= offset + 1)
2 {
3 var tailer = '';
4 //前header_length + main_length 个直接输出之后加一个...然后输出倒数的 tailer_length 个
5 for( i = 0; i < header_length + main_length; i ++)
6 code += (i+1 != current_page) ? fill_tag(a_tag, a_class, a_id, a_name, i+1) : fill_tag(a_tag, select_class, a_id, a_name, i+1);
7 code += fill_tag(a_tag, a_class, a_id, a_name, '...');
8 for(i = total_page; i > total_page - tailer_length; i --)
9 tailer = fill_tag(a_tag, a_class, a_id, a_name, i) + tailer;
10 code += tailer;
11 }
此处由于对称，需要继续算出上图中X后面的对应个数，同时还应该加上最后的tail（不知道tail 看看变量说明中的图）
2、不需要出现右边的"...“；
这个情况和上面的情况一致，我直接给出代码
1 else if( current_page >= total_page - offset )
2 {
3 var header = '';
4 for( i = total_page; i >= total_page-main_length - 1; i --)
5 code = (( current_page != i ) ? fill_tag(a_tag, a_class, a_id, a_name, i) : fill_tag(a_tag, select_class, a_id, a_name, i)) + code;
6 code = fill_tag(a_tag, a_class, a_id, a_name, '...') + code;
7 for( i = 0; i < header_length ; i++)
8 header += fill_tag(a_tag, a_class, a_id, a_name, i + 1);
9 code = header + code;
10 }
3、两边都要出现"..."；
除了上面两种情况之外，剩下的就着一种情况了。
这种情况的head he tail 都是固定的，可以直接给出
1 var header = '';
2 var tailer = '';
3 //首先处理头部
4 for( i = 0; i < header_length; i ++)
5 header += fill_tag(a_tag, a_class, a_id, a_name, i + 1);
6 header += fill_tag(a_tag, a_class, a_id, a_name, '...');
7 //处理尾巴
8 for(i = total_page; i > total_page - tailer_length; i --)
9 tailer = fill_tag(a_tag, a_class, a_id, a_name, i) + tailer;
10 tailer = fill_tag(a_tag, a_class, a_id, a_name, '...') + tailer;
中间的情况：
由于是对称的 我们前半部分叫做partA ， 后半部分叫做partB
两部分在同一个循环中处理
此时循环测次数应该为main的半长 + 当前页；
因此有以下代码
1 var offset_m = ( main_length - 1 ) / 2;
2 var counter = ( parseInt( current_page ) + parseInt( offset_m ) );
和
1 for(i = j = current_page ; i <= counter; i ++, j --)
2 {
3 partA = (( i == j ) ? '' : fill_tag(a_tag, a_class, a_id, a_name, j)) + partA;
4 partB += ( i == j ) ? fill_tag(a_tag, select_class, a_id, a_name, i) : fill_tag(a_tag, a_class, a_id, a_name, i);
5 }
最后一步，将head tail main 拼接起来
code = header + partA + partB + tailer;
这样三中情况都处理完了，可是prev和next在哪里？？？ 请接着看
1 var prev = ( current_page == 1 ) ? fill_tag(a_tag, disable_class, a_id, a_name, 'prev') : fill_tag(a_tag, a_class, a_name, a_name, 'prev');
2 var next = ( current_page == total_page ) ? fill_tag(a_tag, disable_class, a_id, a_name, 'next') : fill_tag(a_tag, a_class, a_name, a_name, 'next');
3 code = prev + code + next;
4 document.getElementById(father).innerHTML=(code);
最后将他们放入父容器就OK啦。。。。
下面附上一个测试代码，您可以直接把他复制到记事本中另存为html查看
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 </head>
7 <style type="text/css">
8 .disable {
9 color:#FF0000;
10 font-weight:bold;
11 }
12 .select {
13 color:#00F;
14 font-weight:bold;
15 }
16 </style>
17 <script type="text/javascript">
18 function update_page(total_page,current_page,father)
19 {
20 var total_page = parseInt( total_page );
21 var current_page = parseInt( current_page );
22 var pager_length = 11; //不包next 和 prev 必须为奇数
23 var pager = new Array( pager_length );
24 var header_length = 2;
25 var tailer_length = 2;
26 //header_length + tailer_length 必须为偶数
27 var main_length = pager_length - header_length - tailer_length; //必须为奇数
28
29 var a_tag = 'li';
30 var a_class = '';
31 var a_id = '';
32 var a_name = '';
33
34 var disable_class = 'disable';
35 var select_class = 'select';
36
37 var i;
38 var code = '';
39 if( total_page < current_page )
40 {
41 alert('总页数不能小于当前页数');
42 return false;
43 }
44 //判断总页数是不是小于 分页的长度，若小于则直接显示
45 if( total_page < pager_length )
46 {
47 for(i = 0; i < total_page; i++)
48 {
49
50 code += (i+1 != current_page) ? fill_tag(a_tag, a_class, a_id, a_name, i+1) : fill_tag(a_tag, select_class, a_id, a_name, i+1);
51 }
52 }
53 //如果总页数大于分页长度，则为一下函数
54 else
55 {
56 //先计算中心偏移量
57 var offset = ( pager_length - 1) / 2;
58 //分三种情况，第一种左边没有...
59 if( current_page <= offset + 1)
60 {
61 var tailer = '';
62 //前header_length + main_length 个直接输出之后加一个...然后输出倒数的 tailer_length 个
63 for( i = 0; i < header_length + main_length; i ++)
64 code += (i+1 != current_page) ? fill_tag(a_tag, a_class, a_id, a_name, i+1) : fill_tag(a_tag, select_class, a_id, a_name, i+1);
65 code += fill_tag(a_tag, a_class, a_id, a_name, '...');
66 for(i = total_page; i > total_page - tailer_length; i --)
67 tailer = fill_tag(a_tag, a_class, a_id, a_name, i) + tailer;
68
69 code += tailer;
70 }
71 //第二种情况是右边没有...
72 else if( current_page >= total_page - offset )
73 {
74 var header = '';
75 //后tailer_length + main_length 个直接输出之前加一个...然后拼接 最前面的 header_length 个
76 for( i = total_page; i >= total_page-main_length - 1; i --)
77 code = (( current_page != i ) ? fill_tag(a_tag, a_class, a_id, a_name, i) : fill_tag(a_tag, select_class, a_id, a_name, i)) + code;
78 code = fill_tag(a_tag, a_class, a_id, a_name, '...') + code;
79 for( i = 0; i < header_length ; i++)
80 header += fill_tag(a_tag, a_class, a_id, a_name, i + 1);
81
82 code = header + code;
83 }
84 //最后一种情况，两边都有...
85 else
86 {
87 var header = '';
88 var tailer = '';
89 //首先处理头部
90 for( i = 0; i < header_length; i ++)
91 header += fill_tag(a_tag, a_class, a_id, a_name, i + 1);
92 header += fill_tag(a_tag, a_class, a_id, a_name, '...');
93 //处理尾巴
94 for(i = total_page; i > total_page - tailer_length; i --)
95 tailer = fill_tag(a_tag, a_class, a_id, a_name, i) + tailer;
96 tailer = fill_tag(a_tag, a_class, a_id, a_name, '...') + tailer;
97 //处理中间
98 //计算main的中心点
99 var offset_m = ( main_length - 1 ) / 2;
100 var partA = '';
101 var partB = '';
102 var j;
103 var counter = (parseInt(current_page) + parseInt(offset_m));
104 for(i = j = current_page ; i <= counter; i ++, j --)
105 {
106 partA = (( i == j ) ? '' : fill_tag(a_tag, a_class, a_id, a_name, j)) + partA;
107 partB += ( i == j ) ? fill_tag(a_tag, select_class, a_id, a_name, i) : fill_tag(a_tag, a_class, a_id, a_name, i);
108 }
109 //拼接
110 code = header + partA + partB + tailer;
111
112
113 }
114 }
115
116
117 var prev = ( current_page == 1 ) ? fill_tag(a_tag, disable_class, a_id, a_name, 'prev') : fill_tag(a_tag, a_class, a_name, a_name, 'prev');
118 var next = ( current_page == total_page ) ? fill_tag(a_tag, disable_class, a_id, a_name, 'next') : fill_tag(a_tag, a_class, a_name, a_name, 'next');
119 code = prev + code + next;
120 document.getElementById(father).innerHTML=(code);
121 }
122 function fill_tag(a_tag, a_class, a_id, a_name, a_html){
123 a_class = (a_class == '') ? '' : ' class="'+a_class+'"';
124 a_id = (a_id == '') ? '' : ' id="'+a_id+'"';
125 a_name = (a_name == '') ? '' : ' name="'+a_name+'"';
126 var code = '<'+a_tag+a_class+a_id+a_name+' >'+a_html+'</'+a_tag+'>';
127 return code;
128 }
129 </script>
130 总页数：<input type="text" value="" id="total_page" /><br />
131 当前页：<input type="text" value="" id="current_page" /><br />
132 <input type="button" value="test" id="test" />
133 <div><ul id="code"></ul></div>
134 <script type="text/javascript">
135 document.getElementById('test').onclick = function(){
136 var total_page = document.getElementById('total_page').value;
137 var current_page = document.getElementById('current_page').value;
138 update_page(total_page, current_page, 'code');
139 // var tem = (fill_tag('a','class','id','name','xxxx'));
140 // alert(tem);
141 }
142 </script>
143 <body>
144 </body>
145 </html>
原创文章，转载请注明出处 http://www.cnblogs.com/doug/archive/2012/06/23/2559568.html
分类: My Javascript
标签: js
