呆错后台管理框架基础组件介绍之（分页组件）

移动端分页代码

{:DcPageSimple($current_page, $last_page, $pagePath)}

电脑端分页代码

{:DcPage($current_page, $per_page, $total, $pagePath)}

参数说明

使用呆错数据库组件的分页查询函数查询后自动生成以下变量，只需模板赋值即可；分页变量需要定义通配符[PAGE]点位，如：DcUrl('cms/index/index',['pageNumber'=>'[PAGE]'])

• $current_pag 当前分页
• $per_page 每页数量
• $total 总记录数
• $pagePath 分页变量
• $last_page 最后一页

分页样式1－实例预览

分页样式1－HTML5代码

{gt name="last_page" value="1"}
<div class="bg-white rounded pt-3 mb-2 d-md-none d-flex justify-content-center">{:DcPageSimple($current_page, $last_page, $pagePath)}</div>
<div class="bg-white rounded pt-3 mb-2 d-none d-md-flex justify-content-md-center">{:DcPage($current_page, $per_page, $total, $pagePath)}</div>
{/gt}

分页样式1－CSS3代码

.pagination .page-item .page-link{
    color: #7952b3;
}
.pagination .page-item .page-link:hover{
    color: #fff;
    background-color: #7952b3;
    border-color: #7952b3;
}
.pagination .page-item.active .page-link{
    color: #fff;
    background-color: #563d7c;
    border-color: #563d7c;
}
.pagination .page-item.active .page-link:hover{
    color: #fff;
    background-color: #7952b3;
    border-color: #7952b3;
}

分页样式2－实例预览

分页样式2－HTML5代码

{gt name="last_page" value="1"}
<div class="border bg-white pagesmall py-2 mb-2 d-md-none">{:DcPageSimple($current_page, $last_page, $pagePath)}</div>
<div class="border bg-white page py-2 mb-2 d-none d-md-block">{:DcPage($page, $per_page, $total, $pagePath)}</div>
{/gt}

分页样式2－CSS3代码

.pagination{
    font-size: 1.1rem;
    margin-bottom: 0;
}
.pagination .page-item{
    margin:auto 0.35rem;
}
.pagination .page-item .page-link{
    color: #eee;
    border-color: #0170B9;
    background-color:#0170B9;
    border-radius: .25rem;
}
.pagination .page-item .page-link:hover{
    color: #eee;
    background-color: #17a2b8;
    border-color: #17a2b8;
}
.pagination .page-item.disabled{
}
.pagination .page-item.disabled .page-link{
}
.pagination .page-item.active{
}
.pagination .page-item.active .page-link{
    color: #eee;
    background-color: #17a2b8;
    border-color: #17a2b8;
}
.pagination .page-item:first-child .page-link {
}
.pagination .page-item:last-child .page-link {
}
.page .pagination{
    width: 100%;
    margin: 0 auto;
    display: flex!important;
    justify-content: center!important;
}
.pagesmall .pagination{
    width: 100%;
    margin: 0 auto;
    display: flex!important;
    justify-content: space-between!important;
}