PEAR-像Google一样的分页功能(1)

PEAR-像Google一样的分页功能(1)

PHP/PEAR
Pager套件像Google一样的分页功能
介绍

读者应该行使用过Google这个超好用的搜寻引擎吧。每次搜寻后出现的资料数量总是多的令人吃一惊，有时甚至高达数千笔，数万笔。像如此多笔的数据是无法用一个网页来呈现的，Google的作法是将众多的搜寻结果以每页十笔、并在下方用页码超连结的方式来加以呈现，以下这个画面相信您一定不陌生：






这就是所谓的分页效果，当然资料数量庞大到无法用一个页面显示所有资料的时候，开发者往往会使用分页的功能来呈现数据。除了因为数据量大，无法用一页显示外，分页还可加快存取数据的速度，并让数据的排序显得井然有序。

在PEAR中，有一个专门针对「分页」功能来设计的套件，就是Pager套件。使用这个套件可让开发者用很简单的方式做到分页的效果，并且完全不必使用DB套件的1imitQuely() 方法来限制存取数据的范围，也不用撰写PHP来做翻页的超级链接。另外，套件内还提供许多设定项目让开发者根据本身的需求来调整分页的外观，更妙的是，可以在一个网页中放入多个分页效果。

安装

一开始安装PEAR的基本套件时，若读者是使用windows系统，就已经将Pager这个套件给安装起来了，也就是说，Pager是一个PEAR的必备套件。

若是使用Linux或FreeBSD系统，可能安装的基本套件中并不合Pager套件，这个时候请用“pear install pager”这个指令来安装。读者可以使用“pear list”指令来看看目前系统中是否已按装Pager套件，如下图：






以上图中笔者现有安装的套件为例，倒数第3个就是Pager套件，画面并显示版本编号为2.2.4，且stable版。若您曾经安装过的是旧版本，你可以升级现有最新的版本，请用“pager Upgrade pager”指令，将套件升级。本章提到许多功能需要在2.XX的版木环境下才可执行。

为了方便对「分页效果」作说明，笔者先将Pager套件所产生分页画面显示给读者观看。目前Pager提供两种分页的方式，一种称为「Jumping」另一种称为「Sliding」，请大家注意！ 第一个字母都是大写。这两种方式的分页有一些些不同，底下笔者将对这两种方式的不同处做个比较，并针对各个分页的细部功能定义一些名词。

►Jumping方式

举例来说，要将某一个含有104笔数据录的数据表用每页5笔的方式显示在网页上，总共将会分成21页，每一页的页码会放在页面的最下方并设置超级链接连到各页面，每个页码间用一个「空白」来加以分隔。

另外，Jumping方式可以让开发者不用将2 I个页码全部显示出来，显示多少页可由开发者决定，例如，希望一次只显示10页，免得页码太多影响画面的美观。显示画面为下图：






请读者注意画面最下方，出现1个非超级链接与9个超链接的页码。一开始进入网页通常出现的是第1页的内容，所以第1页的页码并不需要有超链接。

页码的后方有一个Next>>的超链接，可让使用者查阅第10页以后的资料。若使用者按下2这个页码的超链接，画面会变成：






请先注意最上方的网址列，最后出现一个“?pageID=2”的字符串。它是代表当使用者在上一个画面中按下2时，会将一个名称为pagelD，变数值为2的变数，用get的方式传送到服务器端，用来作为让服务器判断要显示哪一个页码的资料。

另外，最下方的2变成没有超链结了，且页码的最前方出现了<
若浏览者想点阅第10页以后的页码，稍微麻烦的足，必须先按下10这个页码的超链接后，再按下Next>> 超链结才可进入第11页起到第20页的10个页码连结。

以下两个图显示了若要观看第10页以后的数据，需要有两个步骤：

1．先点选页码10来到第10页。





2．接着再点选Next>>，就可以进入第11页到第20页。






这就是Jumping方式的分页，也是Pager套件的预设分页方式，笔者觉得这个分页方式功能已经十分完整了，不过下一个介绍的Sliding方式在跳页的功能上比Jumping更优胜。

这个方式与Jumping方式最主要的不同点在于：被点选的页码，会出现在所有页码的正中间，也就是说Jumping方式下方的页码不会跳动，只有当按下最后一个页码后再按下Next>>超链结，页码才会变动，但Sliding方式会让被点选的页码跳至所有页码的中央位置。

另外，这个方式预设会用“|”符号作为页码的分隔，最后面还会有一个最末页的页码超链结，可让使用者立刻就跳至最后一页。

Sliding方式的分页如下图，当第1次进入网页时，会出现第1页。






