推荐一款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页。博客园的列表页( /d/file/titlepic/ 是相同的处理方式。

3.淘宝网宝贝列表页( /d/file/titlepic/login.jhtml ( 还有个小小的效果，点击去第几页的输入框时会弹出确定按钮 )，也包含首页，只不过首页是用页码1代替。分页偏移量前后都是2页

4.虾米列表( /d/file/titlepic/ … )、信息，也包括以页码1显示的首页。分页偏移量为前2页后5页

最后是织梦官网文章列表页( /d/file/titlepic/list_133_11.html)%ef%bc%8c%e5%8c%85%e5%90%ab%e4%ba%86& 分页 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:

<?phpclass mypageurl{private $totalnum;private $perpagenum;    //每页显示条数  private $pagenow;      //当前页页码private $url;        //当前url//页码显示private $pagestyle; //页码样式，提供2种样式private $prepage;    //页码前偏移量private $flopage;    //页码后偏移量private $skipstyle;    //手动跳转，0为手动输入页码，1为下拉菜单选择页码private $page_act;    //翻页样式 0:url 1:ajax//页码文字//style2&style3private $firstfonts = "首页";private $lastfonts = "末页";private $nextfonts = "下一页 >";    private $prefonts = "< 上一页";//前n页，后n页private $page_n;private $pn = 10;private $pn_fonts = "前10页";private $fn = 10;private $fn_fonts = "后10页";//展现的页码private $pageshow;//构造函数function __construct($totalnum,$perpagenum,$prepage,$prefonts,$flopage,$nextfonts,$p,$skipstyle,$pagestyle,$page_n,$page_act){$this->totalnum = $totalnum;$this->perpagenum = $perpagenum;$this->prepage = $prepage;$this->flopage = $flopage;$this->skipstyle = $skipstyle;$this->pagestyle = $pagestyle;$this->page_n = $page_n;$this->page_act = $page_act;$this->getpagenow($p);$this->totalpage = $this->gettotalpage(); //总页数$this->pageshow = "";$this->geturl();}/************定义__tostring方法,把对象解析成字符串******/public function __tostring(){return $this->pageshow;}/************获得当前页页码,$p用来接收$_get['p']*******/public function getpagenow($p){if(!ist($p)){$this->pagenow = 1;}el if($p>0){$this->pagenow = $p;  }el{die("page number error");}return $this->pagenow;}/***********************设置当前页面链接***************/public function geturl(){$url = "http://".$_rver['http_host'].$_rver['request_uri'];//判断是否带参数if(strpos($url,"?") === fal){ //不带参数return $this->url = $url."?";}el{ //带参数$url = explode("?",$url);//参数$param = $url[1];//判断是否有多个参数if(strpos($param,"&") === fal){ //只有一个参数//判断参数是否为pif(strpos($param,"p=") === fal){ //不含参数p//合并url$url = implode("?",$url);  return $this->url = $url."&";}el{//把参数p去掉$url = $url[0];return $this->url = $url."?";}}el{ //多个参数$param = explode("&",$param);//遍历参数数组foreach($param as $k=>$v){if(strpos($v,"p=") === fal){continue;}el{//当含有参数p时，把它从数组中删除unt($param[$k]);}}//删除参数p之后组合数组$param = implode("&",$param);$url[1] = $param;$url = implode("?",$url);return $this->url = $url."&";}}}/************************前偏移量处理********************/public function preofft($prefonts){//前偏移量的处理if($this->pagenow!=1 && ($this->pagenow - $this->prepage -1 <= 1)){//上一页$this->pageshow .= "<a id=\"per_page\" class=\"pagenum\" href=\"".$this->url."p=".($this->pagenow-1)."\">".($prefonts == ""?$this->prefonts:$prefonts)."</a>";//页码for($i=1;$i<=$this->pagenow-1;$i++){    //ajax方式不显示if($this->page_act != 1){$this->pageshow .= "<a class=\"pagenum\" href=\"".$this->url."p=".$i."\">".$i."</a>";  }}}el if($this->pagenow - $this->prepage -1 > 1){ //pagenow至少大于2时才会出现"1..."//样式1.加上'首页'if($this->pagestyle == 2 || $this->page_act == 1){//首页$this->pageshow .= "<a id=\"first_page\" class=\"pagenum\" href=\"".$this->url."p=1\">".$this->firstfonts."</a>";//style2.前n页if($this->page_n == 1 && $this->page_act != 1){if($this->pagenow>$this->pn){$this->pageshow .= "<a id=\"pre_n_page\" class=\"pagenum\" href=\"".$this->url."p=".($this->pagenow-$this->pn)."\">".$this->pn_fonts."</a>";}}}//上一页$this->pageshow .= "<a id=\"pre_page\" class=\"pagenum\" href=\"".$this->url."p=".($this->pagenow-1)."\">".($prefonts == ""?$this->prefonts:$prefonts)."</a>";//样式1.加上第一页'1'、'...'if($this->pagestyle == 1){$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>";}for($i=$this->prepage;$i>=1;$i--){    //当前页和'...'之间的页码，ajax方式不显示if($this->page_act != 1){$this->pageshow .= "<a class=\"pagenum\" href=\"".$this->url."p=".($this->pagenow-$i)."\">".($this->pagenow-$i)."</a>";  }}}}/**********************页码和后偏移量处理***************************/public function floofft($nextfonts){if($this->totalpage > $this->flopage){ //总页数大于后偏移量时for($i=0;$i<=$this->flopage;$i++){$page = $this->pagenow+$i;if($page<=$this->totalpage){//页码,ajax方式不显示if($this->page_act != 1){$this->pageshow .= "<a class=\"pagenum\" href=\"".$this->url."p=".$page."\">".$page."</a>";}}}if($this->pagenow < $this->totalpage){//当前页+后偏移量+1小于总页数时出现"..."if(($this->pagenow+$this->flopage+1)<$this->totalpage){//样式1.显示'...'if($this->pagestyle == 1){$this->pageshow .= "<a id=\"flo_page_2\" class=\"pagenum\" href=\"".$this->url."p=".($page+1)."\" title=\"第".($page+1)."页\">…</a>";}}//当前页+后偏移量+1小于等于总页数时出现最后一页的快捷标签if(($this->pagenow+$this->flopage+1)<=$this->totalpage){//最后一页//样式1.始终出现'最后一页页码'if($this->pagestyle == 1){$this->pageshow .= "<a class=\"pagenum\" href=\"".$this->url."p=".$this->totalpage."\" title=\"总共".$this->totalpage."页\">".$this->totalpage."</a>";}}            $this->pageshow .= "<a id=\"flo_page\" class=\"pagenum\" href=\"".$this->url."p=".($this->pagenow+1)."\">".($nextfonts == ""?$this->nextfonts:$nextfonts)."</a>"; //当实例化对象时用户传递的文字为空时则调用类预设的"下一页",否则输出用户传递的值//style2.加上后n页if($this->pagestyle == 2 && $this->page_n == 1 && $this->page_act != 1){if(($this->pagenow+10)<$this->totalpage){$this->pageshow .= "<a id=\"flo_n_page\" class=\"pagenum\" href=\"".$this->url."p=".($this->pagenow+$this->fn)."\">".$this->fn_fonts."</a>";}}//显示'末页'if($this->pagestyle == 2){if(($this->pagenow+$this->flopage+1)<$this->totalpage){$this->pageshow .= "<a id=\"last_page\" class=\"pagenum\" href=\"".$this->url."p=".$this->totalpage."\">末页</a>";}}}el if($this->pagenow > $this->totalpage){die("超出页码范围");}}el{ //总页数小于后偏移量时for($i=0;$i<$this->totalpage;$i++){$page = $this->pagenow+$i;//页码后边界$this->pageshow .= "<a class=\"pagenum\" href=\"".$this->url."p=".$page."\">".$page."</a>";}}}/********************其它页面信息***********************/public function getotherinfo(){//ajax方式不显示手动跳转信息if($this->page_act != 1){$this->pageshow .= "跳转至 ";//跳转类型if($this->skipstyle =="" ){ //不加跳转$this->pageshow .= "";}el if($this->skipstyle == 1){ //输入框$this->pageshow .= "<input id=\"skip\" type=\"text\" value=\"".$this->pagenow."\">";$this->pageshow .= "<button id=\"go\">go</button>";}el if($this->skipstyle == 2){ //下拉菜单//选择下拉菜单自动跳转$this->pageshow .= "<lect id=\"lect_page\" onchange=\"location.href=this.options[this.lectedindex].value;\" >";for($i=1;$i<=$this->totalpage;$i++){$this->pageshow .= "<option value=\"".$this->url."p=".$i."\""; //下拉菜单默认显示当前页if($i == $this->pagenow){$this->pageshow .= " lected";}$this->pageshow .= ">".$i."</option>";}$this->pageshow .= "</lect>";}}$this->pageshow .= "<span id=\"pagenow_info\">当前第".$this->pagenow."页</span>";$this->pageshow .= "/<span id=\"totalpage_info\">共".$this->totalpage."页</span>";$this->pageshow .= "<span id=\"totalnum_info\">共".$this->totalnum."条</span>";}/********云想衣裳花想容下一句*********获取每页第一条信息*****************/pub残奥会奖牌榜排名2021lic function getfirstrow(){$firstrow = $this->perpagenum * ($this->pagenow-1) + 1;//当前页第一条是总条数中第几条return $firstrow;}/********************获得总页数***********************/public function gettotalpage(){$totalpage = ceil($this->totalnum / $this->perpagenum);return $totalpage;}/* ****************获取上一页、下一页文字*************** */public function getprefonts($prefonts){return ($prefonts=="")?$this->prefonts:$prefonts;}public function getnextfonts($nextfonts){return ($nextfonts=="")?$this->nextfonts:$nextfonts;} }

demo.php:

<?phprequire 'init.inc.php';require 'page.class.php';require 'conn/conn.php';$perpagenum = 10; //每页数据条数$perpage = 4; //前分页偏移量$flopage = 4; //后分页偏移量$prefonts = ""; //"前一页"文字内容$nextfonts = ""; //"下一页"文字内容$page_n = 1; //样式2下是否加"前n页"、后n页，0为不加，1为加$skipstyle = 1; //跳转类型，可选1、2$pagestyle = 1; //样式类型，可选1、2、3( 样式3只包含"上一页"、"下一页"和页码 )$page_act = 0; //0:url 和 1:ajaxif($page_act == 1){//ajax方式分页时强制使用第二种样式$pagestyle = 2;}$p = ist($_get['p'])?$_get['p']:1; //当前页码//在page.class.php中定义__tostring方法，把对象$mypage解析成字符串输出//参数分别是:总条数、每页条数、前偏移量、"上一页"文字内容(默认为""时显示"上一页")、后偏移量、"下一页"文字内容(默认为""时显示"下一页")、当前地址栏页码数、手动跳转样式、页码显示样式、样式2是否加前n页后n页、分页方式(url/ajax)//获得总条数//输出列表$sql_all = "lect title from ips_archives";//总条数$totalnum = $conne->getrowsnum($sql_all);//实例化$mypageurl = new mypageurl($totalnum,$perpagenum,$perpage,$prefonts,$flopage,$nextfonts,$p,$skipstyle,$pagestyle,$page_n,$page_act);//每页第一条$firstrow = $mypageurl->getfirstrow();//总条数$totalpage = $mypageurl->gettotalpage();//输出列表$sql = "lect title from ips_archives order by pubdate desc limit ".$firstrow.",".$perpagenum;//取出数据(二维数组)$rowsarray = $conne->getrowsarray($sql);//显示页码$pageshow = $mypageurl->preofft($prefonts).$mypageurl->floofft($nextfonts).$mypageurl->getotherinfo();$smarty->assign("template_dir",template_dir);$smarty->assign("page_act",$page_act); //传递分页方式$smarty->assign("pagenow",$p); //传递当前页$smarty->assign("perpagenum",$perpagenum); //传递每页几条数据$smarty->assign("totalpage",$totalpage); //传递总页数$smarty->assign("prefonts",$mypageurl->getprefonts($prefonts)); //传递上一页文字信息$smarty->assign("rowsarray",$rowsarray);$smarty->assign("mypage",$mypageurl);$smarty->display("demo.html");

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

demo.html：

<!doctype html><html><head><meta chart="utf-8"><title>php分页类</title><link href="<{$template_dir}>/css/common.css" rel="stylesheet" type="text/css"><link href="<{$template_dir}>/css/style1.css" rel="stylesheet" type="text/css"><script id="jq" src="<{$template_dir}>/js/jquery-1.8.3.min.js"></script></head><body><div id="list"><ul id="newsul"><{foreach $rowsarray as $val}><li><{$val['title']}></li><{/foreach}></ul></div><div id="page"><{$mypage}></div><input id="pagenow" type="hidden" value="<{$pagenow}>"><!--分页方式--><input id="page_act" type="hidden" value="<{$page_act}>"><!--每页几条数据--><input id="perpagenum" type="hidden" value="<{$perpagenum}>"><!--总页数--><input id="totalpage" type="hidden" value="<{$totalpage}>"><!--//把smarty的变量传递给外部js--><input id="template_dir" type="hidden" value="<{$template_dir}>"><input id="prefonts" type="hidden" value="<{$prefonts}>"></body><script>$(function(){//遍历a$(".pagenum").each(function(){if($(this).text() == $("#pagenow").val()){$(this).addclass("lected");}});//如果存在跳转输入框if($("#skip").length>0){$("#skip").keydown(function(){if(event.keycode == 13){ //回车lf.location="demo.php?p="+$(this).val();}});}//点击"go"按钮跳转if($("#go").length>0){$("#go").click(function(){lf.location="demo.php?p="+$("#skip").val();});}//如果分页方式是ajax，则加载外部ajax.jsif($("#page_act").val() == 1){//把smarty的变量传递给外部js$template_dir = $("#template_dir").val();$prefonts = $("#prefonts").val();$inrtajax = $("<script src=\"<{$template_dir}>/js/ajax.js\"><\/script>");$inrtajax.inrtafter($("#jq"));}//最后一行row去掉border-bottom$("#list ul").children("li:last").css("border-bottom",0);});</script></html>

ajaxpage.php:

<?phprequire 'conn/conn.php';if(ist($_post['pagenow']) && !empty($_post['pagenow'])){$pagenow = $_post['pagenow'];}//每页几条数据if(ist($_post['perpagenum']) && !empty($_post['perpagenum'])){$perpagenum = $_post['perpagenum'];}//当前页第一条数据$firstrow = $perpagenum * ($pagenow-1) + 1;$sql = "lect title from ips_archives order by pubdate desc limit ".$firstrow.",".$perpagenum;$rowsarray = $conne->getrowsarray($sql);//把二维数组转换成json格式echo json_encode($rowsarray);

ajax.js:

//删除原先的li,插入giffunction ajaxpre(){//删除原先的title$("#newsul li").remove();//插入gif图$loading = $("<img class=\"loading\" src=\""+$template_dir+"/images/loading.gif\">");$loading.appendto($("#newsul"));}//隐藏翻页信息function infoact(){//当前页到达尾页时，"下一页"和"末页"if(parint($("#pagenow").val()) == par和谐社会论文int($("#totalpage").val())){$("#flo_page").hide();$("#last_page").hide();$("#pre_page").show();$("#first_page").show();}el if(parint($("#pagenow").val()) == 1){ //当前页到达时隐藏"首页"和"上一页"$("#pre_page").hide();$("#first_page").hide();$("#flo_page").show();$("#last_page").show();}el{if($("#pre_page").is(":hidden") || $("#pre_page").length == 0){$("#pre_page").show();}if($("#first_page").is(":hidden") || $("#first_page").length == 0){$("#first_page").show();}if($("#flo_page").is(":hidden") || $("#flo_page") == 0){$("#flo_page").show();}if($("#last_page").is(":hidden") || $("#last_page").length == 0){$("#last_page").show();}}}//点击"下一页"、"末页"时出现"首页"和"上一页"function showpage(){//首页$firstpage = $("<a id=\"first_page\" class=\"pagenum\">首页</a>");if($("#first_page").length == 0){$firstpage.inrtbefore($("#flo_page"));}//上一页$pre_page = $("<a id=\"pre_page\" class=\"pagenum\">"+$prefonts+"</a>");if($("#pre_page").length == 0){$pre_page.inrtbefore($("#flo_page"));}}//ajax请求数据function ajaxpost(){$.post("ajaxpage.php",{pagenow : parint($("#pagenow").val()),perpagenum : parint($("#perpagenum").val())},function(data,textstatus){//接收json数据var dataobj=eval("("+data+")"); //转换为json对象 //删除gif$(".loading").remove();$.each(dataobj,function(idx,item){ $li_new = $("<li>"+item.title+"</li>");$li_new.appendto($("#newsul"));})$("#list ul").children("li:last").css("border-bottom",0);});}//初始值=1apagenow = parint($("#pagenow").val());//ajax "首页" 因为"首页"和"上一页"一开始是不出现的，所以只有在"下一页"和"末页"的的点击函数中调用"首页"和"上一页"函数function firstpageact(){if($("#first_page").is(":visible")){$("#first_page").click(function(){//删除更新前的ajaxpre();//pagenow设为1$("#pagenow").val(1);apagenow = parint($("#pagenow").val());//修改页码信息$("#pagenow_info").html("当前第1页");//ajax请求数据ajaxpost();//到达"首页"之后隐藏"首页"和"上一页"infoact();});}}//ajax "上一页"function prepageact(){if($("#pre_page").is(":visible")){$("#pre_page").click(function(){//删除更新前的ajaxpre();//每点击"下一次",隐藏域值-1if(parint(apagenow) != 1){apagenow = parint(apagenow) - parint(1);}$("#pagenow").val(apagenow);//隐藏域的页码值大于1时if(parint($("#pagenow").val()) > parint(1)){//修改页码信息$("#pagenow_info").html("当前第"+$("#pagenow").val()+"页");}//ajax请求数据ajaxpost();//第一页时隐藏"首页"和"下一页"infoact();});}}//ajax "下一页"if($("#flo_page").length>0){//去掉a的href属性$("#flo_page").removeattr("href");$("#flo_page").click(function(){ajaxpre();//每点击"下一次",隐藏域值+1apagenow = parint(apagenow) + parint(1);$("#pagenow").val(apagenow);//隐藏域的页码值小于总页码时if(parint($("#pagenow").val()) <= parint($("#totalpage").val())){//修改页码信息$("#pagenow_info").html("当前第"+$("#pagenow").val()+"页");//ajax请求数据ajaxpost();}//点击"下一页"之后出现"首页"if($("#first_page").is(":hidden") || $("#first_page").length == 0){//出现"首页"和"下一页"showpage();firstpageact();prepageact();}//隐藏"下一页"和"末页"infoact();return fal; //取消点击翻页});}//ajax "末页"if($("#last_page").length>0){//去掉a的href属性$("#last_page").removeattr("href");$("#last_page").click(function(){ajaxpre();//修改隐藏域当前页信息apagenow = parint($("#totalpage").val());$("#pagenow").val(apagenow);//修改页码信息$("#pagenow_info").html("当前第"+$("#totalpage").val()+"页");//ajax请求数据ajaxpost();//点击"末页"之后出现"首页"if($("#first_page").length == 0){showpage();firstpageact();prepageact();}infoact();return fal;});}//取消a标签跳转$("#first_page").click(function(){return fal;});$("#pre_page").click(function(){return fal;});

common.css:

a{ font-size:14px; font-family:tahoma; color:#444; text-decoration:none; cursor:pointer;}ul{ list-style-type:none;}/* ***************************列表样式******************** */#list{width:1000px;margin-bottom:20px;border:1px solid #95071b;}#list ul{margin:5px 20px;padding:0px;}#list li{line-height:24px;border-bottom:1px solid #95071b;}/* ****************************跳转样式******************** */#skip{width:36px;text-align:center;}/* ****************************ajax************************* */.loading{position:absolute;top:20%;left:35%;}

style1.css:

#page a.pagenum{margin-left:3px;margin-right:3px;padding:1px 7px;border:1px solid #ccc;}#page a.pagenum:hover{background-color:#95071b;color:#fff;}.lected{background-color:#95071b;color:#fff;}

init.inc.php:

<?php/**file:init.inc.php smarty对象的实例化及初始化文件*//* *********************smarty设置*********************** *///根目录路径方式，用于smarty设置define("root",str_replace("\\","/",dirname(__file__))."/");require root.'libs/smarty.class.php';$smarty = new smarty();//smarty3设置默认路径$smarty ->ttemplatedir(root.'templates/')->tcompiledir(root.'templates_c/')->tpluginsdir(root.'plugins/')->tcachedir(root.'cache/')->tconfigdir(root.'configs');$smarty->caching = fal;$smarty->cache_lifetime = 60*60*24; //模版缓存有效时间为1天$smarty->left_delimiter = '<{';$smarty->right_delimiter = '}>';/***********************************************************///根目录url方式$php_lf=$_rver['php_lf'];$root_url='http://'.$_rver['http_host'].substr($php_lf,0,strrpos($php_lf,'/')+1);define(root_url,$root_url);//模版目录url方式define("template_dir",$root_url.'templates');

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