yii使用bootstrap分頁樣式的實例

更新時間：2017年01月17日 14:05:15 作者：假_行僧

本篇文章主要介紹了yii使用bootstrap分頁樣式的實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

Bootstrap是Twitter推出的一個開源的用于前端開發(fā)的工具包。它由Twitter的設計師Mark Otto和Jacob Thornton合作開發(fā)，是一個CSS/HTML框架。Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)范，它即是由動態(tài)CSS語言Less寫成。Bootstrap一經(jīng)推出后頗受歡迎，一直是GitHub上的熱門開源項目，包括NASA的MSNBC（微軟全國廣播公司）的Breaking News都使用了該項目。

本文為大家介紹的是yii使用bootstrap分頁樣式方法，感興趣的同學參考下。

yii自帶了分頁類和頁面樣式，但如果是yii+bootstrap開發(fā)的項目如何在不修改yii的情況下使用bootstrap分頁樣式呢。

本文就為大家介紹一種非常簡單的方式，想在yii的分頁中套用bootstrap樣式主要依賴yii CLinkPager中的二個屬性htmlOptions和selectedPageCssClass

控制器示例代碼

public function actionIndex()
{
 $cid = intval($_GET['cid']);

 $criteria = new CDbCriteria();
 $criteria->addCondition("t.status=1");
 $criteria->addCondition("cid='$cid'");
 $criteria->order="t.time desc";
 $count = Article::model()->count($criteria);
 $pager = new CPagination($count);
 $pager->pageSize=20;
 $pager->applyLimit($criteria);
 $lists = Article::model()->findAll($criteria);

 $this->render('index',array('lists'=>$lists,"pager"=>$pager));
}

上面代碼實現(xiàn)了yii分頁，并把$pager分頁對象傳到視圖里，我們再來看一下視圖代碼

視圖代碼

<nav>
<?php
$this->widget('CLinkPager',array(
    'header'=>'',
    'firstPageLabel' => '首頁',
    'lastPageLabel' => '末頁',
    'prevPageLabel' => '上一頁',
    'nextPageLabel' => '下一頁',
    'pages' => $pager,
    'maxButtonCount'=>8,
    'cssFile'=>false,
    'htmlOptions' =>array("class"=>"pagination"),
    'selectedPageCssClass'=>"active"
 )
 );
?>
</nav>

上面的視圖代碼要注意以下幾個點

1.分頁必須在<nav>里

2，htmlOptions選項是必須的，他指定了yii生成的分頁div的class名稱，在這里我們使用bootstrap的class名

3,selectedPageCssClass選項指定了當前選中頁的樣多，在這里我們使用bootstrap的active

4.另外還需要把cssFile設為false，不加載分頁css樣式文件

參考bootstrap官網(wǎng)提供的分頁代碼，如下圖