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

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>PHP文章分页类</title>

 <link href="<{$Template_Dir}>/css/style_control.css"  rel="stylesheet" type="text/css">

 <script src="<{$Template_Dir}>/js/jquery-1.8.3.min.js"></script>

 <!-- tinymce 4.1.6 -->

 <script src="<{$ROOT_URL}>tinymce/tinymce.min.js"></script>

 <script>

     tinymce.init({

         selector:'#content',          //编辑区域

         theme: "modern",              //主题

         language: "zh_cn",            //语言(中文需要到官网下载)

         width:800, //编辑框宽

         height: 300, //编辑框高

          plugins: [

             "advlist autolink lists link image charmap print preview hr anchor pagebreak",

             "searchreplace wordcount visualblocks visualchars code fullscreen",

             "insertdatetime media nonbreaking save table contextmenu directionality",

             "emoticons template paste textcolor colorpicker textpattern"

         ],

         //第一行工具栏

         toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image", 

         //第二行工具栏

         toolbar2: "print preview media | forecolor backcolor emoticons", 

         image_advtab: true,   

         //初始时提供的默认格式

         style_formats: [

             {title: 'Bold text', inline: 'b'},

             {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},

             {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},

             {title: 'Example 1', inline: 'span', classes: 'example1'},

             {title: 'Example 2', inline: 'span', classes: 'example2'},

             {title: 'Table styles'},

             {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}

         ]

     }); 

 </script>

 </head>

 <body>

     <form id="arc_form" action="ins.php" method="post">

         标题:<br />

         <input type="text" id="title" name="title" autocomplete="off" /><br /><br />

         内容:<br />

         <textarea id="content" name="content"></textarea><br />

         <input type="button" id="sub" value="提交" />

     </form>

 </body>

 <script>

     $(function(){

         $("#sub").click(function(){

             if($("#title").val() != ""){

                 $("#arc_form").submit();

             }else{

                 alert("标题不能为空");

             }

         });

     });

 </script>

 </html>

前台显示如图：

add_article.php

 <?php

 require 'init.inc.php';

 $smarty->assign("ROOT",ROOT);

 $smarty->assign("ROOT_URL",ROOT_URL);

 $smarty->assign("Template_Dir",Template_Dir);

 $smarty->display("add_article.html");

ins.php

 <?php

     require 'conn/conn.php';

     require 'init.inc.php';

     if(isset($_POST['title']) && !empty($_POST['title'])){

         if(get_magic_quotes_gpc()){

             $title = trim($_POST['title']);

         }else{

             $title = addslashes(trim($_POST['title']));

         }

     }

     if(isset($_POST['content']) && !empty($_POST['content'])){

         $content = htmlspecialchars($_POST['content']);

     }

     function check_input($value){

         // 如果不是数字则加引号

         if (!is_numeric($value)){

             $value = mysql_real_escape_string($value);

         }

         return $value;

     }

     $title = check_input($title);

     //插入数据

     $sql = "insert into archives (title,content,pubdate)values('".$title."','".$content."','".time()."')";

     if($conne->uidRst($sql) == 1){

         //当前时间存入session

         $_SESSION['t'] = $t;

         $smarty->assign("Template_Dir",Template_Dir);

         $smarty->assign("ROOT_URL",$ROOT_URL);

         //跳转参数

         $smarty->assign("do","添加");

         $smarty->assign("addr","列表页");

         $smarty->assign("url","list.php");

         $smarty->display("success.html");

     }else{

         $smarty->assign("Template_Dir",Template_Dir);

         $smarty->assign("ROOT_URL",$ROOT_URL);

         //跳转参数

         $smarty->assign("do","添加");

         $smarty->assign("addr","添加页");

         $smarty->assign("url","add_article.php");

         $smarty->display("error.html");

     }

把输入的文章内容使用htmlspecialchars()存入数据库。TinyMCE编辑器会自动把用户输入的内容前后加上<p></p>标签，不只是文字，也包括图片、视频等富媒体，如：

图片：

视频：

分页( arc_page.class.php , templates/js/ajax_arc.js , ajaxarc.php )