若点选的页码一直往后增加，被点选的页码会出现在正中间，而且，最前面会出现第1页的页码，让使用者可以立刻回到第1页，另外页码前后还有<<与>>两个超链接可让读者往前翻与往后翻页。例如下图中，笔者点选第8页，8这个页码就会跑到所有页码的正中央，最前面会出现第1页的页码，最后面会出现最末页的页码：









这里要提醒读者注意一下，PEAR中有一个名为HTML Pager的套件．这个套件与Pager套件是不一样的，请不要装错。另外，很久以前，当Pager还是1.xx版时，Pager套件与Pager_Sliding套件分别代表Jumping与Sliding两种分页方式，但是当Pager套件发展到2.x.x时，这两种分页方式已经整合在一个套件内了。所以，若安装了Pager2.x.x以上版本的套件，就可以不用在安装Pager_Sliding套件了。

▓1-4 简单范例

为了用范例来介绍套件的用法，笔者建立了一个名为Schoolnews的数据库，内含一个名为news的数据表，并在其中放入了104笔数据。

另外，笔者尝试用最简单的方法，尽量利用套件的预设设定来将数据表的104笔数据显示在网页上，并建立分页的效果，目的是让读者先了解最简单的Pager套件使用方式，范例档为example9-1.php,程序码如下:






首先，第2行与第3行分别引入DB的类别档与Pager的类别档，DB的类别档先查阅PHP PEAR的文章，这是用来做数据库连线与存取的套件。Pager的类别档是第1次引用，请大家注意引用方式。

第4行先利用DB类别的connect方法建立与schoolnews数据库的连线物件，第5行建立一段SQL叙述，内容是抓取所有news数据表中的所有数据，并依照日期由近到远来排序。

接着第6行再利用连线对象的getAll( )方法，将抓取的资料以阵列的形式放入变数$rows中。最后第7行将数据库连线关闭。

把数据表news中104笔数据全部抓出来并以阵列的形式放入$rows变数后，就可以开始进行分页的工作了。进行分页之前，需对分页功能的一些设定选项做设定。并把设定的结果放入一个阵列中。


第8行到第12行,就是一个简单的「分页设定项」所组成的阵列，在个范例中的设定项阵列设定了四个项目。分别是:

●mode : 设定分页的形式，设定值只可以是“Jumping”或“Slidhg”字符串,此范例先用Jumping方式。

●perPage : 这个设定项目是设定每页出现的数据笔数，本范围设定每页显示5笔数据。

●delta : 页面检索会出现的页码数量,本范围设定一次出现10个页码。

●itemData : 要显示的数据所组成的阵列，此处指的就是$rows这个用连线物件的getAll（）方法所取得的阵列。

事实上,分页相关的设定项目总共有32项，除了itemData这个项目是要设定的项目外，其它都可以用预设值。

有了$params这个阵列，就可以开始建立一个「Pager物件」了。方法一样是用new, 但是$params阵列必须当作建立物件的参数,如第13行。

pager物件建立完成后,笔者将该物件放入$pager变数中,也就是说，$pager变数就是一个依照$params阵列所指定的设定值来产生的Pager物件。

接着第14行用Pager物件提供的getPageData（）方法,将网页浏览者点到选某页面时，属于该页面的数据全部抓出来，放入$datas变数中。例如网页第1次载入时的画面是第一页，getPageData ( )方法就会将第1页的5笔数据用阵列的形式放入$datas变数中，若是使用者点选第5页的页码，$datas变数的内容就是属于第5页的5笔数据所组成的阵列。

剩下的工作，就是使用者所点选的那一页的数据显示出来，整个范例就可以大功告成了。
可大功告成了

第19行, 利用foreach迥圈,将$datas阵列中的5笔数据一笔一笔地取出并放入$data变数中。

第2l行与第22行中，配合一些HTML标签，将每笔数据中第2、第4、第16个栏位的数据显示出来。

第27行，使用Pager物件的getLinks ( )方法来建立「页数检索」，这个方法会传回所有页码超连结的HTML标签，这些都是以阵列的形式放入$Links变数中，这个变数中有一个较为特殊的key叫做“all”，这个key的value的值其实是页码超连结的HTML标签合而成的。

第28行用echo的方法将$links变数中，key为“all”的value显示出来。

最后第32行用Pager物件的的numPages()方法与numltems()来取得总页数与总数据笔数，并用echo的方式显示给使用者知道。

执行结果如下：





可以清楚看到每页显示5笔数据，而且页码只出现1~10，完全符合笔者设定的$params阵列的值。

$links [‘all’]变数的内容就是画面中倒数第2行“页数检索：” 后面的那一大串页码的超连结。在最下方，可看到Pager物件的numPages()方法与numItems()方法分别取出的总页数为21与总数据笔数为104这两个字。

