ThinkPHP分页用异步来做，玩转分页类！

具体为什么用异步来做分页我就不多说了！

用异步来做分页，主要还是看分页类怎么玩！

方便管理，还是把Ajax分页作为一个工具来使用：

同样新建工具类：

多次尝试，最终修改好的分页类是这样的：（我自己使用还是比较爽的）

<?php 
namespace Components;
class AjaxPage {
    public $firstRow; // 起始行数
    public $listRows; // 列表每页显示行数
    public $parameter; // 分页跳转时要带的参数
    public $totalRows; // 总行数
    public $totalPages; // 分页总页面数
    public $rollPage   = 11;// 分页栏每页显示的页数
    public $lastSuffix = true; // 最后一页是否显示总页数

    private $p       = 'p'; //分页参数名
    private $url     = ''; //当前链接URL
    private $nowPage = 1;

    // 分页显示定制
    private $config  = array(
        'header' => '<span class="rows">共 %TOTAL_ROW% 条记录</span>',
        'prev'   => '<<',
        'next'   => '>>',
        'first'  => '1...',
        'last'   => '...%TOTAL_PAGE%',
        'theme'  => '%FIRST% %UP_PAGE% %LINK_PAGE% %DOWN_PAGE% %END%',
    );

    /**
     * 架构函数
     * @param array $totalRows  总的记录数
     * @param array $listRows  每页显示记录数
     * @param array $parameter  分页跳转的参数
     */
    public function __construct($totalRows, $listRows=20,$ajax_func, $parameter = array()) {
        C('VAR_PAGE') && $this->p = C('VAR_PAGE'); //设置分页参数名称
        /* 基础设置 */
        $this->totalRows  = $totalRows; //设置总记录数
        $this->ajax_func = $ajax_func;
        $this->listRows   = $listRows;  //设置每页显示行数
        $this->parameter  = empty($parameter) ? $_GET : $parameter;
        $this->nowPage    = empty($_GET[$this->p]) ? 1 : intval($_GET[$this->p]);
        $this->nowPage    = $this->nowPage>0 ? $this->nowPage : 1;
        $this->firstRow   = $this->listRows * ($this->nowPage - 1);
    }

    /**
     * 定制分页链接设置
     * @param string $name  设置名称
     * @param string $value 设置值
     */
    public function setConfig($name,$value) {
        if(isset($this->config[$name])) {
            $this->config[$name] = $value;
        }
    }

    /**
     * 生成链接URL
     * @param  integer $page 页码
     * @return string
     */
    private function url($page){
        return str_replace(urlencode('[PAGE]'), $page, $this->url);
    }

    /**
     * 组装分页链接
     * @return string
     */
    public function show() {
        if(0 == $this->totalRows) return '';

        /* 生成URL */
        $this->parameter[$this->p] = '[PAGE]';
        $a = u(__SELF__);
        $b = substr($a,15,strlen($a));
        $this->url = U($b, $this->parameter);
        /* 计算分页信息 */
        $this->totalPages = ceil($this->totalRows / $this->listRows); //总页数
        if(!empty($this->totalPages) && $this->nowPage > $this->totalPages) {
            $this->nowPage = $this->totalPages;
        }

        /* 计算分页临时变量 */
        $now_cool_page      = $this->rollPage/2;
        $now_cool_page_ceil = ceil($now_cool_page);
        $this->lastSuffix && $this->config['last'] = $this->totalPages;

        //上一页
        $up_row  = $this->nowPage - 1;
        //$up_page = $up_row > 0 ? '<a href="javascript:' . $this->ajax_func.'('.$up_row.')" class="prev">' . $this->config['prev'] . '</a>' : '<a href="javascript:;" class="prev">' . $this->config['prev'] . '</a>';
        $up_page = $up_row > 0 ? '<a href="javascript:;" class="prev">' . $this->config['prev'] . '</a>' : '<a href="javascript:;" class="prev">' . $this->config['prev'] . '</a>';

        //下一页
        $down_row  = $this->nowPage + 1;
        //$down_page = ($down_row <= $this->totalPages) ? '<a href="javascript:' . $this->ajax_func.'('.$down_row.')" class="next">' . $this->config['next'] . '</a>' : '<a class="next">' . $this->config['next'] . '</a>';
        $down_page = ($down_row <= $this->totalPages) ? '<a href="javascript:;" class="next">' . $this->config['next'] . '</a>' : '<a href="javascript:;" class="next">' . $this->config['next'] . '</a>';

        //第一页
        $the_first = '';
        if($this->totalPages > $this->rollPage && ($this->nowPage - $now_cool_page) >= 1){
            $the_first = '<a href="javascript:' . $this->ajax_func . '(1);" class="com">' . $this->config['first'] . '</a>';
        }

        //最后一页
        $the_end = '';
        if($this->totalPages > $this->rollPage && ($this->nowPage + $now_cool_page) < $this->totalPages){
            $the_end = '<a href="javascript:' . $this->ajax_func . '('.$this->totalPages.');" class="com">' . $this->config['last'] . '</a>';
        }

        //数字连接
        $link_page = "";
        for($i = 1; $i <= $this->rollPage; $i++){
            if(($this->nowPage - $now_cool_page) <= 0 ){
                $page = $i;
            }elseif(($this->nowPage + $now_cool_page - 1) >= $this->totalPages){
                $page = $this->totalPages - $this->rollPage + $i;
            }else{
                $page = $this->nowPage - $now_cool_page_ceil + $i;
            }
            if($page > 0 && $page != $this->nowPage){

                if($page <= $this->totalPages){
                    $link_page .= '<a href="javascript:' . $this->ajax_func . '(' . $page . ');" class="com">' . $page . '</a>';
                }else{
                    break;
                }
            }else{
                if($page > 0){
                    $link_page .= '<a href="javascript:' . $this->ajax_func . '(' . $page . ');" class="active com">' . $page . '</a>';
                }
            }
        }

        //替换分页内容
        $page_str = str_replace(
            array('%HEADER%', '%NOW_PAGE%', '%UP_PAGE%', '%DOWN_PAGE%', '%FIRST%', '%LINK_PAGE%', '%END%', '%TOTAL_ROW%', '%TOTAL_PAGE%'),
            array($this->config['header'], $this->nowPage, $up_page, $down_page, $the_first, $link_page, $the_end, $this->totalRows, $this->totalPages),
            $this->config['theme']);
        return "{$page_str}";
    }
}

