/*
 ******* 环境: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
说明:作者写博目的是记录开发过程,积累经验,便于以后工作参考。
如需转载,请在文章页面保留此说明并且给出原文链接。谢谢!

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

  1. 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 ...

  2. 使ThinkPHP(3.2.3)的分页类支持Bootstrap风格

    ThinkPHP 3.2.3自带的分页类位于:/ThinkPHP/Library/Think/Pages.class.php ,官方文档在这里:ThinkPHP3.2.3数据分页 Pages.clas ...

  3. PHP分页类,支持自定义样式,中间5页

    <?php //namespace Component; /** * 2016-3-27 * @author ankang */ class Page { private $ShowPage; ...

  4. php分页类的二种调用方法(转载)

    php分页类的二种调用方法 原文地址:http://www.xfcodes.com/php/fenye/25584.htm 导读:php分页类的二种调用用法,ajax调用php分页类,非ajax方式调 ...

  5. php分页类代码带分页样式效果(转)

    php分页类代码,有漂亮的分页样式风格 时间:2016-03-16 09:16:03来源:网络 导读:不错的php分页类代码,将类文件与分页样式嵌入,实现php查询结果的精美分页,对研究php分页原理 ...

  6. CI框架分页类

    分页类1.分页类参数说明 'base_url' => 指向你的分页所在的控制器类/方法的完整的 URL, 'total_rows' => 数据的总行数, 'per_page' => ...

  7. php+mysql分页类的入门实例

    php+mysql分页类的简单代码 时间:2016-02-25 06:16:26来源:网络 导读:php+mysql分页类的简单代码,二个php分页类代码,对商品进行分页展示,当前页面数,每个页面展示 ...

  8. php分页类学习

    分页是目前在显示大量结果时所采用的最好的方式.有了下面这些代码的帮助,开发人员可以在多个页面中显示大量的数据.在互联网上,分​页是一般用于搜索结果或是浏览全部信息(比如:一个论坛主题).几乎在每一个W ...

  9. php分页类 可直接调用

    <?php /** * 分页类 * @author xyy * 调用分页实例 $subPages=new SubPages(数据总条数);//实例化分页类 * //$subPages->s ...

随机推荐

  1. ZeroMQ接口函数之 :zmq_proxy – 开始ZMQ内置代理

    ZeroMQ 官方地址 :http://api.zeromq.org/4-1:zmq-proxy zmq_proxy(3)             ØMQ Manual - ØMQ/4.1.0 Nam ...

  2. 转MYSQL学习(四) 查询

    MySQL中select的基本语法形式: select 属性列表 from 表名和视图列表 [where 条件表达式] [group by 属性名[having 条件表达式]] [order by 属 ...

  3. 彻底卸载 RAD Studio 2009/2010/XE+ 的步骤

    重新安装 RAD 系列时,建议将上一个版本彻底卸载,彻底卸载 RAD Studio 2009/2010/XE+ 的步骤: 控制面板-->添加/删除程序中执行了卸载操作以后, 还需要做以下工作: ...

  4. access数据库的连接字符串以及数据库操作类

    <!--access数据库连接方式--> <add name="QYTangConnectionString" connectionString="Pr ...

  5. RabbitMq install on Centos6.3

    安装服务(root) step 1:  启用EPEL:EPEL是一个Fedora Project 推出的 EPEL(Extra Packages for Enterprise Linux),EPEL是 ...

  6. Android开发学习资源

    https://developer.android.google.cn/training/index.html

  7. 用 eclipse 创建一个简单的 meaven spring springMvc mybatis 项目

    下面是整体步骤: 1: 先创建一个Maven 项目: 选择跳过骨架: 因为要搭建的是 web 项目  所以这个地方选择 war 包; 点击完成 这样就完成 Maven项目的搭建: 接下俩 先把 Mav ...

  8. CASE WHEN用法

    问题:假如说这个条件有一条数据不满足,那么那条数据就不会读出来,,那么,我怎么才能把它读出并且赋值为空呢 方法: SELECT `s`.*, ( CASE THEN SUM(a.total_numbe ...

  9. (转)c#反射

    1. 什么是反射2. 命名空间与装配件的关系3. 运行期得到类型信息有什么用4. 如何使用反射获取类型5. 如何根据类型来动态创建对象6. 如何获取方法以及动态调用方法7. 动态创建委托 1.什么是反 ...

  10. Web Api HelpPage

    为了方面APP开发人员,服务端的接口都应当提供详尽的API说明.但每次有修改,既要维护代码,又要维护文档,一旦开发进度紧张,很容易导致代码与文档不一致. Web API有一个Help Page插件,可 ...