您现在的位置：程式碼之家 >> 編程語言 > >> 網頁程式設計 >> PHP 程式設計 >> PHP 綜合知識

YII CLinkPager 分頁組件擴展：增加「共 X 頁」顯示功能

編輯：PHP 綜合知識

需求背景

Yii 1.x 內置 CLinkPager 預設不顯示總頁數，產品要求在分頁條右側顯示「共 15 頁」等信息。通過繼承 CLinkPager 並覆寫 run() 方法，可在零侵入業務代碼的情況下實現該需求。

擴展類 MLinkPager 完整代碼

保存為 protected/components/MLinkPager.php

registerClientScript();
        $buttons = $this->createPageButtons();
        list($beginPage, $endPage) = $this->getPageRange();

        // 決定是否追加總頁數按鈕
        if ($this->forceTotalPage) {
            $buttons[] = CHtml::tag('li', ['class' => 'total'], '共 ' . $this->getPageCount() . ' 頁');
        } elseif ($this->mCountPage && $endPage > 0) {
            $buttons[] = CHtml::tag('li', ['class' => 'total'], '共 ' . $this->getPageCount() . ' 頁');
        }

        if (empty($buttons)) return;

        echo $this->header;
        echo CHtml::tag('div', $this->htmlOptions, implode("\n", $buttons));
        echo $this->footer;
    }
}

視圖中調用方式

<div class="page-tab-tog">
widget('MLinkPager', [
    'header' => '',
    'firstPageLabel' => '首頁',
    'lastPageLabel' => '尾頁',
    'prevPageLabel' => '<',
    'nextPageLabel' => '>',
    'pages' => $pages,
    'maxButtonCount' => 5,
    'mCountPage' => true,          // 關鍵：啟用總頁數顯示
    'htmlOptions' => ['class' => 'page-tab-tog'],
]); ?>
</div>

進階用法：無數據時仍顯示「共 0 頁」

設置 'forceTotalPage' => true，此時 mCountPage 失效，無論 $pages->getItemCount() 是否為 0 都會輸出總頁數標籤。

CSS 樣式建議

.page-tab-tog .total {
    background: #f5f5f5;
    color: #666;
    padding: 4px 8px;
    border-radius: 2px;
    margin-left: 8px;
    font-weight: normal;
}

Yii 分頁核心原理回顧

控制器構建 CPagination：

$criteria = new CDbCriteria();
$criteria->order = 'id DESC';
$count = Post::model()->count($criteria);
$pager = new CPagination($count);
$pager->pageSize = 20;
$pager->applyLimit($criteria);
$posts = Post::model()->findAll($criteria);
$this->render('index', ['posts' => $posts, 'pages' => $pager]);

視圖渲染分頁組件： 將 $pages 傳給 CLinkPager 或擴展類。

常見問題排查

現象	原因	解決
總頁數不顯示	`$pages->getPageCount()` 為 0	檢查 `CPagination::pageSize` 是否設置，`itemCount` 是否正確
分頁鏈接錯誤	URL 規則未配置	在 `urlManager` 中配置 `'//page/'`
樣式亂掉	htmlOptions class 衝突	自定義 CSS 覆蓋 .pager .selected .hidden 等類