接下来写控制器：

<?php
namespace HomeController;
use ThinkController;

class LingdaoController extends Controller {
    public function index(){
        //分页处理
        $count = M('document')->count();
        //$page = new ThinkPage($count,2);
        $page = new ComponentsAjaxPage($count,5,'show');
        $show = $page->show();
        $list = M('document')->limit($page->firstRow.','.$page->listRows)->select();
        $this->assign('list',$list);
        $this->assign('page',$show);
        $this->display();
    }
    public function ajaxpage(){
      //分页处理
      $count = M('document')->count();
      //$page = new ThinkPage($count,2);
      $page = new ComponentsAjaxPage($count,5,'show');
      $show = $page->show();
      $list = M('document')->limit($page->firstRow.','.$page->listRows)->select();      
      foreach($list as $k => $v){
        echo '<li>'.$k.'=='.$v['title'].'</li>';
      }
    }
}

经过多次尝试，最终视图调整为这样：

<!doctype html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<title>标题</title>
<meta name='Keywords' content=''>
<meta name='Description' content=''>
<style type='text/css'>
*{margin:0px; padding:0px; list-style-type:none; text-decoration:none; font-family:"微软雅黑";}
ul{width: 500px; height: 120px; margin: 60px auto;}
/* 分页样式 */
div.listNext{text-align: center; font-size:0;}
div.listNext a{font-size:14px; width: 35px; height:35px; display:inline-block; border:1px solid red; border-right:none; text-align: center; line-height: 35px;}
div.listNext a.next{border-right:1px solid red;}
div.listNext a.text{cursor:text;}
div.listNext a.active{background:#ddd;}
</style>
</head>
<body>
<ul class='list'>
    <foreach name='list' item='v' key='i'>
    <li>{$i}=={$v.title}</li>
    </foreach>    
</ul>
<div class='listNext'>{$page}</div>
<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
<script>
    function show(id){
        var url = "{:U('Lingdao/ajaxpage')}";
        $.get(url,{'p':id}, function(data){
            $('ul.list').html(data);
        });
    }
    (function(){
        var oIndex = 0;
        var oAcomSize = $('div.listNext>a.com').size();
        $('div.listNext>a.prev').addClass('text');
        $('div.listNext>a.com').click(function(){
            oIndex = $(this).index();
            if(oIndex != 1){$('div.listNext>a.prev').removeClass('text');}else{$('div.listNext>a.prev').addClass('text');};
            if(oIndex != oAcomSize){$('div.listNext>a.next').removeClass('text');}else{$('div.listNext>a.next').addClass('text');};            
            $(this).addClass('active').siblings('a.com').removeClass('active');
        });
        // prev click
        $('div.listNext>a.prev').click(function(){
            $('div.listNext>a.com').each(function(i,e){if($(this).hasClass('active')){oIndex = i+1;};});
            oIndex = oIndex - 1;
            $('div.listNext>a.next').removeClass('text');
            if(oIndex == 1){$(this).addClass('text');};
            if(oIndex == 0){oIndex = 0; return false;};
            $('div.listNext>a').eq(oIndex).addClass('active').siblings('a.com').removeClass('active');
            $(this).attr('href','javascript:show('+oIndex+');');
        });
        // next click
        $('div.listNext>a.next').click(function(){
            $('div.listNext>a.com').each(function(i,e){if($(this).hasClass('active')){oIndex = i+1;};});
            oIndex = oIndex + 1;
            if(oIndex == oAcomSize){$(this).addClass('text');};
            if(oIndex == oAcomSize+1){oIndex = oAcomSize; return false;};
            $('div.listNext>a').eq(oIndex).addClass('active').siblings('a.com').removeClass('active');
            $(this).attr('href','javascript:show('+oIndex+');');
        });
    })();
</script>
</body>
</html>