yii2当前默认使用bootstrap4,这一点从 AppAsset 的 $depends 可以找到。
ListView 默认的页面导航太过简陋,是几乎什么“调味料”都不加的状态,如下:
要让页面导航美观一些,需要配置 ListView 的 pager 属性 (即对应 类yii\widgets\LinkPager 的对应属性 的数组)。对于 disabled 的按钮 (例如已经在第一页,前一页按钮就是 disabled,如果显示首页、尾页按钮,那么已经在头尾,相应按钮也是 disabled),有2种处理方式:要么让文本显示为灰色,要么干脆对应按钮隐藏掉。
'pager' => [
'maxButtonCount' => 15, // 默认是10个页码,可以自己指定
'firstPageLabel' => '首页', // 不设置首页、尾页定位到首尾页比较麻烦
'lastPageLabel' => '尾页',
'pageCssClass' => 'page-item', // <li class="page-item"> 激活的才有背景色
//'disabledListItemSubTagOptions' => ['tag' => 'div', 'class' => 'page-link text-muted'],
'disabledPageCssClass' => 'd-none', // 已经到首页或尾页时,相应按钮不显示。禁用此行则应启用上一行
'linkOptions' => ['class' => 'page-link'], // <a class="page-link"> 带边框
'options' => ['class' => 'pagination mt-4'] // 避免导航条与上部挨太紧
]
下面是 blogDemo 用 ListView 显示的例子:
<?= ListView::widget([
'dataProvider' => $dataProvider,
'layout' => "{summary}\n<div class=\"row\">{items}</div>\n{pager}", // ListView容器内的布局
'itemOptions' => ['class' => 'col-lg-3 py-2'], // 分部视图外部容器
// 'itemView' => function ($model, $key, $index, $widget) {
// return Html::a(Html::encode($model->title), ['view', 'id' => $model->id]);
// },
'itemView' => '_post', // 用独立分部视图而非回调函数来渲染每个项目
'pager' => [
'maxButtonCount' => 15, // 默认是10个页码,可以自己指定
'firstPageLabel' => '首页', // 不设置首页、尾页定位到首尾页比较麻烦
'lastPageLabel' => '尾页',
'pageCssClass' => 'page-item', // <li class="page-item"> 激活的才有背景色
//'disabledListItemSubTagOptions' => ['tag' => 'div', 'class' => 'page-link text-muted'],
'disabledPageCssClass' => 'd-none', // 已经到首页或尾页时,相应按钮不显示。禁用此行则应启用上一行
'linkOptions' => ['class' => 'page-link'], // <a class="page-link"> 带边框
'options' => ['class' => 'pagination mt-4'] // 避免导航条与上部挨太紧
]
]) ?>
_post.php 如下:
<?php
/* @var $this yii\web\View */
/* @var $model app\models\Post */
use app\models\Post;
use yii\bootstrap4\Html;
?>
<div class="item">
<h4 class="bg-warning"><?= $model->title ?></h4>
<div><?= $model->body ?></div>
</div>
效果如下: