定製 ThinkPHP 分頁類

標籤：style   class   blog   code   ext   color   

第一步，引入：

 

 1 import(‘ORG/Util/Page‘);     2 $total = M(‘xxx‘)->count();    //擷取總記錄數 3 $page = new Page($total, 3);    //執行個體化：(總數，每頁顯示的記錄數) 4      5 $limit = $page->firstRow.‘,‘.$page->listRows;    //用於SQL 的 limit 語句的限制字串：‘limit 0,12‘ 6 $result = M(‘xxx‘)->limit($limit)->select(); 7  8 $this->assign(‘XXX‘, $result); 9 $this->page = $page->show();    //分頁顯示輸出10 //輸出的分頁顯示樣式為： 34      條記錄            6/12 頁               上一頁    下一頁      第一頁       上5頁      1 2 3 4 5      下5頁       尾頁11 此時‘theme‘ = ‘%totalRow%   %header%   %nowPage%/%totalPage% 頁   %upPage% %downPage%   %first%    %prePage%   %linkPage%   %nextPage%   %end%‘ 12 13 為了做CSS樣式，可以修改 Page.class.php 類，給 $linkPage 的 <a...> 加一個class：< a class=‘num‘...>

 

第二步，定製：

定製主要是圍繞 theme 來做的。可以根據需要，任意調整初始 theme 中的變數位置，或者刪除裡面不要的。

在不修改基礎上， 使用 setConfig 方法來修改預設的一些設定：$page->setConfig(‘header‘, ‘個會員‘);
setConfig方法支援的屬性包括：
header：頭部描述資訊，預設值 “條記錄”
prev：上一頁描述資訊，預設值是“上一頁”
next：下一頁描述資訊，預設值是“下一頁”
first：第一頁描述資訊，預設值是“第一頁”
last：最後一頁描述資訊，預設值是“最後一頁”
theme ：分頁面主題描述資訊，包括了上面所有元素的組合 ，設定該屬性可以改變分頁的各個單元的顯示位置。

比如可以改為：

1 $page->setConfig(‘first‘, ‘首頁‘);2 $page->setConfig(‘last‘, ‘尾頁‘);3 $page->setConfig(‘theme‘, ‘%first%  %upPage%  %prePage%  %linkPage%   %nextPage%   %downPage%  %end%‘);4 5 $this->page = $page->show();

此外，要是還達不到需要的樣子，只好直接修改源碼了！

使用    [上N頁] ... [下N頁]    的樣子並不好看，我通常會將其改為   << ..... >>：

1 //$prePage    =   "<a href=‘".str_replace(‘__PAGE__‘,$preRow,$url)."‘ >上".$this->rollPage."頁</a>";2 $prePage    =   "<a href=‘".str_replace(‘__PAGE__‘,$preRow,$url)."‘ >&lt;&lt;</a>";3 4 //$nextPage   =   "<a href=‘".str_replace(‘__PAGE__‘,$nextRow,$url)."‘ >下".$this->rollPage."頁</a>";5 $nextPage   =   "<a href=‘".str_replace(‘__PAGE__‘,$nextRow,$url)."‘ >&gt;&gt;</a>";

 

 第三，樣式：

模板中：

<css file=‘__PUBLIC__/Css/page.css‘ />...<div id=‘page‘> {page} </div>....

CSS：

 1 /*樣式- 2 #page { text-align:center; padding:20px 0 20px 0; clear:both; } 3 #page a.num { border:1px solid #666; padding:2px 5px; margin:0 2px; } 4 #page a.num:hover,#page span.current { color:#fff; border:1px solid #000; background:#000; text-decoration:none; } 5 #page span.disabled { border:1px solid #ccc; padding:2px 5px; margin:0 2px; color:#ccc; } 6 #page span.current { padding:2px 5px; margin:0 2px; } 7 */ 8  9 /*10   css flickr style pagination11 */12 #page {padding:3px;margin:3px;text-align:center;}13 #page a{border:#dedfde 1px solid;padding:2px 6px;background-position:50% bottom;color:#0061de;margin:0 3px 0 0;text-decoration:none;}14 #page a:hover{border:#000 1px solid;background-image:none;color:#fff;background-color:#0061de;}15 #page a:active{border:#000 1px solid;background-image:none;color:#fff;background-color:#0061de}16 #page span.current{padding:2px 6px;font-weight:bold;color:#ff0084;margin:0 3px 0 0;}17 #page span.disabled{padding:2px 6px;color:#adaaad;margin:0 3px 0 0;}