首页 > 代码库 > PHP+jQuery 长文章分页类 ( 支持 url / ajax 分页方式 )
PHP+jQuery 长文章分页类 ( 支持 url / ajax 分页方式 )
/* ******* 环境:Apache2.2.8 ( 2.2.17 ) + PHP5.2.6 ( 5.3.3 ) + MySQL5.0.51b ( 5.5.8 ) + jQuery-1.8
******* 其它组件：jQuery-1.8.3.min.js + Smarty 3.1.18 + TinyMCE 4.1.6 ******* Date：2014-10-20 ******* Author：小dee ******* Blog：http://www.cnblogs.com/dee0912/*/
写在前面的：
1.不论是列表分页还是文章分页，关键的地方在于如何处理当前页之前和之后的偏移量，也就是要考虑 ( 不同情况下哪些页码元素该显示，哪些不该显示 ) 和计算 ( 显示多少页码 ) ，这些关键的方法在 url 分页时写入分页类文件中，在 ajax 分页中写入 js 文件中；
2.在 ajax 分页时，使用 live() 方法可以使 jQuery动态添加的元素也能绑定事件处理函数 ( ajax_arc.js 文件 )
这个功能模块的主要文件包括长文章分页类 arc_page.class.php 和 用于 ajax 文章分页的 ajax_arc.js 两个文件，包含的功能有：
1.文章内容可以使用 url 分页，分页后的 url 参数为 p；
2.文章内容可以使用 ajax 分页，显示页码；
3.和列表分页类一样，可以更改"上一页"、"下一页"文字
其他：这个模块的分页功能为 编辑器手动插入分页符 进行分页。
这个模块配合使用了 TinyMCE ( 4.1.6 ) 编辑器
TinyMCE编辑器下载地址：http://www.tinymce.com/download/download.php，解压后文件夹 tinymce 放至根目录；
语言包下载地址：http://www.tinymce.com/i18n/index.php，选择 Chinese (China) ，解压后把 langs 文件夹里的 zh_CN.js 放至 tinymce/langs 目录下；
在模板里引入 tinymce/tinymce.min.js 文件；
其他使用方法可以参照博客：http://www.cnblogs.com/nkxyf/p/3883586.html
效果图：
url 分页
图1.
图2.
图3.
ajax 分页
图1.
图2.
模块文件结构图：
ROOT:
├─conn
│ └─conn.php
│
├─libs -- smarty库
│
├─templates
│ │
│ ├─add_article.html -- 添加文章模板
│ ├─view_article.html -- 前台文章页模板
│ ├─list.html -- 前台列表页模板
│ ├─success.html -- 操作成功时显示模板
│ ├─error.html -- 操作失败时显示模板
│ │
│ ├─css
│ │
│ ├─images
│ │ └─loading.gif -- ajax分页时请求数据接收到之前的加载图
│ │
│ └─js
│ │
│ ├─jquery-1.8.3.min.js
│ │
│ ├─showTime.js -- 操作成功或失败时的倒计时跳转文件
│ │
│ ├─ajax_arc.js -- 当分页方式为ajax时文章页模板view_article.html加载的js
│ │
│ └─ajax.js -- 当分页方式为ajax时列表页模板list.html加载的js
│
├─templates_c
│
├─tinymce -- 编辑器
│
├─init.inc.php -- smarty配置文件
│
├─list_page.class.php -- 列表分页类
│
├─arc_page.class.php -- 文章分页类
│
├─list.php -- 列表页
│
├─view_article.php -- 文章页
│
├─ajaxarc.php -- 文章页ajax分页时接受请求的php文件
│
├─ajaxpage.php -- 列表页ajax分页时接受请求的php文件
│
└─ins.php -- 添加文章php文件
主要代码：
添加文章( templates/add_article.html , add_article.php , ins.php )
templates/add_article.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>PHP文章分页类</title> 6 <link href="<{$Template_Dir}>/css/style_control.css" rel="stylesheet" type="text/css"> 7 <script src="<{$Template_Dir}>/js/jquery-1.8.3.min.js"></script> 8 9 <!-- tinymce 4.1.6 -->10 <script src="<{$ROOT_URL}>tinymce/tinymce.min.js"></script>11 <script>12 13 tinymce.init({14 15 selector:‘#content‘, //编辑区域16 theme: "modern", //主题17 language: "zh_cn", //语言(中文需要到官网下载)18 19 width:800, //编辑框宽20 height: 300, //编辑框高21 22 plugins: [23 24 "advlist autolink lists link image charmap print preview hr anchor pagebreak",25 "searchreplace wordcount visualblocks visualchars code fullscreen",26 "insertdatetime media nonbreaking save table contextmenu directionality",27 "emoticons template paste textcolor colorpicker textpattern"28 ],29 30 //第一行工具栏31 toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image", 32 33 //第二行工具栏34 toolbar2: "print preview media | forecolor backcolor emoticons", 35 36 image_advtab: true, 37 38 //初始时提供的默认格式39 style_formats: [ 40 {title: ‘Bold text‘, inline: ‘b‘},41 {title: ‘Red text‘, inline: ‘span‘, styles: {color: ‘#ff0000‘}},42 {title: ‘Red header‘, block: ‘h1‘, styles: {color: ‘#ff0000‘}},43 {title: ‘Example 1‘, inline: ‘span‘, classes: ‘example1‘},44 {title: ‘Example 2‘, inline: ‘span‘, classes: ‘example2‘},45 {title: ‘Table styles‘},46 {title: ‘Table row 1‘, selector: ‘tr‘, classes: ‘tablerow1‘}47 ]48 }); 49 50 </script>51 </head>52 <body>53 54 <form id="arc_form" action="ins.php" method="post">55 56 标题:<br />57 <input type="text" id="title" name="title" autocomplete="off" /><br /><br />58 内容:<br />59 <textarea id="content" name="content"></textarea><br />60 <input type="button" id="sub" value="提交" />61 62 </form>63 64 </body>65 <script>66 67 $(function(){68 69 $("#sub").click(function(){70 71 if($("#title").val() != ""){72 73 $("#arc_form").submit();74 }else{75 76 alert("标题不能为空");77 }78 });79 });80 </script>81 </html>
前台显示如图：
add_article.php
1 <?php2 3 require ‘init.inc.php‘;4 5 $smarty->assign("ROOT",ROOT);6 $smarty->assign("ROOT_URL",ROOT_URL);7 $smarty->assign("Template_Dir",Template_Dir);8 9 $smarty->display("add_article.html");
ins.php
1 <?php 2 3 require ‘conn/conn.php‘; 4 require ‘init.inc.php‘; 5 6 if(isset($_POST[‘title‘]) && !empty($_POST[‘title‘])){ 7 8 if(get_magic_quotes_gpc()){ 9 10 $title = trim($_POST[‘title‘]);11 12 }else{13 14 $title = addslashes(trim($_POST[‘title‘]));15 }16 }17 18 if(isset($_POST[‘content‘]) && !empty($_POST[‘content‘])){19 20 $content = htmlspecialchars($_POST[‘content‘]);21 }22 23 function check_input($value){24 25 // 如果不是数字则加引号26 if (!is_numeric($value)){27 28 $value = mysql_real_escape_string($value);29 }30 return $value;31 }32 33 $title = check_input($title);34 35 36 //插入数据37 $sql = "insert into archives (title,content,pubdate)values(‘".$title."‘,‘".$content."‘,‘".time()."‘)";38 39 40 if($conne->uidRst($sql) == 1){41 42 //当前时间存入session43 $_SESSION[‘t‘] = $t;44 45 $smarty->assign("Template_Dir",Template_Dir);46 $smarty->assign("ROOT_URL",$ROOT_URL);47 48 //跳转参数49 $smarty->assign("do","添加");50 $smarty->assign("addr","列表页");51 $smarty->assign("url","list.php");52 53 $smarty->display("success.html");54 }else{55 56 $smarty->assign("Template_Dir",Template_Dir);57 $smarty->assign("ROOT_URL",$ROOT_URL);58 59 //跳转参数60 $smarty->assign("do","添加");61 $smarty->assign("addr","添加页");62 $smarty->assign("url","add_article.php");63 64 $smarty->display("error.html");65 }
把输入的文章内容使用htmlspecialchars()存入数据库。TinyMCE编辑器会自动把用户输入的内容前后加上<p></p>标签，不只是文字，也包括图片、视频等富媒体，如：
图片：
视频：
分页( arc_page.class.php , templates/js/ajax_arc.js , ajaxarc.php )
arc_page.class.php
1 <?php 2 3 class MyArcPage{ 4 5 private $content; 6 private $pagebreak; 7 private $url; //当前出去参数p的url 8 9 //页码显示 10 private $prePage; //页码前偏移量 11 private $floPage; //页码后偏移量 12 private $pageNow; //当前页码 13 private $totalPage; 14 15 private $page_act; //翻页样式 0:url 1:ajax 16 17 //页码文字 18 private $firstFonts = "首页"; 19 private $lastFonts = "末页"; 20 21 private $nextFonts = "下一页 >"; 22 private $preFonts = "< 上一页"; 23 24 //显示页码 25 private $pageShow = ""; 26 27 28 //参数：文章内容，分页符的html代码，分页方式，当前url的p参数 29 function __construct($content,$pagebreak,$page_act,$p,$prePage,$floPage){ 30 31 $this->content = $content; 32 $this->pagebreak = $pagebreak; 33 $this->floPage = $floPage; 34 $this->prePage = $prePage; 35 36 $this->page_act = $page_act; 37 38 $this->p = $p; 39 } 40 41 /**************************检测是否含有分页符***********************/ 42 public function check(){ 43 44 //检测是否含有分页符 45 if(strpos($this->content,$this->pagebreak) === false){ 46 47 //不含有分页符 48 return $this->content; 49 }else{ 50 51 //含有分页符 52 $contentArr = explode($this->pagebreak,$this->content); 53 return $contentArr; 54 } 55 } 56 57 /************获得当前页页码,接收$_GET[‘p‘]*******/ 58 public function getPageNow(){ 59 60 if(!isset($this->p)){ 61 62 $this->pageNow = 1; 63 }else if($this->p>0){ 64 65 $this->pageNow = $this->p; 66 }else{ 67 68 die("page number error"); 69 } 70 71 return $this->pageNow; 72 } 73 74 /**************************设置当前页面链接**************************/ 75 public function getUrl(){ 76 77 $url = "http://".$_SERVER[‘HTTP_HOST‘].$_SERVER[‘REQUEST_URI‘]; 78 79 //判断是否带参数 80 if(strpos($url,"?") === false){ //不带参数 81 82 return $this->url = $url."?"; 83 }else{ //带参数 84 85 $url = explode("?",$url); 86 //参数 87 $param = $url[1]; 88 89 //判断是否有多个参数 90 if(strpos($param,"&") === false){ //只有一个参数 91 92 //判断参数是否为p 93 if(strpos($param,"p=") === false){ //不含参数p 94 95 //合并url 96 $url = implode("?",$url); 97 98 return $this->url = $url."&"; 99 100 }else{101 102 //把参数p去掉103 $url = $url[0];104 105 return $this->url = $url."?";106 }107 108 }else{ //多个参数109 110 $param = explode("&",$param);111 112 //遍历参数数组113 foreach($param as $k=>$v){114 115 if(strpos($v,"p=") === false){116 117 continue;118 }else{119 120 //当含有参数p时，把它从数组中删除121 unset($param[$k]);122 }123 }124 125 //删除参数p之后组合数组126 $param = implode("&",$param);127 $url[1] = $param;128 $url = implode("?",$url);129 130 return $this->url = $url."&";131 }132 }133 }134 135 /****************************前偏移量处理***************************/136 public function preOffset($preFonts){137 138 $this->getPageNow();139 $this->getUrl();140 $this->getPreFonts($preFonts);141 142 //前偏移量的处理143 if($this->pageNow!=1 && ($this->pageNow - $this->prePage -1 <= 1)){144 145 //上一页146 $this->pageShow .= "<a id=\"pre_page\" class=\"pagenum\" href=http://www.mamicode.com/"".$this->url."p=".($this->pageNow-1)."\">".($preFonts == ""?$this->preFonts:$preFonts)."</a>";147 148 149 //页码150 for($i=1;$i<=$this->pageNow-1;$i++){ 151 152 //ajax方式不显示153 //if($this->page_act != 1){154 155 $this->pageShow .= "<a class=\"pagenum\" href=http://www.mamicode.com/"".$this->url."p=".$i."\">".$i."</a>"; 156 //}157 }158 159 }else if($this->pageNow - $this->prePage -1 > 1){ //pageNow至少大于2时才会出现"1..."160 161 //首页162 $this->pageShow .= "<a id=\"first_page\" class=\"pagenum\" href=http://www.mamicode.com/"".$this->url."p=1\">".$this->firstFonts."</a>"; 163 164 //上一页165 $this->pageShow .= "<a id=\"pre_page\" class=\"pagenum\" href=http://www.mamicode.com/"".$this->url."p=".($this->pageNow-1)."\">".($preFonts == ""?$this->preFonts:$preFonts)."</a>";166 167 for($i=$this->prePage;$i>=1;$i--){ 168 169 //当前页和‘...‘之间的页码，ajax方式不显示170 //if($this->page_act != 1){171 172 $this->pageShow .= "<a class=\"pagenum ajaxpage\" href=http://www.mamicode.com/"".$this->url."p=".($this->pageNow-$i)."\">".($this->pageNow-$i)."</a>"; 173 //}174 }175 }176 }177 178 /**********************页码和后偏移量处理***************************/179 public function floOffset($nextFonts){180 181 $this->getPageNow();182 $this->getTotalPage();183 $this->getUrl();184 $this->getNextFonts($nextFonts);185 186 if($this->totalPage > $this->floPage){ //总页数大于后偏移量时187 188 for($i=0;$i<=$this->floPage;$i++){189 190 $page = $this->pageNow+$i;191 192 if($page<=$this->totalPage){193 194 //页码,ajax方式不显示195 //if($this->page_act != 1){196 197 $this->pageShow .= "<a class=\"pagenum ajaxpage\" href=http://www.mamicode.com/"".$this->url."p=".$page."\">".$page."</a>";198 //}199 }200 }201 202 if($this->pageNow < $this->totalPage){203 204 $this->pageShow .= "<a id=\"flo_page\" class=\"pagenum\" href=http://www.mamicode.com/"".$this->url."p=".($this->pageNow+1)."\">".($nextFonts == ""?$this->nextFonts:$nextFonts)."</a>"; //当实例化对象时用户传递的文字为空时则调用类预设的"下一页",否则输出用户传递的值205 206 if(($this->pageNow+$this->floPage+1)<$this->totalPage){207 208 $this->pageShow .= "<a id=\"last_page\" class=\"pagenum\" href=http://www.mamicode.com/"".$this->url."p=".$this->totalPage."\">末页</a>";209 }210 211 }else if($this->pageNow > $this->totalPage){212 213 die("超出页码范围");214 }215 }else{ //总页数小于后偏移量时216 217 if($this->pageNow < $this->totalPage){ //当前页小于总页数时218 219 for($i=0;$i<$this->totalPage;$i++){220 221 $page = $this->pageNow+$i;222 223 if($page < $this->totalPage){224 225 //if($this->page_act != 1){226 227 //页码后边界228 $this->pageShow .= "<a class=\"pagenum ajaxpage\" href=http://www.mamicode.com/"".$this->url."p=".$page."\">".$page."</a>";229 //}230 231 }else if($page == $this->totalPage){232 233 //if($this->page_act != 1){234 235 $this->pageShow .= "<a class=\"pagenum ajaxpage\" href=http://www.mamicode.com/"".$this->url."p=".$page."\">".$page."</a>";236 //}237 }else if($this->pageNow > $this->totalPage){238 239 die("超出页码范围");240 }241 }242 243 $this->pageShow .= "<a id=\"flo_page\" class=\"pagenum\" href=http://www.mamicode.com/"".$this->url."p=".($this->pageNow+1)."\">".$this->nextFonts."</a>";244 }else if($this->pageNow > $this->totalPage){245 246 die("超出页码范围");247 }else{ //当前页等于总页数248 249 //if($this->page_act != 1){250 251 $this->pageShow .= "<a id=\"flo_page\" class=\"pagenum\" href=http://www.mamicode.com/"".$this->url."p=".$this->totalPage."\">".$this->totalPage."</a>";252 //}253 }254 }255 }256 257 /********************其它页面信息***********************/258 public function getOtherInfo(){259 260 $this->pageShow .= "<span id=\"pagenow_info\"> 当前第".$this->pageNow."页</span>";261 $this->pageShow .= "/<span id=\"totalpage_info\">共".$this->totalPage."页</span>";262 263 return $this->pageShow;264 }265 266 /* ********************获取上一页、下一页文字******************* */267 public function getPreFonts($preFonts){268 269 return $this->preFonts = ($preFonts=="")?$this->preFonts:$preFonts;270 }271 272 public function getNextFonts($nextFonts){273 274 return $this->nextFonts = ($nextFonts=="")?$this->nextFonts:$nextFonts;275 }276 277 278 279 /******************************获得总页数页**********************************/280 public function getTotalPage(){281 282 //检测content是否为数组283 if(is_array($this->check())){ //content含分页符才分页284 285 //总页数286 return $this->totalPage = count($this->check());287 }else{288 289 return $this->totalPage = 1;290 }291 }292 293 /*********************************分页***************************************/294 public function page(){295 296 //文章分页一般不多，所以只是用list_page.class.php中的style2作为分页样式297 //返回页码298 return $this->preOffset($preFonts,$this->prePage).$this->floOffset($nextFonts,$this->floPage).$this->getOtherInfo();299 } 300 }
在这个文件中包含检测是否含有分页符的方法，如果包含分页符，则把传入的内容按照分页符拆分，返回数组，否则返回字符串。
templates/js/ajax_arc.js
1 $(function(){ 2 3 //初始显示"下一页","末页" 4 showFloPage(); 5 6 //删除原先的li,插入gif 7 function ajaxpre(){ 8 9 //插入gif图 10 $loading = $("<img class=\"loading_arc\" src=http://www.mamicode.com/""+$Template_Dir+"/images/loading.gif\">"); 11 12 $("#content").html($loading); 13 } 14 15 //隐藏翻页信息 16 function infoAct(){ 17 18 //当前页到达尾页时，"下一页"和"末页" 19 if(parseInt($("#pageNow").val()) == parseInt($("#totalPage").val())){ 20 21 $("#flo_page").hide(); 22 $("#last_page").hide(); 23 24 $("#pre_page").show(); 25 $("#first_page").show(); 26 27 }else if(parseInt($("#pageNow").val()) == 1){ //当前页到达时隐藏"首页"和"上一页" 28 29 $("#pre_page").hide(); 30 $("#first_page").hide(); 31 32 $("#flo_page").show(); 33 $("#last_page").show(); 34 35 }else{ 36 37 $("#pre_page").show(); 38 $("#first_page").show(); 39 40 $("#flo_page").show(); 41 $("#last_page").show(); 42 } 43 } 44 45 //点击"下一页"、"末页"时出现"首页"和"上一页" 46 function showPage(){ 47 48 //首页 49 $firstPage = $("<a id=\"first_page\" class=\"pagenum\">首页</a>"); 50 51 if($("#first_page").length == 0){ 52 $firstPage.insertBefore($(".ajaxpage:first")); 53 } 54 55 //上一页 56 $pre_page = $("<a id=\"pre_page\" class=\"pagenum\">"+$preFonts+"</a>"); 57 58 if($("#pre_page").length == 0){ 59 $pre_page.insertBefore($(".ajaxpage:first")); 60 } 61 } 62 63 //点击"上一页"、"首页"时出现"下一页"和"末页" 64 function showFloPage(){ 65 66 //下一页 67 $flo_page = $("<a id=\"flo_page\" class=\"pagenum\">"+$preFonts+"</a>"); 68 69 if($("#flo_page").length == 0){ 70 $flo_page.insertAfter($(".ajaxpage:last")); 71 } 72 73 //末页 74 $lastPage = $("<a id=\"last_page\" class=\"pagenum\">末页</a>"); 75 76 if($("#last_page").length == 0){ 77 $lastPage.insertAfter($("#flo_page")); 78 } 79 } 80 81 //ajax请求数据 82 function ajaxpost(){ 83 84 $.post("ajaxarc.php",{ 85 86 pageNow : parseInt($("#pageNow").val()), 87 id : parseInt($("#id").val()), 88 pagebreak : $("#pagebreak").val() 89 },function(data,textStatus){ 90 91 //删除gif 92 $(".loading").remove(); 93 94 $("#content").html(data); 95 }); 96 } 97 98 99 //初始值=1100 apagenow = parseInt($("#pageNow").val());101 102 //ajax "首页" 因为"首页"和"上一页"一开始是不出现的，所以只有在"下一页"和"末页"的的点击函数中调用"首页"和"上一页"函数103 function firstPageAct(){104 105 if($("#first_page").is(":visible")){106 107 $("#first_page").live(‘click‘,function(){108 109 //删除更新前的110 ajaxpre();111 112 //pageNow设为1113 $("#pageNow").val(1);114 apagenow = parseInt($("#pageNow").val());115 116 //修改页码信息117 $("#pagenow_info").html(" 当前第1页");118 119 //后偏移分页120 flopage($("#pageNow").val());121 122 //ajax请求数据123 ajaxpost();124 125 //到达"首页"之后隐藏"首页"和"上一页"126 infoAct();127 128 //给页码加样式129 selpage();130 });131 }132 }133 134 function lastPageAct(){135 136 if($("#last_page").is(":visible")){137 138 $("#last_page").live(‘click‘,function(){139 140 //删除更新前的141 ajaxpre();142 143 //pageNow设为1144 $("#pageNow").val($("#totalPage").val());145 apagenow = parseInt($("#pageNow").val());146 147 //修改页码信息148 $("#pagenow_info").html(" 当前第"+apagenow+"页");149 150 //后偏移分页151 flopage($("#pageNow").val());152 153 if($("#first_page").is(":hidden") || $("#first_page").length == 0){154 155 //出现"首页"和"下一页"156 showPage();157 showFloPage();158 firstPageAct();159 lastPageAct();160 prePageAct();161 }162 163 //ajax请求数据164 ajaxpost();165 166 //到达"首页"之后隐藏"首页"和"上一页"167 infoAct();168 169 //给页码加样式170 selpage();171 });172 }173 }174 175 //ajax "上一页"176 function prePageAct(){177 178 if($("#pre_page").is(":visible")){179 180 $("#pre_page").click(function(){181 182 //删除更新前的183 ajaxpre();184 185 //每点击"上一页",隐藏域值-1186 if(parseInt(apagenow) != 1){187 188 apagenow = parseInt(apagenow) - parseInt(1);189 }190 191 $("#pageNow").val(apagenow);192 193 //前、后偏移分页194 flopage($("#pageNow").val());195 196 //隐藏域的页码值大于1时197 if(parseInt($("#pageNow").val()) > parseInt(1)){198 199 //修改页码信息200 $("#pagenow_info").html(" 当前第"+$("#pageNow").val()+"页");201 }202 203 //ajax请求数据204 ajaxpost();205 206 if($("#first_page").is(":hidden") || $("#first_page").length == 0){207 208 //出现"首页"和"下一页"209 showPage();210 showFloPage();211 firstPageAct();212 lastPageAct();213 prePageAct();214 }215 216 //第一页时隐藏"首页"和"上一页"217 infoAct();218 219 //给页码加样式220 selpage();221 });222 223 }224 }225 226 //ajax "下一页"227 if($("#flo_page").length>0){228 229 //去掉a的href属性230 $("#flo_page").removeAttr("href");231 232 $("#flo_page").live(‘click‘,function(){233 234 ajaxpre();235 236 //每点击"下一次",隐藏域值+1237 apagenow = parseInt(apagenow) + parseInt(1);238 239 $("#pageNow").val(apagenow);240 241 //后偏移分页242 flopage($("#pageNow").val());243 244 //隐藏域的页码值小于总页码时245 if(parseInt($("#pageNow").val()) <= parseInt($("#totalPage").val())){246 247 //修改页码信息248 $("#pagenow_info").html(" 当前第"+$("#pageNow").val()+"页");249 250 //ajax请求数据251 ajaxpost();252 }253 254 //点击"下一页"之后出现"首页"255 if($("#first_page").is(":hidden") || $("#first_page").length == 0){256 257 //出现"首页"和"下一页"258 showPage();259 showFloPage();260 firstPageAct();261 lastPageAct();262 prePageAct();263 }264 265 //隐藏"下一页"和"末页"266 infoAct();267 268 //给页码加样式269 selpage();270 271 return false; //取消点击翻页272 });273 }274 275 //ajax "末页"276 if($("#last_page").length>0){277 278 //去掉a的href属性279 $("#last_page").removeAttr("href");280 281 $("#last_page").live(‘click‘,function(){282 283 ajaxpre();284 285 //修改隐藏域当前页信息286 apagenow = parseInt($("#totalPage").val());287 $("#pageNow").val(apagenow);288 289 //修改页码信息290 $("#pagenow_info").html(" 当前第"+$("#totalPage").val()+"页");291 292 //后偏移分页293 flopage($("#pageNow").val());294 295 //ajax请求数据296 ajaxpost();297 298 //点击"末页"之后出现"首页"299 300 if($("#first_page").length == 0){301 302 showPage();303 showFloPage();304 firstPageAct();305 lastPageAct();306 prePageAct();307 }308 309 infoAct();310 311 //给页码加样式312 selpage();313 314 return false;315 });316 }317 318 //取消a标签跳转319 $("#first_page").live(‘click‘,function(){320 321 return false;322 });323 324 $("#pre_page").live(‘click‘,function(){325 326 return false;327 });328 329 //删除具体页码的href330 $(".ajaxpage").removeAttr("href");331 332 333 //live()可使jQuery动态添加的元素也能绑定事件处理函数334 $(".ajaxpage").live(‘click‘, function(){335 336 ajaxpre();337 338 //每点击"下一次",隐藏域值变为当前a标签显示的页码339 apagenow = $(this).text();340 341 $("#pageNow").val(apagenow);342 343 //后偏移分页344 flopage($("#pageNow").val());345 346 //修改页码信息347 $("#pagenow_info").html(" 当前第"+$("#pageNow").val()+"页");348 349 $(".ajaxpage").removeClass("selected");350 351 $(this).each(function(){352 353 if($(this).text() == $("#pageNow").val()){354 355 $(this).addClass("selected");356 }357 })358 359 if($("#first_page").is(":hidden") || $("#first_page").length == 0){360 361 //出现"首页"和"下一页"362 showPage();363 showFloPage();364 firstPageAct();365 lastPageAct();366 prePageAct();367 }368 369 infoAct();370 371 //给页码加样式372 selpage();373 374 ajaxpost();375 });376 377 //"上一页","下一页"给页码加样式378 function selpage(){379 380 //给页码加样式381 $(".ajaxpage").removeClass("selected");382 $(".ajaxpage").each(function(){383 384 if($(this).text() == $("#pageNow").val()){385 386 $(this).addClass("selected");387 }388 })389 }390 391 //后偏移量392 function flopage($pagenow){393 394 if(parseInt($("#flopage").val()) < parseInt($("#totalPage").val())){395 396 //当页码发生变化时(点击页码)，新添加的边界页码为397 $ins_page_num = parseInt($pagenow) + parseInt($("#flopage").val()) - parseInt(1);398 399 prepage($pagenow);400 401 //当新的页码边界也小于总页数时402 if(parseInt($ins_page_num) < parseInt($("#totalPage").val())){403 //新的页码显示为404 for(var i=$pagenow;i<=$ins_page_num+parseInt(1);i++){405 406 $pageshow += "<a class=\"pagenum ajaxpage\">"+i+"</a>"; 407 }408 409 //如果后边界没有到达末页，则显示‘下一页‘、‘末页‘410 $pageshow += "<a id=\"flo_page\" class=\"pagenum\">"+$nextFonts+"</a>";411 $pageshow += "<a id=\"last_page\" class=\"pagenum\">末页</a>";412 413 //修改页码信息414 $pageshow += " 当前第"+$pagenow+"页";415 $pageshow += "/共"+$("#totalPage").val()+"页";416 417 //替换原来的页码显示418 $("#page").html($pageshow);419 }else{420 421 //当新的页码边界也大于总页数时422 for(var i=$pagenow;i<=parseInt($("#totalPage").val());i++){423 424 $pageshow += "<a class=\"pagenum ajaxpage\">"+i+"</a>"; 425 }426 427 //如果后边界没有到达末页，则显示‘下一页‘、‘末页‘428 $pageshow += "<a id=\"flo_page\" class=\"pagenum\">"+$nextFonts+"</a>";429 $pageshow += "<a id=\"last_page\" class=\"pagenum\">末页</a>";430 431 //修改页码信息432 $pageshow += " 当前第"+$pagenow+"页";433 $pageshow += "/共"+$("#totalPage").val()+"页";434 435 //替换原来的页码显示436 $("#page").html($pageshow);437 }438 }439 }440 441 //前偏移量442 function prepage($pagenow){443 444 $pageshow = "";445 446 //当前页 - 当前偏移量 <= 0 时447 if(parseInt($pagenow) - parseInt($("#perpage").val()) <= 0){448 449 //前边界 = 1450 //pagenow不输出，在后偏移量时pagenow已经输出451 for(var i=1;i<parseInt($pagenow);i++){452 453 $pageshow += "<a class=\"pagenum ajaxpage\">"+i+"</a>"; 454 }455 }else{456 457 //前边界 = pagenow - prepage458 for(var i=parseInt($pagenow)-parseInt($("#perpage").val());i<parseInt($pagenow);i++){459 460 $pageshow += "<a class=\"pagenum ajaxpage\">"+i+"</a>"; 461 }462 }463 }464 });
ajaxarc.php
1 <?php 2 3 require ‘conn/conn.php‘; 4 5 if(isset($_POST[‘pageNow‘]) && !empty($_POST[‘pageNow‘])){ 6 7 $p = $_POST[‘pageNow‘]; 8 } 9 10 if(isset($_POST[‘id‘]) && !empty($_POST[‘id‘])){11 12 $id = $_POST[‘id‘];13 }14 15 if(isset($_POST[‘pagebreak‘]) && !empty($_POST[‘pagebreak‘])){16 17 $pagebreak = $_POST[‘pagebreak‘];18 }19 20 21 $sql = "select content from archives where aid=".$id;22 23 $row = $conne->getRowsRst($sql);24 $content = $row[‘content‘];25 26 $content = explode(htmlspecialchars($pagebreak),$content);27 28 echo htmlspecialchars_decode($content[$p-1]);
文件根据传递的文章 id 和 页码，从数据库中取出相应页码的内容传递给模板
查看文章( templates/view_article.html , view_article.php )：
templates/view_article.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>文章页</title> 6 <link href="<{$Template_Dir}>/css/style_arc_view.css" rel="stylesheet" type="text/css"> 7 <link href="<{$Template_Dir}>/css/page.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="container">13 14 <div id="title"><{$row.title}></div>15 <div id="content">16 17 <{if $totalPage == 1}>18 <{$content}>19 <{else}>20 <{$content[$pageNow-1]}>21 <{/if}>22 23 </div>24 25 <{if $totalPage != 1}>26 <div id="page"><{$page}></div>27 <{/if}>28 <input id="pageNow" type="hidden" value="<{$pageNow}>">29 <!--分页方式-->30 <input id="page_act" type="hidden" value="<{$page_act}>">31 <!--总页数-->32 <input id="totalPage" type="hidden" value="<{$totalPage}>">33 <!--id-->34 <input id="id" type="hidden" value="<{$id}>">35 <!--分页符-->36 <input id="pagebreak" type="hidden" value="<{$pagebreak}>">37 <!--前偏移量-->38 <input id="perpage" type="hidden" value="<{$perPage}>">39 <!--后偏移量-->40 <input id="flopage" type="hidden" value="<{$floPage}>">41 <!--//把smarty的变量传递给外部js-->42 <input id="Template_Dir" type="hidden" value="<{$Template_Dir}>">43 <input id="preFonts" type="hidden" value="<{$preFonts}>">44 <input id="nextFonts" type="hidden" value="<{$nextFonts}>">45 </div>46 47 </body>48 <script>49 50 $(function(){51 52 //遍历a53 $(".pagenum").each(function(){54 55 if($(this).text() == $("#pageNow").val()){56 57 $(this).addClass("selected");58 }59 });60 61 62 //如果分页方式是ajax，则加载外部ajax.js63 if($("#page_act").val() == 1){64 65 //把smarty的变量传递给外部js66 $Template_Dir = $("#Template_Dir").val();67 $preFonts = $("#preFonts").val();68 $nextFonts = $("#nextFonts").val();69 70 $insertAjax = $("<script src=http://www.mamicode.com/"<{$Template_Dir}>/js/ajax_arc.js\"><\/script>");71 $insertAjax.insertAfter($("#jq"));72 }73 74 });75 </script>76 </html>
在模板页进行判断，接受的总页数的参数是否为1，如果为1说明没有分页，否则默认显示第1页。
view_article.php
1 <?php 2 3 require ‘init.inc.php‘; 4 require ‘conn/conn.php‘; 5 require ‘arc_page.class.php‘; //文章分页类 6 7 if(isset($_GET[‘id‘]) && !empty($_GET[‘id‘])){ 8 9 //强制转换为整型10 $id = (int)$_GET[‘id‘];11 }12 13 $sql = "select * from archives where aid=".$id;14 15 if($conne->getRowsNum($sql) == 1){16 17 //查询18 $row = $conne->getRowsRst($sql);19 }else{20 21 die("select error!");22 }23 24 $content = $row[‘content‘];25 $pagebreak = "<!-- pagebreak -->"; //<!-- pagebreak -->26 $page_act = 1; //设置分页方式 0:url 1:ajax27 28 $perPage = 4; //前分页偏移量29 $floPage = 4; //后分页偏移量30 $preFonts = ""; //"前一页"文字内容31 $nextFonts = ""; //"下一页"文字内容32 33 if($page_act == 0){34 35 //url分页时的$p36 $p = isset($_GET[‘p‘])?$_GET[‘p‘]:1; //当前页码37 }else{38 39 //ajax分页时$p来自viwe_article.html40 $p = isset($_POST[‘p‘])?$_POST[‘p‘]:1;41 }42 43 //实例化44 $mypage = new MyArcPage($content,$pagebreak,$page_act,$p,$perPage,$floPage);45 46 //获得content47 $content = $mypage->check();48 49 //htmlspecialchars_decode处理。如果文章带分页，那么获取到的$content就是一个一维数组，需要把数组中的每个元素即每页展现的内容进行decode50 if(is_array($content)){51 52 for($i=1;$i<=count($content);$i++){53 54 $content[$i-1] = htmlspecialchars_decode($content[$i-1]);55 }56 }else{57 58 $content = htmlspecialchars_decode($content);59 }60 61 //上一页，下一页62 $preFonts = $mypage->getPreFonts($preFonts);63 $nextFonts = $mypage->getNextFonts($nextFonts);64 65 //总条数66 $totalPage = $mypage->getTotalPage();67 68 //显示页码69 $page = $mypage->page($preFonts,$nextFonts);70 71 $smarty->assign("ROOT",ROOT);72 $smarty->assign("ROOT_URL",ROOT_URL);73 $smarty->assign("Template_Dir",Template_Dir);74 $smarty->assign("row",$row);75 76 $smarty->assign("content",$content);77 78 //ajax要用到的参数79 $smarty->assign("id",$id);80 $smarty->assign("pagebreak",$pagebreak);81 $smarty->assign("perPage",$perPage); //前分页偏移量82 $smarty->assign("floPage",$floPage); //后分页偏移量83 84 $smarty->assign("page",$page);85 $smarty->assign("pageNow",$p); //传递当前页86 $smarty->assign("totalPage",$totalPage); //传递总页数87 $smarty->assign("page_act",$page_act); //传递分页方式88 $smarty->assign("preFonts",$preFonts); //传递上一页文字信息89 $smarty->assign("nextFonts",$nextFonts); //传递下一页文字信息90 91 $smarty->display("view_article.html");
具体使用分页的代码都在 view_article.php 文件中。
代码下载地址：https://github.com/dee0912/aritclePage
作者：小dee
出处：http://www.cnblogs.com/dee0912/
说明：作者写博目的是记录开发过程，积累经验，便于以后工作参考。
如需转载，请在文章页面保留此说明并且给出原文链接。谢谢！
如需转载，请在文章页面保留此说明并且给出原文链接。谢谢！
PHP+jQuery 长文章分页类 ( 支持 url / ajax 分页方式 )
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。