arc_page.class.php

 <?php

 class MyArcPage{

     private $content;

     private $pagebreak;

     private $url; //当前出去参数p的url

     //页码显示

     private $prePage;        //页码前偏移量

     private $floPage;        //页码后偏移量

     private $pageNow;        //当前页码

     private $totalPage;

     private $page_act;        //翻页样式 0:url 1:ajax

     //页码文字

     private $firstFonts = "首页";

     private $lastFonts = "末页";

     private $nextFonts = "下一页 >";

     private $preFonts = "< 上一页";

     //显示页码

     private $pageShow = "";

     //参数：文章内容，分页符的html代码，分页方式，当前url的p参数

     function __construct($content,$pagebreak,$page_act,$p,$prePage,$floPage){

         $this->content = $content;

         $this->pagebreak = $pagebreak;

         $this->floPage = $floPage;

         $this->prePage = $prePage;

         $this->page_act = $page_act;

         $this->p = $p;

     }

     /**************************检测是否含有分页符***********************/

     public function check(){

         //检测是否含有分页符

         if(strpos($this->content,$this->pagebreak) === false){

             //不含有分页符

             return $this->content;

         }else{

             //含有分页符

             $contentArr = explode($this->pagebreak,$this->content);

             return $contentArr;

         }

     }

     /************获得当前页页码,接收$_GET['p']*******/

     public function getPageNow(){

         if(!isset($this->p)){

             $this->pageNow = 1;

         }else if($this->p>0){

             $this->pageNow = $this->p;

         }else{

             die("page number error");

         }

         return $this->pageNow;

     }

     /**************************设置当前页面链接**************************/

      public function getUrl(){

         $url = "http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];

         //判断是否带参数

         if(strpos($url,"?") === false){ //不带参数

             return $this->url = $url."?";

         }else{ //带参数

             $url = explode("?",$url);

             //参数

             $param = $url[1];

             //判断是否有多个参数

             if(strpos($param,"&") === false){ //只有一个参数

                 //判断参数是否为p

                 if(strpos($param,"p=") === false){ //不含参数p

                     //合并url

                     $url = implode("?",$url);    

                     return $this->url = $url."&";

                 }else{

                     //把参数p去掉

                     $url = $url[0];

                     return $this->url = $url."?";

                 }

             }else{ //多个参数

                 $param = explode("&",$param);

                 //遍历参数数组

                 foreach($param as $k=>$v){

                     if(strpos($v,"p=") === false){

                         continue;

                     }else{

                         //当含有参数p时，把它从数组中删除

                         unset($param[$k]);

                     }

                 }

                     //删除参数p之后组合数组

                     $param = implode("&",$param);

                     $url[1] = $param;

                     $url = implode("?",$url);

                     return $this->url = $url."&";

             }

         }

     }

     /****************************前偏移量处理***************************/

     public function preOffset($preFonts){

         $this->getPageNow();

         $this->getUrl();

         $this->getPreFonts($preFonts);

         //前偏移量的处理

         if($this->pageNow!=1 && ($this->pageNow - $this->prePage -1 <= 1)){

             //上一页

             $this->pageShow .= "<a id=\"pre_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>";

                 //}

             }

         }else if($this->pageNow - $this->prePage -1 > 1){ //pageNow至少大于2时才会出现"1..."

             //首页

             $this->pageShow .= "<a id=\"first_page\" class=\"pagenum\" href=\"".$this->url."p=1\">".$this->firstFonts."</a>";            

             //上一页

             $this->pageShow .= "<a id=\"pre_page\" class=\"pagenum\" href=\"".$this->url."p=".($this->pageNow-1)."\">".($preFonts == ""?$this->preFonts:$preFonts)."</a>";

             for($i=$this->prePage;$i>=1;$i--){        

                 //当前页和'...'之间的页码，ajax方式不显示

                 //if($this->page_act != 1){

                     $this->pageShow .= "<a class=\"pagenum ajaxpage\" href=\"".$this->url."p=".($this->pageNow-$i)."\">".($this->pageNow-$i)."</a>";

                 //}

             }

         }

     }

     /**********************页码和后偏移量处理***************************/

     public function floOffset($nextFonts){

         $this->getPageNow();

         $this->getTotalPage();

         $this->getUrl();

         $this->getNextFonts($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 ajaxpage\" href=\"".$this->url."p=".$page."\">".$page."</a>";

                     //}

                 }

             }

             if($this->pageNow < $this->totalPage){

                 $this->pageShow .= "<a id=\"flo_page\" class=\"pagenum\" href=\"".$this->url."p=".($this->pageNow+1)."\">".($nextFonts == ""?$this->nextFonts:$nextFonts)."</a>"; //当实例化对象时用户传递的文字为空时则调用类预设的"下一页",否则输出用户传递的值

                 if(($this->pageNow+$this->floPage+1)<$this->totalPage){

                     $this->pageShow .= "<a id=\"last_page\" class=\"pagenum\" href=\"".$this->url."p=".$this->totalPage."\">末页</a>";

                 }

             }else if($this->pageNow > $this->totalPage){

                 die("超出页码范围");

             }

         }else{ //总页数小于后偏移量时

             if($this->pageNow < $this->totalPage){  //当前页小于总页数时

                 for($i=0;$i<$this->totalPage;$i++){

                     $page = $this->pageNow+$i;

                     if($page < $this->totalPage){

                         //if($this->page_act != 1){

                             //页码后边界

                             $this->pageShow .= "<a class=\"pagenum ajaxpage\" href=\"".$this->url."p=".$page."\">".$page."</a>";

                         //}

                     }else if($page == $this->totalPage){

                         //if($this->page_act != 1){

                             $this->pageShow .= "<a class=\"pagenum ajaxpage\" href=\"".$this->url."p=".$page."\">".$page."</a>";

                         //}

                     }else if($this->pageNow > $this->totalPage){

                         die("超出页码范围");

                     }

                 }

                 $this->pageShow .= "<a id=\"flo_page\" class=\"pagenum\" href=\"".$this->url."p=".($this->pageNow+1)."\">".$this->nextFonts."</a>";

             }else if($this->pageNow > $this->totalPage){

                 die("超出页码范围");

             }else{ //当前页等于总页数

                 //if($this->page_act != 1){

                     $this->pageShow .= "<a id=\"flo_page\" class=\"pagenum\" href=\"".$this->url."p=".$this->totalPage."\">".$this->totalPage."</a>";

                 //}

             }

         }

     }

     /********************其它页面信息***********************/

     public function getOtherInfo(){

         $this->pageShow .= "<span id=\"pagenow_info\">&nbsp;&nbsp;当前第".$this->pageNow."页</span>";

         $this->pageShow .= "/<span id=\"totalpage_info\">共".$this->totalPage."页</span>";

         return $this->pageShow;

     }

     /* ********************获取上一页、下一页文字******************* */

     public function getPreFonts($preFonts){

         return $this->preFonts = ($preFonts=="")?$this->preFonts:$preFonts;

     }

     public function getNextFonts($nextFonts){

         return $this->nextFonts = ($nextFonts=="")?$this->nextFonts:$nextFonts;

     }

     /******************************获得总页数页**********************************/

     public function getTotalPage(){

         //检测content是否为数组

         if(is_array($this->check())){ //content含分页符才分页

             //总页数

             return $this->totalPage = count($this->check());

         }else{

             return $this->totalPage = 1;

         }

     }

     /*********************************分页***************************************/

     public function page(){

         //文章分页一般不多，所以只是用list_page.class.php中的style2作为分页样式

         //返回页码

         return $this->preOffset($preFonts,$this->prePage).$this->floOffset($nextFonts,$this->floPage).$this->getOtherInfo();

     }

 }

