ThinkPHP分頁用異步來做，玩轉分頁類！
阿新 • • 發佈：2017-08-24
sse replace xpage private 替換 string 設置 nbsp urlencode
具體為什麽用異步來做分頁我就不多說了！
用異步來做分頁，主要還是看分頁類怎麽玩！
方便管理，還是把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 Home\Controller; use Think\Controller; class LingdaoController extends Controller { public function index(){ //分頁處理 $count = M(‘document‘)->count(); //$page = new \Think\Page($count,2); $page = new \Components\AjaxPage($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 \Think\Page($count,2); $page = new \Components\AjaxPage($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>
ThinkPHP分頁用異步來做，玩轉分頁類！