gridview - 如何在 yii2 分页中使用 bootstrap glyphicon 图标作为上一个和下一个按钮?

标签 gridview twitter-bootstrap-3 pagination yii2

我想在 Yii2 分页中使用 bootstrap glyphicon 图标作为上一个和下一个按钮。我已经在下面的代码中设置了他们的CSS类,但它不起作用。它显示了图标,但位置不正确,并且没有指向它的链接。

'pager' => [
        'options'          => ['class'=>'pagination'],   // set clas name used in ui list of pagination
        'prevPageLabel'    => '>',   // Set the label for the "previous" page button
        'nextPageLabel'    => '<',   // Set the label for the "next" page button
        'firstPageLabel'   => '>>',   // Set the label for the "first" page button
        'lastPageLabel'    => '<<',    // Set the label for the "last" page button
        'nextPageCssClass' => 'next',    // Set CSS class for the "next" page button
        'prevPageCssClass' => 'perv',    // Set CSS class for the "previous" page button
        'firstPageCssClass'=> 'first',    // Set CSS class for the "first" page button
        'lastPageCssClass' => 'last',    // Set CSS class for the "last" page button
        'maxButtonCount'   => 10,    // Set maximum number of page buttons that can be displayed
    ],

最佳答案

您可以使用 <span> 添加图标:

例如,

'pager' => [
    'options'          => ['class'=>'pagination'],   // set clas name used in ui list of pagination
    'prevPageLabel'    => '<span class="glyphicon glyphicon-chevron-left"></span>',
    'nextPageLabel'    => '<span class="glyphicon glyphicon-chevron-right"></span>',
    'firstPageLabel'   => '<span class="glyphicon glyphicon-fast-backward"></span>',
    'lastPageLabel'    => '<span class="glyphicon glyphicon-fast-forward"></span>',
    'nextPageCssClass' => 'next',    // Set CSS class for the "next" page button
    'prevPageCssClass' => 'prev',    // Set CSS class for the "previous" page button
    'firstPageCssClass'=> 'first',    // Set CSS class for the "first" page button
    'lastPageCssClass' => 'last',    // Set CSS class for the "last" page button
    'maxButtonCount'   => 10,    // Set maximum number of page buttons that can be displayed
],

关于gridview - 如何在 yii2 分页中使用 bootstrap glyphicon 图标作为上一个和下一个按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36467682/

相关文章:

php - 如何在cakephp中对自定义查询结果进行分页

ASP.net Gridview 突出显示多列中的最大值

c# - 在devexpress gridview Templates DetailRow中查找控件

django-rest-framework - 如何基于序列化器获取分页响应模式(drf-yasg)

javascript - Kendo 网格分页到自定义包装器

html - 如何将内联菜单列表移动到右侧的 Burger Bar(菜单栏)旁边

c# - ASP.NET 更改模板字段中 Gridview 单元格中的文本和颜色

xaml - UWP:如何创建 "rounded"颜色选择器

html - CSS Bootstrap 3 网格杂志像专栏

html - Bootstrap 3 下拉菜单更改子菜单焦点的背景