在这个文件中包含检测是否含有分页符的方法，如果包含分页符，则把传入的内容按照分页符拆分，返回数组，否则返回字符串。

templates/js/ajax_arc.js

 $(function(){

     //初始显示"下一页","末页"

     showFloPage();

     //删除原先的li,插入gif

     function ajaxpre(){

         //插入gif图

         $loading = $("<img class=\"loading_arc\" src=\""+$Template_Dir+"/images/loading.gif\">");

         $("#content").html($loading);

     }

     //隐藏翻页信息

     function infoAct(){

         //当前页到达尾页时，"下一页"和"末页"

         if(parseInt($("#pageNow").val()) == parseInt($("#totalPage").val())){

             $("#flo_page").hide();

             $("#last_page").hide();

             $("#pre_page").show();

             $("#first_page").show();

         }else if(parseInt($("#pageNow").val()) == 1){ //当前页到达时隐藏"首页"和"上一页"

             $("#pre_page").hide();

             $("#first_page").hide();

             $("#flo_page").show();

             $("#last_page").show();

         }else{

             $("#pre_page").show();

             $("#first_page").show();

             $("#flo_page").show();

             $("#last_page").show();

         }

     }

     //点击"下一页"、"末页"时出现"首页"和"上一页"

     function showPage(){

         //首页

         $firstPage = $("<a id=\"first_page\" class=\"pagenum\">首页</a>");

         if($("#first_page").length == 0){

             $firstPage.insertBefore($(".ajaxpage:first"));

         }

         //上一页

         $pre_page = $("<a id=\"pre_page\" class=\"pagenum\">"+$preFonts+"</a>");

         if($("#pre_page").length == 0){

             $pre_page.insertBefore($(".ajaxpage:first"));

         }

     }

     //点击"上一页"、"首页"时出现"下一页"和"末页"

     function showFloPage(){

         //下一页

         $flo_page = $("<a id=\"flo_page\" class=\"pagenum\">"+$preFonts+"</a>");

         if($("#flo_page").length == 0){

             $flo_page.insertAfter($(".ajaxpage:last"));

         }

         //末页

         $lastPage = $("<a id=\"last_page\" class=\"pagenum\">末页</a>");

         if($("#last_page").length == 0){

             $lastPage.insertAfter($("#flo_page"));

         }

     }

     //ajax请求数据

     function ajaxpost(){

         $.post("ajaxarc.php",{

             pageNow : parseInt($("#pageNow").val()),

             id : parseInt($("#id").val()),

             pagebreak : $("#pagebreak").val()

         },function(data,textStatus){

             //删除gif

             $(".loading").remove();

             $("#content").html(data);

         });

     }

     //初始值=1

     apagenow = parseInt($("#pageNow").val());

     //ajax "首页" 因为"首页"和"上一页"一开始是不出现的，所以只有在"下一页"和"末页"的的点击函数中调用"首页"和"上一页"函数

     function firstPageAct(){

         if($("#first_page").is(":visible")){

             $("#first_page").live('click',function(){

                 //删除更新前的

                 ajaxpre();

                 //pageNow设为1

                 $("#pageNow").val(1);

                 apagenow = parseInt($("#pageNow").val());

                 //修改页码信息

                 $("#pagenow_info").html("&nbsp;&nbsp;当前第1页");

                 //后偏移分页

                 flopage($("#pageNow").val());

                 //ajax请求数据

                 ajaxpost();

                 //到达"首页"之后隐藏"首页"和"上一页"

                 infoAct();

                 //给页码加样式

                 selpage();

             });

         }

     }

     function lastPageAct(){

         if($("#last_page").is(":visible")){

             $("#last_page").live('click',function(){

                 //删除更新前的

                 ajaxpre();

                 //pageNow设为1

                 $("#pageNow").val($("#totalPage").val());

                 apagenow = parseInt($("#pageNow").val());

                 //修改页码信息

                 $("#pagenow_info").html("&nbsp;&nbsp;当前第"+apagenow+"页");

                 //后偏移分页

                 flopage($("#pageNow").val());

                 if($("#first_page").is(":hidden") || $("#first_page").length == 0){

                     //出现"首页"和"下一页"

                     showPage();

                     showFloPage();

                     firstPageAct();

                     lastPageAct();

                     prePageAct();

                 }

                 //ajax请求数据

                 ajaxpost();

                 //到达"首页"之后隐藏"首页"和"上一页"

                 infoAct();

                 //给页码加样式

                 selpage();

             });

         }

     }

     //ajax "上一页"

     function prePageAct(){

         if($("#pre_page").is(":visible")){

             $("#pre_page").click(function(){

                 //删除更新前的

                 ajaxpre();

                 //每点击"上一页",隐藏域值-1

                 if(parseInt(apagenow) != 1){

                     apagenow = parseInt(apagenow) - parseInt(1);

                 }

                 $("#pageNow").val(apagenow);

                 //前、后偏移分页

                 flopage($("#pageNow").val());

                 //隐藏域的页码值大于1时

                 if(parseInt($("#pageNow").val()) > parseInt(1)){

                     //修改页码信息

                     $("#pagenow_info").html("&nbsp;&nbsp;当前第"+$("#pageNow").val()+"页");

                 }

                 //ajax请求数据

                 ajaxpost();

                 if($("#first_page").is(":hidden") || $("#first_page").length == 0){

                     //出现"首页"和"下一页"

                     showPage();

                     showFloPage();

                     firstPageAct();

                     lastPageAct();

                     prePageAct();

                 }

                 //第一页时隐藏"首页"和"上一页"

                 infoAct();

                 //给页码加样式

                 selpage();

             });

         }

     }

     //ajax "下一页"

     if($("#flo_page").length>0){

         //去掉a的href属性

         $("#flo_page").removeAttr("href");

         $("#flo_page").live('click',function(){

             ajaxpre();

             //每点击"下一次",隐藏域值+1

             apagenow = parseInt(apagenow) + parseInt(1);

             $("#pageNow").val(apagenow);

             //后偏移分页

             flopage($("#pageNow").val());

             //隐藏域的页码值小于总页码时

             if(parseInt($("#pageNow").val()) <= parseInt($("#totalPage").val())){

                 //修改页码信息

                 $("#pagenow_info").html("&nbsp;&nbsp;当前第"+$("#pageNow").val()+"页");

                 //ajax请求数据

                 ajaxpost();

             }

             //点击"下一页"之后出现"首页"

             if($("#first_page").is(":hidden") || $("#first_page").length == 0){

                 //出现"首页"和"下一页"

                 showPage();

                 showFloPage();

                 firstPageAct();

                 lastPageAct();

                 prePageAct();

             }

             //隐藏"下一页"和"末页"

             infoAct();

             //给页码加样式

             selpage();

             return false; //取消点击翻页

         });

     }

     //ajax "末页"

     if($("#last_page").length>0){

         //去掉a的href属性

         $("#last_page").removeAttr("href");

         $("#last_page").live('click',function(){

             ajaxpre();

             //修改隐藏域当前页信息

             apagenow = parseInt($("#totalPage").val());

             $("#pageNow").val(apagenow);

             //修改页码信息

             $("#pagenow_info").html("&nbsp;&nbsp;当前第"+$("#totalPage").val()+"页");

             //后偏移分页

             flopage($("#pageNow").val());

             //ajax请求数据

             ajaxpost();

             //点击"末页"之后出现"首页"

             if($("#first_page").length == 0){

                 showPage();

                 showFloPage();

                 firstPageAct();

                 lastPageAct();

                 prePageAct();

             }

             infoAct();

             //给页码加样式

             selpage();

             return false;

         });

     }

     //取消a标签跳转

     $("#first_page").live('click',function(){

         return false;

     });

     $("#pre_page").live('click',function(){

         return false;

     });

     //删除具体页码的href

     $(".ajaxpage").removeAttr("href");

     //live()可使jQuery动态添加的元素也能绑定事件处理函数

     $(".ajaxpage").live('click', function(){

         ajaxpre();

         //每点击"下一次",隐藏域值变为当前a标签显示的页码

         apagenow = $(this).text();

         $("#pageNow").val(apagenow);

         //后偏移分页

         flopage($("#pageNow").val());

         //修改页码信息

         $("#pagenow_info").html("&nbsp;&nbsp;当前第"+$("#pageNow").val()+"页");

         $(".ajaxpage").removeClass("selected");

         $(this).each(function(){

             if($(this).text() == $("#pageNow").val()){

                 $(this).addClass("selected");

             }

         })

         if($("#first_page").is(":hidden") || $("#first_page").length == 0){

             //出现"首页"和"下一页"

             showPage();

             showFloPage();

             firstPageAct();

             lastPageAct();

             prePageAct();

         }

         infoAct();

         //给页码加样式

         selpage();

         ajaxpost();

     });

     //"上一页","下一页"给页码加样式

     function selpage(){

         //给页码加样式

         $(".ajaxpage").removeClass("selected");

         $(".ajaxpage").each(function(){

             if($(this).text() == $("#pageNow").val()){

                 $(this).addClass("selected");

             }

         })

     }

     //后偏移量

     function flopage($pagenow){

         if(parseInt($("#flopage").val()) < parseInt($("#totalPage").val())){

             //当页码发生变化时(点击页码)，新添加的边界页码为

             $ins_page_num = parseInt($pagenow) + parseInt($("#flopage").val()) - parseInt(1);

             prepage($pagenow);

             //当新的页码边界也小于总页数时

             if(parseInt($ins_page_num) < parseInt($("#totalPage").val())){

                 //新的页码显示为

                 for(var i=$pagenow;i<=$ins_page_num+parseInt(1);i++){

                     $pageshow += "<a class=\"pagenum ajaxpage\">"+i+"</a>";

                 }

                 //如果后边界没有到达末页，则显示'下一页'、'末页'

                 $pageshow += "<a id=\"flo_page\" class=\"pagenum\">"+$nextFonts+"</a>";

                 $pageshow += "<a id=\"last_page\" class=\"pagenum\">末页</a>";

                 //修改页码信息

                 $pageshow += "&nbsp;&nbsp;当前第"+$pagenow+"页";

                 $pageshow += "/共"+$("#totalPage").val()+"页";

                 //替换原来的页码显示

                 $("#page").html($pageshow);

             }else{

                 //当新的页码边界也大于总页数时

                 for(var i=$pagenow;i<=parseInt($("#totalPage").val());i++){

                     $pageshow += "<a class=\"pagenum ajaxpage\">"+i+"</a>";

                 }

                 //如果后边界没有到达末页，则显示'下一页'、'末页'

                 $pageshow += "<a id=\"flo_page\" class=\"pagenum\">"+$nextFonts+"</a>";

                 $pageshow += "<a id=\"last_page\" class=\"pagenum\">末页</a>";

                 //修改页码信息

                 $pageshow += "&nbsp;&nbsp;当前第"+$pagenow+"页";

                 $pageshow += "/共"+$("#totalPage").val()+"页";

                 //替换原来的页码显示

                 $("#page").html($pageshow);

             }

         }

     }

     //前偏移量

     function prepage($pagenow){

         $pageshow = "";

         //当前页 - 当前偏移量 <= 0 时

         if(parseInt($pagenow) - parseInt($("#perpage").val()) <= 0){

             //前边界 = 1

             //pagenow不输出，在后偏移量时pagenow已经输出

             for(var i=1;i<parseInt($pagenow);i++){

                 $pageshow += "<a class=\"pagenum ajaxpage\">"+i+"</a>";

             }

         }else{

             //前边界 = pagenow - prepage

             for(var i=parseInt($pagenow)-parseInt($("#perpage").val());i<parseInt($pagenow);i++){

                 $pageshow += "<a class=\"pagenum ajaxpage\">"+i+"</a>";

             }

         }

     }

 });

