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

做了一个列表分页的功能模块，主要的文件包括分页类 page.class.php 和 控制 ajax 分页的ajax.js，主要功能有：

1.可以选择 3 种常见的 url 分页格式；

2.可以选择 url 分页 还是 ajax 分页；

3.两种分页方式都可以自定义分页 a 标签的文字；

4.url 分页方式可以自定义分页偏移量；

5.url 分页方式可以选择手动跳转方式：手动输入页码跳转 或 下拉菜单选择页码跳转。

列表分页功能含有但不一定全部包含的元素包括：

首页、下一页、上一页、末页、具体页码、手动输入的跳转至第几页、下拉菜单选择跳转至第几页、信息( 共多少页、共多少条、当前是第几页 )等。

其中必须包含的元素有：上一页、下一页、具体页码。

先看看其他网站是怎么做的( 百度搜索、虎扑、淘宝、虾米、织梦官网 )：

1.百度搜索就是由最简单的"上一页"、"下一页"和具体页码构成。分页偏移量为前5页后4页

2.虎扑话题( http://bbs.hupu.com/topic-5)的页码包括了"上一页"、"下一页"、具体页码、手动输入跳转至第几页、信息等元素，还包括首页和末页，只不过这里的首页和末页不是用文字而是用具体页码表现出来。分页偏移量前后都是4页。博客园的列表页( http://www.cnblogs.com/cate/php/#p12) 是相同的处理方式。

3.淘宝网宝贝列表页( http://s.taobao.com/list?spm=a217v.7289245.1997888733.7.4JHYae&seller_type=taobao&sort=sale-desc&cat=50029216&sd=0&tid=0&olu=yes&isnew=2&navid=city&smc=1&_input_charset=utf-8&tab=all&app=list&s=0&auction_tag[]=12034)，包含"上一页"、"下一页"、具体页码、信息、手动输入跳转至第几页 ( 还有个小小的效果，点击去第几页的输入框时会弹出确定按钮 )，也包含首页，只不过首页是用页码1代替。分页偏移量前后都是2页

4.虾米列表( http://www.xiami.com/collect/recommend?spm=a1z1s.2943601.6856193.30.dqFWiZ)，包含"上一页"、"下一页"、具体页码、可跳转的省略页码( ... )、信息，也包括以页码1显示的首页。分页偏移量为前2页后5页

最后是织梦官网文章列表页(http://www.zzvips.com/bc/php/list_36_2.html)，包含了"首页"、"上一页"、"下一页"、具体页码、"末页"、下拉菜单选择跳转至第几页、信息。分页偏移量前后都是5页：

浏览至第11页时非常遗憾，宽度过宽导致版式出现问题：

这个分页功能的做法和效果是：

1.url 分页 style1：

①手动输入跳转页码的方式：

始终显示最后一页

"..."跳转至 当前显示的除末页的最大页码的下一页，鼠标放在上面给出提示

前后偏移量可自定义，可相同可不同，前面的"..."跳转至最前页除首页的页码的前一页

②下拉菜单选择跳转的方式：

2.url 分页 style2：

使用"首页"和"末页"代替页码"1"和最后一页页码，使用前n页、后n页代替"..."

为了使"前10页"和"后10页"同时出现，增加了数据库的数据

同样有下拉菜单跳转方式

3.ajax 分页：

出现的元素只有"首页"、"上一页"、"下一页"和"末页"。

首页时：

中间时：

末页时：

模块的文件结构图：

ROOT:
├─conn
│ └─conn.php
│
├─libs -- smarty库
│
├─templates
│ │
│ ├─demo.html -- 功能页模板文件
│ │
│ ├─css
│ │ ├─common.css
│ │ └─style1.css
│ │
│ ├─images
│ │ └─loading.gif -- ajax分页时请求数据接收到之前的加载图
│ └─js
│ ├─jquery-1.8.3.min.js
│ └─ajax.js -- 当分页方式为ajax时模板demo.html加载的js
│
├─templates_c
│
├─init.inc.php -- smarty配置文件
│
├─page.class.php -- 分页类
│
├─demo.php
│
└─ajaxpage.php -- ajax分页时接受请求的php文件

要注意的地方：

1.偏移量的显示设置，主要是什么时候 url 分页方式1，什么时候显示"..." ：当前页码 - 前偏移量 - 1 > 1 时，应当显示前面的"..."； 当前页码 + 后偏移量 + 1 < 总页数时，应当显示后面的"..."；

2.选择性加载 js ：当使用 ajax 方式进行分页时，才加载 ajax.js

3.外部的 js 无法解析 smarty 的标签，所以在使用外部 js 时的传值要进行处理

4.ajax 分页时，默认是第一页，也就是一定首先会出现 "下一页" 和 "末页"，所以 "上一页" 和 "首页" 的添加和点击函数应当包含在"下一页" 和 "末页" 的点击函数中。

主要代码：

page.class.php:

1. <?php 
2.  
3. class MyPageUrl{ 
4.  
5.   private $totalNum; 
6.   private $perpageNum;    //每页显示条数  
7.   private $pageNow;      //当前页页码 
8.   private $url;        //当前url 
9.  
10.    
11.   //页码显示 
12.   private $pageStyle; //页码样式，提供2种样式 
13.  
14.   private $prePage;    //页码前偏移量 
15.   private $floPage;    //页码后偏移量 
16.  
17.   private $skipStyle;    //手动跳转，0为手动输入页码，1为下拉菜单选择页码 
18.  
19.   private $page_act;    //翻页样式 0:url 1:ajax 
20.  
21.   //页码文字 
22.   //style2&style3 
23.   private $firstFonts = "首页"; 
24.   private $lastFonts = "末页"; 
25.  
26.   private $nextFonts = "下一页 >";    
27.   private $preFonts = "< 上一页"; 
28.  
29.   //前n页，后n页 
30.   private $page_n; 
31.   private $pn = 10; 
32.   private $pn_fonts = "前10页"; 
33.   private $fn = 10; 
34.   private $fn_fonts = "后10页"; 
35.  
36.   //展现的页码 
37.   private $pageShow; 
38.  
39.   //构造函数 
40.   function __construct($totalNum,$perpageNum,$prePage,$preFonts,$floPage,$nextFonts,$p,$skipStyle,$pageStyle,$page_n,$page_act){ 
41.    
42.     $this->totalNum = $totalNum; 
43.     $this->perpageNum = $perpageNum; 
44.     $this->prePage = $prePage; 
45.     $this->floPage = $floPage; 
46.     $this->skipStyle = $skipStyle; 
47.     $this->pageStyle = $pageStyle; 
48.     $this->page_n = $page_n; 
49.     $this->page_act = $page_act; 
50.  
51.     $this->getPageNow($p); 
52.  
53.     $this->totalPage = $this->getTotalPage(); //总页数 
54.  
55.     $this->pageShow = ""; 
56.     $this->getUrl(); 
57.   } 
58.        
59.  
60.   /************定义__toString方法,把对象解析成字符串******/ 
61.   public function __toString(){ 
62.    
63.     return $this->pageShow; 
64.   } 
65.  
66.   /************获得当前页页码,$p用来接收$_GET['p']*******/ 
67.   public function getPageNow($p){ 
68.    
69.     if(!isset($p)){ 
70.        
71.       $this->pageNow = 1; 
72.     }else if($p>0){ 
73.        
74.       $this->pageNow = $p;  
75.     }else{ 
76.      
77.       die("page number error"); 
78.     } 
79.  
80.     return $this->pageNow; 
81.   } 
82.  
83.  
84.  
85.   /***********************设置当前页面链接***************/ 
86.   public function getUrl(){ 
87.  
88.     $url = "http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; 
89.      
90.     //判断是否带参数 
91.     if(strpos($url,"?") === false){ //不带参数 
92.  
93.       return $this->url = $url."?"; 
94.     }else{ //带参数 
95.      
96.       $url = explode("?",$url); 
97.       //参数 
98.       $param = $url[1]; 
99.  
100.       //判断是否有多个参数 
101.       if(strpos($param,"&") === false){ //只有一个参数 
102.    
103.         //判断参数是否为p 
104.         if(strpos($param,"p=") === false){ //不含参数p 
105.          
106.           //合并url 
107.           $url = implode("?",$url);  
108.  
109.           return $this->url = $url."&"; 
110.  
111.         }else{ 
112.          
113.           //把参数p去掉 
114.           $url = $url[0]; 
115.  
116.           return $this->url = $url."?"; 
117.         } 
118.          
119.       }else{ //多个参数 
120.        
121.         $param = explode("&",$param); 
122.  
123.         //遍历参数数组 
124.         foreach($param as $k=>$v){ 
125.  
126.           if(strpos($v,"p=") === false){ 
127.              
128.             continue; 
129.           }else{ 
130.        
131.             //当含有参数p时，把它从数组中删除 
132.             unset($param[$k]); 
133.           } 
134.         } 
135.  
136.           //删除参数p之后组合数组 
137.           $param = implode("&",$param); 
138.           $url[1] = $param; 
139.           $url = implode("?",$url); 
140.  
141.           return $this->url = $url."&"; 
142.       } 
143.     } 
144.   } 
145.  
146.   /************************前偏移量处理********************/ 
147.   public function preOffset($preFonts){ 
148.    
149.  
150.     //前偏移量的处理 
151.     if($this->pageNow!=1 && ($this->pageNow - $this->prePage -1 <= 1)){ 
152.            
153.       //上一页 
154.       $this->pageShow .= "<a id="per_page" class="pagenum" href="".$this->url."p=".($this->pageNow-1)."">".($preFonts == ""?$this->preFonts:$preFonts)."</a>"; 
155.  
156.        
157.       //页码 
158.       for($i=1;$i<=$this->pageNow-1;$i++){    
159.  
160.         //ajax方式不显示 
161.         if($this->page_act != 1){ 
162.  
163.           $this->pageShow .= "<a class="pagenum" href="".$this->url."p=".$i."">".$i."</a>";  
164.         } 
165.       } 
166.  
167.     }else if($this->pageNow - $this->prePage -1 > 1){ //pageNow至少大于2时才会出现"1..." 
168.        
169.       //样式1.加上'首页' 
170.       if($this->pageStyle == 2 || $this->page_act == 1){ 
171.          
172.         //首页 
173.         $this->pageShow .= "<a id="first_page" class="pagenum" href="".$this->url."p=1">".$this->firstFonts."</a>"; 
174.  
175.         //style2.前n页 
176.         if($this->page_n == 1 && $this->page_act != 1){ 
177.          
178.           if($this->pageNow>$this->pn){ 
179.            
180.             $this->pageShow .= "<a id="pre_n_page" class="pagenum" href="".$this->url."p=".($this->pageNow-$this->pn)."">".$this->pn_fonts."</a>"; 
181.           } 
182.         } 
183.       } 
184.        
185.        
186.       //上一页 
187.       $this->pageShow .= "<a id="pre_page" class="pagenum" href="".$this->url."p=".($this->pageNow-1)."">".($preFonts == ""?$this->preFonts:$preFonts)."</a>"; 
188.        
189.       //样式1.加上第一页'1'、'...' 
190.       if($this->pageStyle == 1){ 
191.         $this->pageShow .= "<a class="pagenum" href="".$this->url."">1</a><a id="pre_page_2" class="pagenum" href="".$this->url."p=".($this->pageNow-$this->prePage-1)." " title="第".($this->pageNow-$this->prePage-1)."页">…</a>"; 
192.       } 
193.  
194.       for($i=$this->prePage;$i>=1;$i--){    
195.  
196.         //当前页和'...'之间的页码，ajax方式不显示 
197.         if($this->page_act != 1){ 
198.  
199.           $this->pageShow .= "<a class="pagenum" href="".$this->url."p=".($this->pageNow-$i)."">".($this->pageNow-$i)."</a>";  
200.         } 
201.       } 
202.     } 
203.   } 
204.  
205.   /**********************页码和后偏移量处理***************************/ 
206.   public function floOffset($nextFonts){ 
207.    
208.     if($this->totalPage > $this->floPage){ //总页数大于后偏移量时 
209.      
210.       for($i=0;$i<=$this->floPage;$i++){ 
211.        
212.         $page = $this->pageNow+$i; 
213.          
214.         if($page<=$this->totalPage){ 
215.  
216.           //页码,ajax方式不显示 
217.           if($this->page_act != 1){ 
218.  
219.             $this->pageShow .= "<a class="pagenum" href="".$this->url."p=".$page."">".$page."</a>"; 
220.           } 
221.         } 
222.       } 
223.  
224.       if($this->pageNow < $this->totalPage){ 
225.  
226.          
227.         //当前页+后偏移量+1小于总页数时出现"..." 
228.         if(($this->pageNow+$this->floPage+1)<$this->totalPage){ 
229.        
230.           //样式1.显示'...' 
231.           if($this->pageStyle == 1){ 
232.             $this->pageShow .= "<a id="flo_page_2" class="pagenum" href="".$this->url."p=".($page+1)."" title="第".($page+1)."页">…</a>"; 
233.           } 
234.         } 
235.          
236.          
237.         //当前页+后偏移量+1小于等于总页数时出现最后一页的快捷标签 
238.         if(($this->pageNow+$this->floPage+1)<=$this->totalPage){ 
239.          
240.           //最后一页 
241.           //样式1.始终出现'最后一页页码' 
242.           if($this->pageStyle == 1){ 
243.             $this->pageShow .= "<a class="pagenum" href="".$this->url."p=".$this->totalPage."" title="总共".$this->totalPage."页">".$this->totalPage."</a>"; 
244.           } 
245.         }            
246.  
247.         $this->pageShow .= "<a id="flo_page" class="pagenum" href="".$this->url."p=".($this->pageNow+1)."">".($nextFonts == ""?$this->nextFonts:$nextFonts)."</a>"; //当实例化对象时用户传递的文字为空时则调用类预设的"下一页",否则输出用户传递的值 
248.  
249.         //style2.加上后n页 
250.         if($this->pageStyle == 2 && $this->page_n == 1 && $this->page_act != 1){ 
251.          
252.           if(($this->pageNow+10)<$this->totalPage){ 
253.            
254.             $this->pageShow .= "<a id="flo_n_page" class="pagenum" href="".$this->url."p=".($this->pageNow+$this->fn)."">".$this->fn_fonts."</a>"; 
255.           } 
256.         } 
257.  
258.         //显示'末页' 
259.         if($this->pageStyle == 2){ 
260.          
261.           if(($this->pageNow+$this->floPage+1)<$this->totalPage){ 
262.  
263.             $this->pageShow .= "<a id="last_page" class="pagenum" href="".$this->url."p=".$this->totalPage."">末页</a>"; 
264.           } 
265.         } 
266.  
267.       }else if($this->pageNow > $this->totalPage){ 
268.        
269.         die("超出页码范围"); 
270.       } 
271.  
272.     }else{ //总页数小于后偏移量时 
273.        
274.       for($i=0;$i<$this->totalPage;$i++){ 
275.        
276.         $page = $this->pageNow+$i; 
277.         //页码后边界 
278.         $this->pageShow .= "<a class="pagenum" href="".$this->url."p=".$page."">".$page."</a>"; 
279.       } 
280.     } 
281.   } 
282.  
283.   /********************其它页面信息***********************/ 
284.   public function getOtherInfo(){ 
285.    
286.     //ajax方式不显示手动跳转信息 
287.     if($this->page_act != 1){ 
288.  
289.       $this->pageShow .= "&nbsp;跳转至 "; 
290.  
291.       //跳转类型 
292.       if($this->skipStyle =="" ){ //不加跳转 
293.      
294.         $this->pageShow .= ""; 
295.       }else if($this->skipStyle == 1){ //输入框 
296.      
297.         $this->pageShow .= "<input id="skip" type="text" value="".$this->pageNow."">"; 
298.      
299.         $this->pageShow .= "<button id="go">GO</button>"; 
300.       }else if($this->skipStyle == 2){ //下拉菜单 
301.      
302.         //选择下拉菜单自动跳转 
303.         $this->pageShow .= "<select id="select_page" onchange="location.href=this.options[this.selectedIndex].value;" >"; 
304.        
305.         for($i=1;$i<=$this->totalPage;$i++){ 
306.        
307.           $this->pageShow .= "<option value="".$this->url."p=".$i."""; 
308.          
309.           //下拉菜单默认显示当前页 
310.           if($i == $this->pageNow){ 
311.          
312.             $this->pageShow .= " selected"; 
313.           } 
314.          
315.           $this->pageShow .= ">".$i."</option>"; 
316.         } 
317.        
318.         $this->pageShow .= "</select>"; 
319.       } 
320.     } 
321.  
322.     $this->pageShow .= "<span id="pagenow_info">&nbsp;&nbsp;当前第".$this->pageNow."页</span>"; 
323.     $this->pageShow .= "/<span id="totalpage_info">共".$this->totalPage."页</span>"; 
324.     $this->pageShow .= "&nbsp;<span id="totalNum_info">共".$this->totalNum."条</span>"; 
325.   } 
326.  
327.    
328.   /*****************获取每页第一条信息*****************/ 
329.   public function getFirstRow(){ 
330.    
331.     $firstRow = $this->perpageNum * ($this->pageNow-1) + 1;//当前页第一条是总条数中第几条 
332.  
333.     return $firstRow; 
334.   } 
335.    
336.   /********************获得总页数***********************/ 
337.   public function getTotalPage(){ 
338.    
339.     $totalPage = ceil($this->totalNum / $this->perpageNum); 
340.     return $totalPage; 
341.   } 
342.  
343.   /* ****************获取上一页、下一页文字*************** */ 
344.  
345.   public function getPreFonts($preFonts){ 
346.    
347.       return ($preFonts=="")?$this->preFonts:$preFonts; 
348.   } 
349.    
350.   public function getNextFonts($nextFonts){ 
351.    
352.       return ($nextFonts=="")?$this->nextFonts:$nextFonts; 
353.   } 
354.  
355. } 

demo.php:

1. <?php 
2.  
3. require 'init.inc.php'; 
4. require 'page.class.php'; 
5. require 'conn/conn.php'; 
6.  
7. $perpageNum = 10; //每页数据条数 
8. $perPage = 4; //前分页偏移量 
9. $floPage = 4; //后分页偏移量 
10. $preFonts = ""; //"前一页"文字内容 
11. $nextFonts = ""; //"下一页"文字内容 
12. $page_n = 1; //样式2下是否加"前n页"、后n页，0为不加，1为加 
13. $skipStyle = 1; //跳转类型，可选1、2 
14. $pageStyle = 1; //样式类型，可选1、2、3( 样式3只包含"上一页"、"下一页"和页码 ) 
15. $page_act = 0; //0:url 和 1:ajax 
16.  
17. if($page_act == 1){ 
18.  
19.   //ajax方式分页时强制使用第二种样式 
20.   $pageStyle = 2; 
21. } 
22.  
23.  
24. $p = isset($_GET['p'])?$_GET['p']:1; //当前页码 
25.  
26. //在page.class.php中定义__toString方法，把对象$mypage解析成字符串输出 
27.  
28. //参数分别是:总条数、每页条数、前偏移量、"上一页"文字内容(默认为""时显示"上一页")、后偏移量、"下一页"文字内容(默认为""时显示"下一页")、当前地址栏页码数、手动跳转样式、页码显示样式、样式2是否加前n页后n页、分页方式(url/ajax) 
29.  
30. //获得总条数 
31. //输出列表 
32. $sql_all = "select title from ips_archives"; 
33.  
34. //总条数 
35. $totalNum = $conne->getRowsNum($sql_all); 
36.  
37. //实例化 
38. $mypageurl = new MyPageUrl($totalNum,$perpageNum,$perPage,$preFonts,$floPage,$nextFonts,$p,$skipStyle,$pageStyle,$page_n,$page_act); 
39.  
40.  
41. //每页第一条 
42. $firstRow = $mypageurl->getFirstRow(); 
43.  
44. //总条数 
45. $totalPage = $mypageurl->getTotalPage(); 
46.  
47. //输出列表 
48. $sql = "select title from ips_archives order by pubdate desc limit ".$firstRow.",".$perpageNum; 
49.  
50. //取出数据(二维数组) 
51. $rowsArray = $conne->getRowsArray($sql); 
52.  
53. //显示页码 
54. $pageShow = $mypageurl->preOffset($preFonts).$mypageurl->floOffset($nextFonts).$mypageurl->getOtherInfo(); 
55.  
56. $smarty->assign("Template_Dir",Template_Dir); 
57. $smarty->assign("page_act",$page_act); //传递分页方式 
58. $smarty->assign("pageNow",$p); //传递当前页 
59. $smarty->assign("perpageNum",$perpageNum); //传递每页几条数据 
60. $smarty->assign("totalPage",$totalPage); //传递总页数 
61. $smarty->assign("preFonts",$mypageurl->getPreFonts($preFonts)); //传递上一页文字信息 
62. $smarty->assign("rowsArray",$rowsArray); 
63. $smarty->assign("mypage",$mypageurl); 
64. $smarty->display("demo.html"); 

使用方法在demo.php的注释里

demo.html：

1. <!DOCTYPE html> 
2. <html> 
3. <head> 
4. <meta charset="utf-8"> 
5. <title>PHP分页类</title> 
6. <link href="<{$Template_Dir}>/css/common.css" rel="stylesheet" type="text/css"> 
7. <link href="<{$Template_Dir}>/css/style1.css" rel="stylesheet" type="text/css"> 
8. <script id="jq" src="<{$Template_Dir}>/js/jquery-1.8.3.min.js"></script> 
9. </head> 
10. <body> 
11.  
12.   <div id="list"> 
13.      
14.     <ul id="newsul"> 
15.        
16.       <{foreach $rowsArray as $val}> 
17.         <li><{$val['title']}></li> 
18.       <{/foreach}> 
19.  
20.     </ul> 
21.  
22.   </div> 
23.   <div id="page"><{$mypage}></div> 
24.   <input id="pageNow" type="hidden" value="<{$pageNow}>"> 
25.   <!--分页方式--> 
26.   <input id="page_act" type="hidden" value="<{$page_act}>"> 
27.   <!--每页几条数据--> 
28.   <input id="perpageNum" type="hidden" value="<{$perpageNum}>"> 
29.   <!--总页数--> 
30.   <input id="totalPage" type="hidden" value="<{$totalPage}>"> 
31.   <!--//把smarty的变量传递给外部js--> 
32.   <input id="Template_Dir" type="hidden" value="<{$Template_Dir}>"> 
33.   <input id="preFonts" type="hidden" value="<{$preFonts}>"> 
34. </body> 
35. <script> 
36.  
37.   $(function(){ 
38.    
39.     //遍历a 
40.     $(".pagenum").each(function(){ 
41.      
42.       if($(this).text() == $("#pageNow").val()){ 
43.      
44.         $(this).addClass("selected"); 
45.       } 
46.     }); 
47.      
48.     //如果存在跳转输入框 
49.     if($("#skip").length>0){ 
50.      
51.       $("#skip").keydown(function(){ 
52.        
53.         if(event.keyCode == 13){ //回车 
54.          
55.           self.location="demo.php?p="+$(this).val(); 
56.         } 
57.       }); 
58.     } 
59.  
60.     //点击"GO"按钮跳转 
61.     if($("#go").length>0){ 
62.      
63.       $("#go").click(function(){ 
64.        
65.         self.location="demo.php?p="+$("#skip").val(); 
66.       }); 
67.     } 
68.      
69.     //如果分页方式是ajax，则加载外部ajax.js 
70.     if($("#page_act").val() == 1){ 
71.      
72.       //把smarty的变量传递给外部js 
73.       $Template_Dir = $("#Template_Dir").val(); 
74.       $preFonts = $("#preFonts").val(); 
75.  
76.       $insertAjax = $("<script src="<{$Template_Dir}>/js/ajax.js"></script>"); 
77.       $insertAjax.insertAfter($("#jq")); 
78.     } 
79.  
80.     //最后一行row去掉border-bottom 
81.     $("#list ul").children("li:last").css("border-bottom",0); 
82.   }); 
83. </script> 
84. </html> 

ajaxpage.php:

ajax.js:

common.css:

style1.css:

init.inc.php:

代码下载地址：https://github.com/dee0912/PageClass