发一个昨天晚上刚写好的js分页程序。

较早之前写过一个，不过后来发现有问题，不好用，所以在端午节前夜，我把它重新写了一遍。

下面开始正题：

目标：写一个JS分页函数，函数能够根据给出的总页数和当前页自动生成相应的html代码并且插入的到给定的父容器中。

---

实现：

 

---

分页原理：分页就是将很长的内容按规定长度分开，在PHP中是通过 mysql数据库语言中 LIMIT来实现获取指定部分的数据。

LIMIT的用法简要在这简要介绍下，详细用法 请见 。（我这里用的是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+'
     ';6     return code;7 }

 

该函数返回一个给定了标签名，class，id，name，以及标签内容的的html字符串 

下面开始具体的实现

分为两种情况：

1. 总页数小于pager_length （如下图）

   

2. 总页数大于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 }

 

 

 

而对于第二种情况，又可以分为三种子情况

分别如下

1. 不需要出现左边的"..."；

   

2. 不需要出现右边的"...“；

   

3. 两边都要出现"..."；

   

下面我们对每一种情况具体的分析：

首先我们需要算出整个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   2   3   4 
       5   6   7  17 130 总页数：
131 当前页：
132 133 
     
      
     
134 143 144 145 

---

 

原创文章，转载请注明出处