若笔者将上一个范例中$params阵列的mode设定项目改为“Sliding”字串，也就是分页的方式改为使用Sliding方式，另外将delta设定项目改为正整数5，其余程序码不变，此时delta代表的不是总共出现的页码，而是被点选的页码前后出现几个页码，则执行结果如下图，范例档名为example9-2.php：

页数检索的方式变成不一樣了，例如，当使用者点选页码8时，8会出现在页数检索的正中央，而且前后各有5个页码，符合delta的设定值，另外，前后各出现第1页与最未页的超连结，还有<<与>>这两个超连结让使用者翻页。







如果，使用者点选页码8后继续点选页码9，会变成页码9在所有页码的正中央，前后各5个页码，分页的方式就以这种方式一直滑下去(Sliding的意思就是「滑」)，这种方式就称为Sliding。


综合以上说明，无论是Jumping还是Sliding的分页方式，可以将建立分页的基本流程分为以下几个步骤：

1．引用DB、Pager类別档。
2．用DB连线物件的getAll()方法取得所有数据录。
3．建立分页的设定项阵列。
4．建立符合设定项阵列的分页物件。
5．用分页物件的getPageData()方法取得某一页的数据录。
6．用foreach回圈将数据录内容显示出来。
7．显示所有页码的超连结。
8. 显示全部页数与全部数据录的笔数。

只要遵循以上8个步骤就可以建立一个基本的分页机制，至於更进阶的分页设定或分页物件的其他方法，后面笔者再进一步的逐一說明。

▓1-5设定项的设定

上一个范例中，笔者在$parmas阵列中设定了最基本的四个设定值，事实上，Pager物件的两种分页方式总共有32个设定项目可以设定，这32个项目除了itemData外都有预设值，若开发者没有在$params阵列中特别设定某些项目的值，Pager物件将会使用预设值。

为何要有这麼多的设定项? 因为无论是Jumping或Sliding，虽然都十分好用，但是有些开发者可能对分页的效果想要做细部调整，例如华人世界的开发者，想将分页中文化等。这些需求都可籍由设定项目的设定来修改分页的外观，以符合开发者的需求。

底下就经常会用到的设定项目分別加以說明：

►itemData、perPage、deIta 、以及mode等四个设定项

这四个设定项先前范例中已经有提到并說明之，所以笔者不再赘述。只将这些设定项的设定值的数据型态再加以补充。

●itemData：设定值须为阵列，阵列內容就是所有要显示的数据录，这个项目是唯一沒有预设值的项目。

●perPage：设定值须为大於0的正整数，代表每一页希望出现的数据笔数。

●delta ：设定值须为大於0的正整数，对Jumping模式而言，de!ta代表页数检索中出现页码的总数，对Sliding模式而言，delta代表被点选的页码前后出现的页码数目。

●mode：设定值只可以是“Jumping”或“Sliding”两个字串，代表的意义是分页显示的模式。

►currentPage设定项

这个设定项若要可以使用，Pager套件的版本需大于2.2.6版。设定值的型态须为大於0的正整数。这个设定项可让网页第1次载入时，出现的页面不是第1页，至於是第几页，则由设定值来決定。

例如，笔者希望网页一载入就出现第3页，沿用example9-2.php的范例档做說明，只要在$param阵列中多加入一行：






也就是说$params阵列变成：






其余的程式码完全一樣，修改后的网页存成范例档example9-3.php，执行结果如下图：







由上图可看出，第1次载入exeample9-3.php出现的不是第1页，而是第3页。

►urlVar设定项

这个设定项足用来更改分页的urlVar变数的名称。所谓urlVar变数，是一个用来放置网页浏览者所点选的页码，并供服务器判断该显示哪一页的一个变数，通常会附在url之后，urlVar预设的变数名称是pagelD。

例如，笔者将范例档example9-1.php 原封不动的拷贝成范例档example9-4.php，执行后当笔者点选页码3，网址列的url后面会出现“？PageID=3”，也就是說，点选超连结时，有一个名为$pageID的变数，其值等于3，会借由get的方式将变数与值送到服务器端，供服务器辨认浏览者点选的页码。

执行结果如下图：






若笔者修改example9-4.php档的原始码，在$params阵列加入一行设定，内容为：







这个设定的意思就是将预设的urlVal变数的名称由pageID改为mypageid，存档后重新执行example9-4.php，会发现url后面的变数名称已改变，如下图：







上图中可清楚看到，网址列后面的变数不是pagelD了，变成是mypageid。

对大家而言，可能会有一个疑问，改url的变数名称会用在什麼情況下呢?其实，这个设定项会需要修改大都是因为用在一个网页內有两个以上分页的情况。

