Let's give a demonstration
<!-- 分页 -->
{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}Pagination bar label
Scope of application: The paging bar label applies to all pages that have paging implemented.
Tag function: used to output paging code
1. Pagination bar label
{page:bar} The complete paging bar built into the system
{page:current} current page number
{page:count} total number of pages
{page:rows} Total number of data rows
{page:index} Home page link
{page:pre} Previous page link
{page:next} next page link
{page:last} last page link
{page:status} paging status information
{page:numbar} Number bar, the number with class name is page-num, and the current one also has page-num-current
{page:selectbar} drop-down selection bar
2. The HTML style class name that comes with the paging bar
Status: page-status
Home page: page-index
Previous page: page-pre
Next page: page-next
Last page: page-last
Number bar: page-numbar, the number below the number bar: page-num, if it is the current page, then the number also contains: page-num-current
Drop-down bar: page-select (the default bar is no longer displayed)
If you use the system complete paging bar, the above style names will be included in the output HTML code. You can directly use the corresponding names to define specific styles in your own css;
If you use a custom method, then define it according to the html code you wrote, but page-num and page-num-current under the number bar are still valid.
Of course, if you are relatively familiar with the front end, you should know that all of the above can be seen through F12.
