使用PHP+JQuery+Ajax分页的实现

为了锻炼下JQuery，决定自己动手写写分页

最终的效果如图：

点击某个字母后，下方显示以该字母为首字母的所有词语；

分页显示，每页显示15个词语，每组页码有20个，1-20/20-40～～～

首先是在PHP文件中的分页Pager的相关代码

复制代码 代码如下:

        public function searchWordsByInitial()
 {  
            //从AJAX发出的URL中获得参数：用户点击的字母和点击的页码
            $initial = htmlentities($_POST['initial'], ENT_QUOTES,"UTF-8");
            $page = htmlentities($_POST['page'], ENT_QUOTES,"UTF-8");
            $words = $this->_createWordObj();

$i=0;//用于显示序号从1开始
            $perPageNum=12;//每一页显示的条数为12条
            $currentPageFirst=($page-1)*$perPageNum+1;
            $currentPageLast=$page*$perPageNum;

            //获取总记录数
            $sumNum=0;
            foreach ( $words[$initial] as $key=> $word ){
                $sumNum++;
            }

//获取总页数
            $pageNums=0;
            if( $sumNum ){
               if( $sumNum < $perPageNum ){ $pageNums = 1; }               //如果总数据量小于$PageSize，那么只有一页
               if( $sumNum%$perPageNum ){                                  //取总数据量除以每页数的余数
                   $pageNums = (int)($sumNum/$perPageNum) + 1;           //如果有余数，则页数等于总数据量除以每页数的结果取整再加一
               }else{
                   $pageNums = $sumNum/$perPageNum;                      //如果没有余数，则页数等于总数据量除以每页数的结果
               }
            }
            else{
               $pageNums = 0;
            }

        //Pager显示

            echo $this->init_searchWordsByInitial_Pager($sumNum,$pageNums,$page); 

            $tab_str.="<table ……………………这里是页面的具体内容………………"
            return $tab_str;
    }

复制代码 代码如下:

    public function init_searchWordsByInitial_Pager($sumNum,$pageNums,$page)
    {
            //根据用户点击的页码，获得当前页码组的首页码，如用户点击的38，那么这一组是21-40，首页码是21
            $current_first_page=floor(($page-1)/20)*20+1;

            $tab_str="<div><ul>";

   for($k=0;$k<=19;$k++)
   {
                $j=$k+$current_first_page;
    $tab_str.="<button>".$j."</button>";
   }

   $tab_str.="</ul>&nbsp;&nbsp;&nbsp;一共<span>".$sumNum."</span>个词语，<span>".$pageNums."</span>页</div>";
            return $tab_str;
    }

init.js   相关的JQuery代码，响应用户的动作

复制代码 代码如下: