文章列表分页#articlePaginate()

文章列表分页(articlePaginate)

说明

此指令是配合xxxxPage分页类型的指令,展示上下页信息的

语法

#articlePaginate()
#for(page : pages)
// do something
#end
#end

| 参数 | 说明 | | -------- | -------- | |previousClass |上一页的样式,默认值:previous| |nextClass |下一页的样式,默认值:next| |activeClass |当前页面的样式,默认值:active| |disabledClass|禁用的样式(当下一页没有数据的时候,会使用此样式),默认值:disabled| |anchor |锚点链接| |onlyShowPreviousAndNext|是否只显示上一页和下一页(默认值为false,一般情况下在手机端才会把这个值设置true)| |previousText |上一页按钮的文本内容,默认值:上一页| |nextText |下一页按钮的文本内容,默认值:下一页| |firstGotoIndex |是否让第一页进入首页,默认值:false|

返回参数

page:当前page的信息

{
    "totalRow": 261,
    "pageNumber": 1,
    "pageSize": 10,
    pageNumber : 1
}

pages:分页的所有信息

[
    {
        "style": "previous disabled",
        "url": "javascript:;",
        "text": "上一页"
    },
    {
        "style": "active",
        "url": "javascript:;",
        "text": "1"
    },
    {
        "style": "",
        "url": "javascript:;",
        "text": "/article/category/index-2"
    },
    {
        "style": "",
        "url": "/article/category/index-2",
        "text": "3"
    },
    {
        "style": "disabled",
        "url": "javascript:;",
        "text": "..."
    },
    {
        "style": "",
        "url": "/article/category/index-27",
        "text": "27"
    },
    {
        "style": "next",
        "url": "/article/category/index-2",
        "text": "下一页"
    }
]

page属性在整个JPress里面都是同一份,后面不再说明

示例


上下页文字为“←”、“→”,选中样式为“current”
#articlePaginate(previousText="←",nextText="→", activeClass="current")
<nav class="navigation pagination" role="navigation" aria-label="Posts Navigation">
	<h2 class="screen-reader-text">Posts Navigation</h2>
			<div class="nav-links">
					#for(page : pages)
							<a class="page-numbers #(page.style)" href="#(page.url ??)">#(page.text)</a>
					#end
			</div>
</nav>
#end

上下页文字为“上一页”、“下一页选中样式为“current”
#articlePaginate(previousText="上一页",nextText="下一页",activeClass="current")
<nav class="navigation pagination" role="navigation" aria-label="Posts Navigation">
	<h2 class="screen-reader-text">Posts Navigation</h2>
			<div class="nav-links">
					#for(page : pages)
							<a class="page-numbers #(page.style)" href="#(page.url ??)">#(page.text)</a>
					#end
			</div>
</nav>
#end

上下页样式为“navi-prev”、“navi-next“  只显示上下页两个按钮
#articlePaginate(previousClass="navi-prev",nextClass="navi-next",onlyShowPreviousAndNext="true")
#for(page : pages)
<nav class="navigation pagination" role="navigation" aria-label="Posts Navigation">
	<h2 class="screen-reader-text">Posts Navigation</h2>
			<div class="nav-links">
					#for(page : pages)
							<a class="page-numbers #(page.style)" href="#(page.url ??)">#(page.text)</a>
					#end
			</div>
</nav>
#end
#end



加入我们!

如果你想系统学习JPress涉及到的知识点,或者希望有人解答你在深度使用JPress时遇到问题,
加入QQ群是个很不错的选择