若一个网页有两个以上的分页机制，而预设的urlVar名称都是pagelD．也就是沒有修改这个设定项的话，会造成分页时的混淆，若浏览者点选某一个分页的页码，其他分页也会跟著变动，所以若有两个以上的分页机制，则每个分页都必须将urlVar改为不同的名称，才不会造成这种现象。

►altPrev、altNext、以及altPage设定项

这三个设定项都是用来修改超连结的ALT属性內容，而且设定值的型态都必须是字串。

何谓「ATL属性」? 当使用者将鼠标指向网页內某一个超连结的瞬间，鼠标旁会出现小小的方框，內有该超连结的简单說明，这就是ALT属性。假设笔者将范例档example9-1.php拷贝成example9-5.php，执行后在页数检索中会出现三种ALT属性：

⒈ 当使用者鼠标移到<





⒉ 当鼠标移到页码的超连结时，滑鼠旁会出现“pageX”，其中X代表页码，如下图：






当鼠标到Next>>这个超连结时，鼠标旁会出现“next page”，如下图：






若开发者希望修改这三个ALT属性，只需要在$params中加入三个设定：






也就是example9-5.php的$params阵列改为：






其余程式码维持不变就可以了。

altPrev设定项代表的是<>这个超连结的ALT属性，altPage设定项代表的是页码连结的ALT属性。

Example9-5.php修改后存档，并重新执行的结果会如以下图形：

第1个图形．当鼠标移到<






● 第2个图形，当鼠标移到某个页码的超链结时，ALT属性变成“页X”。







● 第3个图形，当鼠标移到Next >>这个超链结时，ALT属性变成了“后一页”。






虽然，有些网页设计者不太重视ALT属性，但却有一些设计者对网页的每个细节者要求要做到尽善尽美，这三个设定项设与不设，就由读者您自己决定吧。

►prevImg与nextImg设定项

这两个设定项对使用中文的开发者而言就很实用了。Jumping方式的分页范例叫页数搜索的前后各出现了<< Back 与Next >>两个超级链接，这两个字都是英文，比较不适合华人的网页浏览者，若开发者想要将这两个超级链接的文字改为中文，只要改这两个设定就可以了，另外，这两个设定也可以让开发者使用图形来取代文字。

设定值的型态都是字符串，只是修改文字与使用图形的字符串内容会有所不同。

若在example9-1.php的$params数组中加入两个设定如下，并转存成example9-6.php：





prevImg设定项代表<>改变后的文字。执行结果如下图：





出现中文字了，这对华人开发者而言是不是有些感动呀。

若开发者想改用图案来取代文字的话，首先当然需要先制作两个图片，例如，我自制了两个很丑的图片( 让大家眼睛辛苦了)，分别是pre.gif与next.gif，准备用来取代<> 将example9-6.php拷贝为example9-7.php当作范例文件，这两个图档放在与example9-7.php同一个路径下。

Example9-7.php的程序代码中$params数组的prevImg与nextImg设定项若更改如下：





这两个设定项的值是一行字 内容是插入图片的HTML标签。img代表图案的意思，src=的后面是图案的路径与文件名，border是图案的框线，预设为l个像素，笔者将范例中的框线改为0个像素宽。修改完成后存盘，执行结果如下图：





出现了，前后两个超级链接已经被自制的图档所取代。若您是一位非常会设计图案的读者，这两个可放入图案的设定项将可大大提升分页的美观度，让您的分页与众不同喔。

►separator设定项

页码与页码之间需要有适度的分隔，页数搜索看起来才不会感觉拥挤。在Pager套件中，Jumping模式与Sliding模式页码间都有分隔，前者预设是使用空白，后者预设是使用“|”，若开发者想加入自己的创意，修改预设的分隔符，只要加入separator设定项就可以了。

这个设定项的值需为字符串，而字符串的内容除了符号或文字以外，也可以如同上一个范例般使用图片。

首先，笔者将范例example9-1.php，转存成example9-8.php，并在$params数组中加入一行设定如下：






这个设定的意思是说将分隔由空白改为“ * ”号，执行结果如下图：







页数搜索的分隔很轻易地就改变了。

若要将分隔改为图片的话，笔者第1步先将example9-8.php转存成example9-9.php当作范例文件，第2步我又做了一个好丑的图片(请见谅)名为sep.gif，同样放在范例文件相同路径下，第3步，修改程序代码中$params数组的separator设定项的值如下：






也就是将分隔符改为由sep.gif这个图档来取代。执行结果如下图：







这是笔者随手捡来的图案，作一个例子，相信读者应该可以设计出很美观的分隔图案，丰富您的网页内容。