快捷導(dǎo)航

yii使用bootstrap分頁(yè)樣式的實(shí)例

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

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

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

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

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

本文就為大家介紹一種非常簡(jiǎn)單的方式，想在yii的分頁(yè)中套用bootstrap樣式主要依賴(lài)yii CLinkPager中的二個(gè)屬性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));
}

上面代碼實(shí)現(xiàn)了yii分頁(yè)，并把$pager分頁(yè)對(duì)象傳到視圖里，我們?cè)賮?lái)看一下視圖代碼

視圖代碼

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

上面的視圖代碼要注意以下幾個(gè)點(diǎn)

1.分頁(yè)必須在<nav>里

2，htmlOptions選項(xiàng)是必須的，他指定了yii生成的分頁(yè)div的class名稱(chēng)，在這里我們使用bootstrap的class名

3,selectedPageCssClass選項(xiàng)指定了當(dāng)前選中頁(yè)的樣多，在這里我們使用bootstrap的active

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

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