ajaxarc.php

 <?php

 require 'conn/conn.php';

 if(isset($_POST['pageNow']) && !empty($_POST['pageNow'])){

     $p = $_POST['pageNow'];

 }

 if(isset($_POST['id']) && !empty($_POST['id'])){

     $id = $_POST['id'];

 }

 if(isset($_POST['pagebreak']) && !empty($_POST['pagebreak'])){

     $pagebreak = $_POST['pagebreak'];

 }

 $sql = "select content from archives where aid=".$id;

 $row = $conne->getRowsRst($sql);

 $content = $row['content'];

 $content = explode(htmlspecialchars($pagebreak),$content);

 echo htmlspecialchars_decode($content[$p-1]);

文件根据传递的文章 id 和页码，从数据库中取出相应页码的内容传递给模板

查看文章( templates/view_article.html , view_article.php )：

templates/view_article.html

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>文章页</title>

 <link href="<{$Template_Dir}>/css/style_arc_view.css"  rel="stylesheet" type="text/css">

 <link href="<{$Template_Dir}>/css/page.css"  rel="stylesheet" type="text/css">

 <script id="jq" src="<{$Template_Dir}>/js/jquery-1.8.3.min.js"></script>

 </head>

 <body>

     <div id="container">

         <div id="title"><{$row.title}></div>

         <div id="content">

             <{if $totalPage == 1}>

                 <{$content}>

             <{else}>

                 <{$content[$pageNow-1]}>

             <{/if}>

         </div>

         <{if $totalPage != 1}>

             <div id="page"><{$page}></div>

         <{/if}>

         <input id="pageNow" type="hidden" value="<{$pageNow}>">

         <!--分页方式-->

         <input id="page_act" type="hidden" value="<{$page_act}>">

         <!--总页数-->

         <input id="totalPage" type="hidden" value="<{$totalPage}>">

         <!--id-->

         <input id="id" type="hidden" value="<{$id}>">

         <!--分页符-->

         <input id="pagebreak" type="hidden" value="<{$pagebreak}>">

         <!--前偏移量-->

         <input id="perpage" type="hidden" value="<{$perPage}>">

         <!--后偏移量-->

         <input id="flopage" type="hidden" value="<{$floPage}>">

         <!--//把smarty的变量传递给外部js-->

         <input id="Template_Dir" type="hidden" value="<{$Template_Dir}>">

         <input id="preFonts" type="hidden" value="<{$preFonts}>">

         <input id="nextFonts" type="hidden" value="<{$nextFonts}>">

     </div>

 </body>

 <script>

     $(function(){

         //遍历a

         $(".pagenum").each(function(){

             if($(this).text() == $("#pageNow").val()){

                 $(this).addClass("selected");

             }

         });

         //如果分页方式是ajax，则加载外部ajax.js

         if($("#page_act").val() == 1){

             //把smarty的变量传递给外部js

             $Template_Dir = $("#Template_Dir").val();

             $preFonts = $("#preFonts").val();

             $nextFonts = $("#nextFonts").val();

             $insertAjax = $("<script src=\"<{$Template_Dir}>/js/ajax_arc.js\"><\/script>");

             $insertAjax.insertAfter($("#jq"));

         }

     });

 </script>

 </html>

