PHP+jQuery实现的列表分页的功能模块详细说明及示例代码

分类：PHP_Python| 发布：llmaomi| 查看：452 | 发表时间：2014/12/17

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

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

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

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

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

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

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

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

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

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

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

分页样式

2.虎扑话题( upload/2014/12/201412081515104831.jpg" alt="分页样式" >

分页样式

3.淘宝网宝贝列表页( upload/2014/12/201412081515117745.jpg" alt="分页样式" >

分页样式

4.虾米列表( upload/2014/12/201412081515132476.jpg" alt="分页样式" >

分页样式

最后是织梦官网文章列表页( upload/2014/12/201412081515148711.jpg" alt="分页样式" >

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

分页样式

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

1.url 分页 style1：

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

始终显示最后一页

分页样式

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

分页样式

2.url 分页 style2：

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

分页样式

同样有下拉菜单跳转方式

分页样式

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:

001<?php
002class MyPageUrl{
003  private $totalNum;
004  private $perpageNum;    //每页显示条数  
005  private $pageNow;      //当前页页码
006  private $url;        //当前url  
007  //页码显示
008  private $pageStyle; //页码样式，提供2种样式
009  private $prePage;    //页码前偏移量
010  private $floPage;    //页码后偏移量
011  private $skipStyle;    //手动跳转，0为手动输入页码，1为下拉菜单选择页码
012  private $page_act;    //翻页样式 0:url 1:ajax
013  //页码文字<span style="line-height: 19.2000007629395px; font-family: Arial, Verdana, sans-serif;"> @郑州网建</span>
014  //style2&style3
015  private $firstFonts = "首页";
016  private $lastFonts = "末页";
017  private $nextFonts = "下一页 >";    
018  private $preFonts = "< 上一页";
019  //前n页，后n页
020  private $page_n;
021  private $pn = 10;
022  private $pn_fonts = "前10页";
023  private $fn = 10;
024  private $fn_fonts = "后10页";
025  //展现的页码
026  private $pageShow;
027  //构造函数
028  function __construct($totalNum,$perpageNum,$prePage,$preFonts,$floPage,$nextFonts,$p,$skipStyle,$pageStyle,$page_n,$page_act){  
029   $this->totalNum = $totalNum;
030 $this->perpageNum = $perpageNum;
031 $this->prePage = $prePage;
032   $this->floPage = $floPage;
033   $this->skipStyle = $skipStyle;
034   $this->pageStyle = $pageStyle;
035   $this->page_n = $page_n;
036 $this->page_act = $page_act;
037 $this->getPageNow($p);
038   $this->totalPage = $this->getTotalPage(); //总页数
039   $this->pageShow = "";
040    $this->getUrl();
041  }      
042  /************定义__toString方法,把对象解析成字符串******/
043  public function __toString(){  
044 return $this->pageShow;
045  }
046  /************获得当前页页码,$p用来接收$_GET['p']*******/
047  public function getPageNow($p){  
048 if(!isset($p)){      
049     $this->pageNow = 1;
050    }else if($p>0){      
051      $this->pageNow = $p;  
052 }else{    
053    die("page number error");
054 }
055   return $this->pageNow;
056  }
057  /***********************设置当前页面链接***************/
058  public function getUrl(){
059   $url = "http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];    
060 //判断是否带参数
061   if(strpos($url,"?") === false){ //不带参数
062    return $this->url = $url."?";
063  }else{ //带参数    
064      $url = explode("?",$url);
065   //参数
066    $param = $url[1];
067   //判断是否有多个参数
068     if(strpos($param,"&") === false){ //只有一个参数  
069      //判断参数是否为p
070      if(strpos($param,"p=") === false){ //不含参数p        
071        //合并url
072         $url = implode("?",$url);  
073         return $this->url = $url."&";
074      }else{        
075        //把参数p去掉
076        $url = $url[0];
077         return $this->url = $url."?";
078      }        
079     }else{ //多个参数      
080       $param = explode("&",$param);
081       //遍历参数数组
082        foreach($param as $k=>$v){
083         if(strpos($v,"p=") === false){            
084            continue;
085         }else{      
086          //当含有参数p时，把它从数组中删除
087          unset($param[$k]);
088        }
089     }
090         //删除参数p之后组合数组
091       $param = implode("&",$param);
092       $url[1] = $param;
093       $url = implode("?",$url);
094       return $this->url = $url."&";
095    }
096 }
097  }
098  /************************前偏移量处理********************/
099  public function preOffset($preFonts){  
100 //前偏移量的处理
101   if($this->pageNow!=1 && ($this->pageNow - $this->prePage -1 <= 1)){          
102     //上一页
103   $this->pageShow .= "<a id=\"per_page\" class=\"pagenum\" href=\"".$this->url."p=".($this->pageNow-1)."\">".($preFonts == ""?$this->preFonts:$preFonts)."</a>";      
104    //页码
105    for($i=1;$i<=$this->pageNow-1;$i++){    
106        //ajax方式不显示
107     if($this->page_act != 1){
108          $this->pageShow .= "<a class=\"pagenum\" href=\"".$this->url."p=".$i."\">".$i."</a>";  
109     }
110     }
111 }else if($this->pageNow - $this->prePage -1 > 1){ //pageNow至少大于2时才会出现"1..."      
112    //样式1.加上'首页'
113    if($this->pageStyle == 2 || $this->page_act == 1){        
114      //首页
115        $this->pageShow .= "<a id=\"first_page\" class=\"pagenum\" href=\"".$this->url."p=1\">".$this->firstFonts."</a>";
116      //style2.前n页
117        if($this->page_n == 1 && $this->page_act != 1){        
118         if($this->pageNow>$this->pn){          
119          $this->pageShow .= "<a id=\"pre_n_page\" class=\"pagenum\" href=\"".$this->url."p=".($this->pageNow-$this->pn)."\">".$this->pn_fonts."</a>";
120       }
121     }
122     }            
123   //上一页
124   $this->pageShow .= "<a id=\"pre_page\" class=\"pagenum\" href=\"".$this->url."p=".($this->pageNow-1)."\">".($preFonts == ""?$this->preFonts:$preFonts)."</a>";      
125    //样式1.加上第一页'1'、'...'
126    if($this->pageStyle == 1){
127     $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>";
128   }
129   for($i=$this->prePage;$i>=1;$i--){    
130      //当前页和'...'之间的页码，ajax方式不显示
131      if($this->page_act != 1){
132          $this->pageShow .= "<a class=\"pagenum\" href=\"".$this->url."p=".($this->pageNow-$i)."\">".($this->pageNow-$i)."</a>";  
133     }
134     }
135 }
136  }
137  /**********************页码和后偏移量处理***************************/
138  public function floOffset($nextFonts){  
139    if($this->totalPage > $this->floPage){ //总页数大于后偏移量时    
140      for($i=0;$i<=$this->floPage;$i++){      
141        $page = $this->pageNow+$i;        
142       if($page<=$this->totalPage){
143        //页码,ajax方式不显示
144          if($this->page_act != 1){
145          $this->pageShow .= "<a class=\"pagenum\" href=\"".$this->url."p=".$page."\">".$page."</a>";
146         }
147     }
148     }
149   if($this->pageNow < $this->totalPage){        
150       //当前页+后偏移量+1小于总页数时出现"..."
151       if(($this->pageNow+$this->floPage+1)<$this->totalPage){      
152         //样式1.显示'...'
153       if($this->pageStyle == 1){
154         $this->pageShow .= "<a id=\"flo_page_2\" class=\"pagenum\" href=\"".$this->url."p=".($page+1)."\" title=\"第".($page+1)."页\">…</a>";
155         }
156     }                
157       //当前页+后偏移量+1小于等于总页数时出现最后一页的快捷标签
158     if(($this->pageNow+$this->floPage+1)<=$this->totalPage){        
159          //最后一页
160          //样式1.始终出现'最后一页页码'
161          if($this->pageStyle == 1){
162         $this->pageShow .= "<a class=\"pagenum\" href=\"".$this->url."p=".$this->totalPage."\" title=\"总共".$this->totalPage."页\">".$this->totalPage."</a>";
163        }
164     }            
165       $this->pageShow .= "<a id=\"flo_page\" class=\"pagenum\" href=\"".$this->url."p=".($this->pageNow+1)."\">".($nextFonts == ""?$this->nextFonts:$nextFonts)."</a>"; //当实例化对象时用户传递的文字为空时则调用类预设的"下一页",否则输出用户传递的值
166        //style2.加上后n页
167      if($this->pageStyle == 2 && $this->page_n == 1 && $this->page_act != 1){        
168         if(($this->pageNow+10)<$this->totalPage){          
169          $this->pageShow .= "<a id=\"flo_n_page\" class=\"pagenum\" href=\"".$this->url."p=".($this->pageNow+$this->fn)."\">".$this->fn_fonts."</a>";
170       }
171     }
172       //显示'末页'
173        if($this->pageStyle == 2){        
174         if(($this->pageNow+$this->floPage+1)<$this->totalPage){
175           $this->pageShow .= "<a id=\"last_page\" class=\"pagenum\" href=\"".$this->url."p=".$this->totalPage."\">末页</a>";
176         }
177     }
178     }else if($this->pageNow > $this->totalPage){      
179       die("超出页码范围");
180    }
181 }else{ //总页数小于后偏移量时      
182     for($i=0;$i<$this->totalPage;$i++){      
183       $page = $this->pageNow+$i;
184       //页码后边界
185     $this->pageShow .= "<a class=\"pagenum\" href=\"".$this->url."p=".$page."\">".$page."</a>";
186     }
187 }
188  }
189  /********************其它页面信息***********************/
190  public function getOtherInfo(){  
191    //ajax方式不显示手动跳转信息
192   if($this->page_act != 1){
193      $this->pageShow .= " 跳转至 ";
194     //跳转类型
195      if($this->skipStyle =="" ){ //不加跳转    
196     $this->pageShow .= "";
197     }else if($this->skipStyle == 1){ //输入框    
198     $this->pageShow .= "<input id=\"skip\" type=\"text\" value=\"".$this->pageNow."\">";    
199        $this->pageShow .= "<button id=\"go\">GO</button>";
200    }else if($this->skipStyle == 2){ //下拉菜单    
201        //选择下拉菜单自动跳转
202        $this->pageShow .= "<select id=\"select_page\" onchange=\"location.href=this.options[this.selectedIndex].value;\" >";      
203        for($i=1;$i<=$this->totalPage;$i++){      
204          $this->pageShow .= "<option value=\"".$this->url."p=".$i."\"";         
205        //下拉菜单默认显示当前页
206       if($i == $this->pageNow){        
207          $this->pageShow .= " selected";
208        }        
209       $this->pageShow .= ">".$i."</option>";
210        }      
211     $this->pageShow .= "</select>";
212      }
213 }
214   $this->pageShow .= "<span id=\"pagenow_info\">  当前第".$this->pageNow."页</span>";
215 $this->pageShow .= "/<span id=\"totalpage_info\">共".$this->totalPage."页</span>";
216  $this->pageShow .= " <span id=\"totalNum_info\">共".$this->totalNum."条</span>";
217  }  
218  /*****************获取每页第一条信息*****************/
219  public function getFirstRow(){  
220 $firstRow = $this->perpageNum * ($this->pageNow-1) + 1;//当前页第一条是总条数中第几条
221   return $firstRow;
222  }  
223  /********************获得总页数***********************/
224  public function getTotalPage(){  
225   $totalPage = ceil($this->totalNum / $this->perpageNum);
226   return $totalPage;
227  }
228  /* ****************获取上一页、下一页文字*************** */
229  public function getPreFonts($preFonts){  
230    return ($preFonts=="")?$this->preFonts:$preFonts;
231  }  
232  public function getNextFonts($nextFonts){  
233      return ($nextFonts=="")?$this->nextFonts:$nextFonts;
234  } }

demo.php:

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

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

demo.html：

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

ajaxpage.php:

01<?php
02require 'conn/conn.php';
03if(isset($_POST['pageNow']) && !empty($_POST['pageNow'])){
04  $pageNow = $_POST['pageNow'];
05}
06//每页几条数据
07if(isset($_POST['perpageNum']) && !empty($_POST['perpageNum'])){
08  $perpageNum = $_POST['perpageNum'];
09}
10//当前页第一条数据
11$firstRow = $perpageNum * ($pageNow-1) + 1;
12$sql = "select title from ips_archives order by pubdate desc limit ".$firstRow.",".$perpageNum;
13$rowsArray = $conne->getRowsArray($sql);
14//把二维数组转换成json格式echo json_encode($rowsArray);

ajax.js:

001//删除原先的li,插入gif
002function ajaxpre(){
003  //删除原先的title
004  $("#newsul li").remove();
005  //插入gif图
006  $loading = $("<img class=\"loading\" src=\""+$Template_Dir+"/images/loading.gif\">");
007  $loading.appendTo($("#newsul"));
008}
009//隐藏翻页信息
010function infoAct(){
011  //当前页到达尾页时，"下一页"和"末页"
012  if(parseInt($("#pageNow").val()) == parseInt($("#totalPage").val())){    
013  $("#flo_page").hide();
014  $("#last_page").hide();    
015 $("#pre_page").show();
016  $("#first_page").show();    
017  }else if(parseInt($("#pageNow").val()) == 1){ //当前页到达时隐藏"首页"和"上一页"  
018  $("#pre_page").hide();
019  $("#first_page").hide();    
020    $("#flo_page").show();
021  $("#last_page").show();
022  }else{  
023   if($("#pre_page").is(":hidden") || $("#pre_page").length == 0){
024   $("#pre_page").show();
025    }
026   if($("#first_page").is(":hidden") || $("#first_page").length == 0){
027   $("#first_page").show();
028  }
029   if($("#flo_page").is(":hidden") || $("#flo_page") == 0){
030      $("#flo_page").show();
031    }
032   if($("#last_page").is(":hidden") || $("#last_page").length == 0){
033     $("#last_page").show();
034   }
035  }
036}
037//点击"下一页"、"末页"时出现"首页"和"上一页"<span style="line-height: 19.2000007629395px; font-family: Arial, Verdana, sans-serif;"> @郑州网建</span>
038function showPage(){
039  //首页
040  $firstPage = $("<a id=\"first_page\" class=\"pagenum\">首页</a>");  
041  if($("#first_page").length == 0){
042  $firstPage.insertBefore($("#flo_page"));
043  }
044  //上一页
045  $pre_page = $("<a id=\"pre_page\" class=\"pagenum\">"+$preFonts+"</a>");  
046  if($("#pre_page").length == 0){
047 $pre_page.insertBefore($("#flo_page"));
048  }
049}
050//ajax请求数据
051function ajaxpost(){
052  $.post("ajaxpage.php",{    
053  pageNow : parseInt($("#pageNow").val()),
054    perpageNum : parseInt($("#perpageNum").val())
055  },function(data,textStatus){
056 //接收json数据
057  var dataObj=eval("("+data+")"); //转换为json对象     
058    //删除gif
059 $(".loading").remove();
060 $.each(dataObj,function(idx,item){                     
061   $li_new = $("<li>"+item.title+"</li>");
062     $li_new.appendTo($("#newsul"));
063   })
064  $("#list ul").children("li:last").css("border-bottom",0);
065  });
066}      
067//初始值=1
068apagenow = parseInt($("#pageNow").val());
069//ajax "首页" 因为"首页"和"上一页"一开始是不出现的，所以只有在"下一页"和"末页"的的点击函数中调用"首页"和"上一页"函数
070function firstPageAct(){
071  if($("#first_page").is(":visible")){  
072  $("#first_page").click(function(){
073    //删除更新前的
074    ajaxpre();
075      //pageNow设为1
076    $("#pageNow").val(1);
077   apagenow = parseInt($("#pageNow").val());
078   //修改页码信息
079    $("#pagenow_info").html("  当前第1页");
080   //ajax请求数据
081      ajaxpost();      
082   //到达"首页"之后隐藏"首页"和"上一页"
083      infoAct();
084    });
085  }
086}
087//ajax "上一页"
088function prePageAct(){
089  if($("#pre_page").is(":visible")){  
090 $("#pre_page").click(function(){    
091      //删除更新前的
092    ajaxpre();
093      //每点击"下一次",隐藏域值-1
094   if(parseInt(apagenow) != 1){      
095        apagenow = parseInt(apagenow) - parseInt(1);
096      }      
097     $("#pageNow").val(apagenow);      
098      //隐藏域的页码值大于1时
099   if(parseInt($("#pageNow").val()) > parseInt(1)){    
100       //修改页码信息
101        $("#pagenow_info").html("  当前第"+$("#pageNow").val()+"页");
102   }
103   //ajax请求数据
104      ajaxpost();
105     //第一页时隐藏"首页"和"下一页"
106      infoAct();
107    });
108  }
109}
110//ajax "下一页"
111if($("#flo_page").length>0){
112  //去掉a的href属性
113  $("#flo_page").removeAttr("href");  
114  $("#flo_page").click(function(){
115    ajaxpre();    
116  //每点击"下一次",隐藏域值+1
117   apagenow = parseInt(apagenow) + parseInt(1);
118    $("#pageNow").val(apagenow);
119    //隐藏域的页码值小于总页码时
120 if(parseInt($("#pageNow").val()) <= parseInt($("#totalPage").val())){    
121      //修改页码信息
122    $("#pagenow_info").html("  当前第"+$("#pageNow").val()+"页");
123     //ajax请求数据
124      ajaxpost();
125   }
126   //点击"下一页"之后出现"首页"
127   if($("#first_page").is(":hidden") || $("#first_page").length == 0){
128   //出现"首页"和"下一页"
129      showPage();
130     firstPageAct();
131     prePageAct();
132 }
133   //隐藏"下一页"和"末页"
134  infoAct();
135  return false; //取消点击翻页
136  });
137}
138//ajax "末页"<span style="line-height: 19.2000007629395px; font-family: Arial, Verdana, sans-serif;"> @郑州网建</span>
139if($("#last_page").length>0){
140  //去掉a的href属性
141  $("#last_page").removeAttr("href");  
142  $("#last_page").click(function(){  
143  ajaxpre();    
144  //修改隐藏域当前页信息
145    apagenow = parseInt($("#totalPage").val());
146 $("#pageNow").val(apagenow);
147    //修改页码信息
148    $("#pagenow_info").html("  当前第"+$("#totalPage").val()+"页");    
149   //ajax请求数据
150  ajaxpost();
151 //点击"末页"之后出现"首页"    
152    if($("#first_page").length == 0){    
153     showPage();
154     firstPageAct();
155     prePageAct();
156 }
157   infoAct();
158  return false;
159  });
160}
161//取消a标签跳转
162$("#first_page").click(function(){    
163  return false;
164});
165$("#pre_page").click(function(){    
166  return false;
167});

common.css:

01a{ font-size:14px; font-family:Tahoma; color:#444; text-decoration:none; cursor:pointer;}
02ul{ list-style-type:none;}
03/* ***************************列表样式******************** */
04#list{
05  width:1000px;
06  margin-bottom:20px;
07  border:1px solid #95071b;
08}
09#list ul{
10  margin:5px 20px;
11  padding:0px;
12}
13#list li{
14  line-height:24px;
15  border-bottom:1px solid #95071b;
16}
17/* ****************************跳转样式******************** */
18#skip{
19  width:36px;
20  text-align:center;
21}
22/* ****************************ajax************************* */
23.loading{
24  position:absolute;
25  top:20%;
26  left:35%;
27}

style1.css:

01#page a.pagenum{
02  margin-left:3px;
03  margin-right:3px;
04  padding:1px 7px;
05  border:1px solid #ccc;
06}
07#page a.pagenum:hover{
08  background-color:#95071b;
09  color:#fff;
10}
11.selected{
12  background-color:#95071b;
13  color:#fff;
14}

init.inc.php:

01<?php
02/**
03  file:init.inc.php Smarty对象的实例化及初始化文件
04*/
05/* *********************Smarty设置*********************** */
06//根目录路径方式，用于Smarty设置<span style="line-height: 19.2000007629395px; font-family: Arial, Verdana, sans-serif;"> @郑州网建</span>
07define("ROOT",str_replace("\\","/",dirname(__FILE__))."/");
08require ROOT.'libs/Smarty.class.php';
09$smarty = new Smarty();
10//Smarty3设置默认路径
11$smarty ->setTemplateDir(ROOT.'templates/')
12  ->setCompileDir(ROOT.'templates_c/')
13 ->setPluginsDir(ROOT.'plugins/')
14 ->setCacheDir(ROOT.'cache/')
15 ->setConfigDir(ROOT.'configs');
16$smarty->caching = false;
17$smarty->cache_lifetime = 60*60*24; //模版缓存有效时间为1天
18$smarty->left_delimiter = '<{';
19$smarty->right_delimiter = '}>';
20/***********************************************************/
21//根目录url方式
22$PHP_SELF=$_SERVER['PHP_SELF'];
23$ROOT_URL='http://'.$_SERVER['HTTP_HOST'].substr($PHP_SELF,0,strrpos($PHP_SELF,'/')+1);
24define(ROOT_URL,$ROOT_URL);
25//模版目录url方式 @郑州网建
26define("Template_Dir",$ROOT_URL.'templates');

代码下载地址：https://github.com/camnpr/listPage

365据说看到好文章不转的人，服务器容易宕机！

标签：分页分页组件 jQuery PHP

原创文章如转载，请注明：转载自郑州网建-前端开发　http://camnpr.com/
本文链接：http://camnpr.com/php-python/1825.html

PHP+jQuery实现的列表分页的功能模块详细说明及示例代码

相关文章

关注本站

一条新消息

小编推荐

热门文章

想你所想爱你所爱

PHP+jQuery实现的列表分页的功能模块详细说明及示例代码

相关文章

关注本站

一条新消息

小编推荐

热门文章

想你所想 爱你所爱

想你所想爱你所爱