yii2 gridview 分页样式—优雅分页：yii2 Gridview 独特样式
优雅分页：yii2 Gridview 独特样式
在使用yii2框架开发网站时，Gridview是一个非常常用的组件，它可以将数据以表格的形式展示出来，并且支持分页功能。但是默认的分页样式有些单调，不够美观，那么如何实现优雅的分页样式呢？
我们需要在Gridview中设置分页样式。在Gridview的options中添加如下代码：
‘pager’ => [
‘options’ => [
‘class’ => ‘pagination’,
],
‘prevPageCssClass’ => ‘prev’,
‘nextPageCssClass’ => ‘next’,
‘activePageCssClass’ => ‘active’,
‘disabledPageCssClass’ => ‘disabled’,
‘nextPageLabel’ => ‘下一页’,
‘prevPageLabel’ => ‘上一页’,
],
这里我们使用了Bootstrap的分页样式，设置了上一页、下一页、当前页、禁用页的CSS类名和标签内容。
接下来，我们需要在CSS文件中添加分页样式。样式代码如下：
.pagination {
display: inline-block;
.pagination li {
display: inline-block;
margin: 0 5px;
.pagination li a {
color: #337ab7;
padding: 5px 10px;
border: 1px solid #ddd;
border-radius: 3px;
.pagination li.active a {
background-color: #337ab7;
color: #fff;
border-color: #337ab7;
.pagination li.disabled a {
color: #ccc;
pointer-events: none;
cursor: default;
.pagination li.prev a:before {
content: “f060”;
font-family: FontAwesome;
margin-right: 5px;
.pagination li.next a:after {
content: “f061”;
font-family: FontAwesome;
margin-left: 5px;
这里我们使用了FontAwesome字体图标，设置了分页样式的颜色、边框、圆角等。
我们需要在视图文件中使用Gridview组件，并将分页样式应用到分页器中。代码如下：
<?= GridView::widget([
‘dataProvider’ => $dataProvider,
‘columns’ => [
‘id’,
‘name’,
‘age’,
‘gender’,
],
‘options’ => [
‘class’ => ‘grid-view’,
],
‘tableOptions’ => [
‘class’ => ‘table table-striped’,
],
‘pager’ => [
‘options’ => [
‘class’ => ‘pagination’,
],
‘prevPageCssClass’ => ‘prev’,
‘nextPageCssClass’ => ‘next’,
‘activePageCssClass’ => ‘active’,
‘disabledPageCssClass’ => ‘disabled’,
‘nextPageLabel’ => ‘下一页’,
‘prevPageLabel’ => ‘上一页’,
],
]) ?>
通过以上步骤，我们就可以实现优雅的分页样式了。在使用Gridview组件时，我们可以根据需求自定义分页样式，提升网站的美观度和用户体验。