在模板页进行判断，接受的总页数的参数是否为1，如果为1说明没有分页，否则默认显示第1页。

view_article.php

 <?php

 require 'init.inc.php';

 require 'conn/conn.php';

 require 'arc_page.class.php'; //文章分页类

 if(isset($_GET['id']) && !empty($_GET['id'])){

     //强制转换为整型

     $id = (int)$_GET['id'];

 }

 $sql = "select * from archives where aid=".$id;

 if($conne->getRowsNum($sql) == 1){

     //查询

     $row = $conne->getRowsRst($sql);

 }else{

     die("select error!");

 }

 $content = $row['content'];

 $pagebreak = "&lt;!-- pagebreak --&gt;"; //<!-- pagebreak -->

 $page_act = 1; //设置分页方式 0:url 1:ajax

 $perPage = 4; //前分页偏移量

 $floPage = 4; //后分页偏移量

 $preFonts = ""; //"前一页"文字内容

 $nextFonts = ""; //"下一页"文字内容

 if($page_act == 0){

     //url分页时的$p

     $p = isset($_GET['p'])?$_GET['p']:1; //当前页码

 }else{

     //ajax分页时$p来自viwe_article.html

     $p = isset($_POST['p'])?$_POST['p']:1;

 }

 //实例化

 $mypage = new MyArcPage($content,$pagebreak,$page_act,$p,$perPage,$floPage);

 //获得content

 $content = $mypage->check();

 //htmlspecialchars_decode处理。如果文章带分页，那么获取到的$content就是一个一维数组，需要把数组中的每个元素即每页展现的内容进行decode

 if(is_array($content)){

     for($i=1;$i<=count($content);$i++){

         $content[$i-1] = htmlspecialchars_decode($content[$i-1]);

     }

 }else{

     $content = htmlspecialchars_decode($content);

 }

 //上一页，下一页

 $preFonts = $mypage->getPreFonts($preFonts);

 $nextFonts = $mypage->getNextFonts($nextFonts);

 //总条数

 $totalPage = $mypage->getTotalPage();

 //显示页码

 $page = $mypage->page($preFonts,$nextFonts);

 $smarty->assign("ROOT",ROOT);

 $smarty->assign("ROOT_URL",ROOT_URL);

 $smarty->assign("Template_Dir",Template_Dir);

 $smarty->assign("row",$row);

 $smarty->assign("content",$content);

 //ajax要用到的参数

 $smarty->assign("id",$id);

 $smarty->assign("pagebreak",$pagebreak);

 $smarty->assign("perPage",$perPage); //前分页偏移量

 $smarty->assign("floPage",$floPage); //后分页偏移量

 $smarty->assign("page",$page);

 $smarty->assign("pageNow",$p); //传递当前页

 $smarty->assign("totalPage",$totalPage); //传递总页数

 $smarty->assign("page_act",$page_act); //传递分页方式

 $smarty->assign("preFonts",$preFonts); //传递上一页文字信息

 $smarty->assign("nextFonts",$nextFonts); //传递下一页文字信息

 $smarty->display("view_article.html");

具体使用分页的代码都在 view_article.php 文件中。

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

作者：小dee

出处：http://www.cnblogs.com/dee0912/

说明：作者写博目的是记录开发过程，积累经验，便于以后工作参考。
如需转载，请在文章页面保留此说明并且给出原文链接。谢谢！

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.3.mi ...
使ThinkPHP(3.2.3)的分页类支持Bootstrap风格
ThinkPHP 3.2.3自带的分页类位于:/ThinkPHP/Library/Think/Pages.class.php ,官方文档在这里:ThinkPHP3.2.3数据分页 Pages.clas ...
PHP分页类,支持自定义样式,中间5页
<?php //namespace Component; /** * 2016-3-27 * @author ankang */ class Page { private $ShowPage; ...
php分页类的二种调用方法(转载)
php分页类的二种调用方法原文地址:http://www.xfcodes.com/php/fenye/25584.htm 导读:php分页类的二种调用用法,ajax调用php分页类,非ajax方式调 ...
php分页类代码带分页样式效果(转)
php分页类代码,有漂亮的分页样式风格时间:2016-03-16 09:16:03来源:网络导读:不错的php分页类代码,将类文件与分页样式嵌入,实现php查询结果的精美分页,对研究php分页原理 ...
CI框架分页类
分页类1.分页类参数说明 'base_url' => 指向你的分页所在的控制器类/方法的完整的 URL, 'total_rows' => 数据的总行数, 'per_page' => ...
php+mysql分页类的入门实例
php+mysql分页类的简单代码时间:2016-02-25 06:16:26来源:网络导读:php+mysql分页类的简单代码,二个php分页类代码,对商品进行分页展示,当前页面数,每个页面展示 ...
php分页类学习
分页是目前在显示大量结果时所采用的最好的方式.有了下面这些代码的帮助,开发人员可以在多个页面中显示大量的数据.在互联网上,分页是一般用于搜索结果或是浏览全部信息(比如:一个论坛主题).几乎在每一个W ...
php分页类可直接调用
<?php /** * 分页类 * @author xyy * 调用分页实例 $subPages=new SubPages(数据总条数);//实例化分页类 * //$subPages->s ...

随机推荐

Linux下的ip命令，除了ifconfig还有很多
linux的ip命令和ifconfig类似,但前者功能更强大,并旨在取代后者.使用ip命令,只需一个命令,你就能很轻松地执行一些网络管理任务.ifconfig是net-tools中已被废弃使用的一个命 ...
Robots Exclusion Protocol简介
当Robot访问一个Web站点时,比如http://www.hello.com/,它先去检查是否存在文件http://www.hello.com/robots.txt.如果这个文件存在,它便会按照这样 ...
COOKIE和SESSION关系和区别
一.cookie介绍 cookie 常用于识别用户.cookie 是服务器留在用户计算机中的小文件.每当相同的计算机通过浏览器请求页面时,它同时会发送 cookie.通过 PHP,您能够创建并取回 c ...
kali实用链接
1.Kali-linux安装之后的简单设置 :http://xiao106347.blog.163.com/blog/static/215992078201342410347137/ 2.kali文 ...
Android 文件夹命名规范国际化资源
Android 文件夹命名规范国际化资源 android多国语言文件夹文件汇总如下: 中文(中国):values-zh-rCN 中文(台湾):values-zh-rTW 中文(香港):values- ...
QUnit使用笔记-1判断方法
QUnit是一个前端测试工具. 判断效果: html基本结构: <h1 id="qunit-header">QUnit</h1> <h2 id=&qu ...
Xamarin iOS开发中的编辑、连接、运行
Xamarin iOS开发中的编辑.连接.运行创建好工程后,就可以单击Xamarin Studio上方的运行按钮,如图1.37所示,对HelloWorld项目进行编辑.连接以及运行了.运行效果如图1 ...
c# 模拟网页实现12306登陆、自动刷票、自动抢票完全篇
这一篇文章,我将从头到尾教大家使用c#模拟网页面登陆12306网站,自动刷票,选择订票人,到最后一步提交订单.研究过HTTP协议的童鞋们都知道,我们在访问网站时,是有两种方式的,POST和GET方式, ...
display显示隐藏
display <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <t ...
HDU4276 The Ghost Blows Light（树形DP+背包）
题目大概说一棵n个结点树,每个结点都有宝藏,走过每条边要花一定的时间,现在要在t时间内从结点1出发走到结点n,问能获得最多的宝藏是多少. 放了几天的题,今天拿出来集中精力去想,还是想出来了. 首先,树 ...

PHP+jQuery 长文章分页类 ( 支持 url / ajax 分页方式 )

PHP+jQuery 长文章分页类 ( 支持 url / ajax 分页方式 )的更多相关文章

随机推荐

热门专题