来个示范
<!-- 分页 -->
{pboot:if({page:rows}>0)}
<nav aria-label="page navigation" class="my-4">
<div class="pagination justify-content-center">
<a class="page-item page-link" href="{page:index}">首页</a>
<a class="page-item page-link" href="{page:pre}">上一页</a>
{page:numbar}<!-- 数字条,小屏幕时自动隐藏-->
<a class="page-item page-link" href="{page:next}">下一页</a>
<a class="page-item page-link" href="{page:last}">尾页</a>
</div>
</nav>
{else}
<div class="text-center my-5 text-secondary">未查询到任何数据!</div>
{/pboot:if}
分页条标签
适用范围:分页条标签适用所有执行了分页的页面
标签作用:用于输出分页代码
1、分页条标签
{page:bar} 系统内置的完整分页条
{page:current} 当前页码
{page:count} 总页数
{page:rows} 总数据行数
{page:index} 首页链接
{page:pre} 前一页链接
{page:next} 下一页链接
{page:last} 尾页链接
{page:status} 分页状态信息
{page:numbar} 数字条,数字带class名称为page-num,当前的同时还带page-num-current
{page:selectbar} 下拉选择条
2、分页条自带的HTML样式class名称
状态:page-status
首页:page-index
上一页:page-pre
下一页:page-next
尾页:page-last
数字条:page-numbar ,数字条下面的数字:page-num ,如果是当前页,那么该数字还同时带有:page-num-current
下拉条:page-select (默认条已经不显示)
如果使用系统完整分页条,则以上样式名称在输出的HTML代码中都带,你可以直接使用对应名称在自己的css中定义具体样式即可;
如果使用自定义方式,那么就按照自己写的html代码来定义,但是数字条下面的page-num 、page-num-current依然有效。
当然,如果你对前端还算比较上手,你应该知道其实上面说的这些通过F12都可以看到。
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END
暂无评论内容