发一个昨天晚上新鲜出炉的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
转载于:https://www.cnblogs.com/doug/archive/2012/06/23/2559568.html