October CMS 开箱即用,提供分页功能,它与标准模板集成,并为自定义标记提供了完整的灵活性。分页记录与模型分页查询和pager() Twig 函数紧密集成。
分页数据集可以来自组件逻辑、页面或布局PHP 部分内部,或者来自Tailor 组件。以下是一个页面从 Tailor 组件请求分页数据的示例,每页10条记录。
url = "/blog"
[collection]
handle = "Blog\Post"{% set posts = collection.paginate(10) %}现在,posts 变量可用。我们可以遍历每条记录并显示分页链接。
<div>
{% for post in posts %}
<h2>{{ post.title }}</h2>
{% endfor %}
</div>
<nav>
{{ pager(posts) }}
</nav>默认情况下,分页将从?page查询字符串中获取当前页码,因此在显示两组或更多组分页数据时将使用相同的页码。为解决此问题,请使用paginateCustom方法并指定唯一的参数名称。
url = "/blog"
[collection blog]
handle = "Blog\Post"
[collection category]
handle = "Blog\Category"{% set posts = blog.paginateCustom(10, 'postPage') %}
{% set comments = comments.paginateCustom(10, 'commentPage') %}设置withQuery选项以保留其他分页实例的页码(可选)。
{{ pager(categories, { withQuery: true }) }}这将导致查询字符串包含两个页码,例如,?postPage=1&commentPage=2。
要使用自定义分页标记,请从下面的文件位置开始,并将内容复制到主题内的局部文件中。
| 模板 | 详情 |
|---|---|
default | 渲染默认分页模板。 位置: ~/modules/system/views/pagination/default.htm |
simple | 渲染仅带有下一页和上一页按钮的分页。 位置: ~/modules/system/views/pagination/simple.htm |
ajax | 渲染 AJAX 分页记录。 位置: ~/modules/system/views/pagination/ajax.htm |
然后通过将partial选项传递给 pager 来将其渲染为局部文件。
{{ pager(records, { partial: 'my-custom-pagination' }) }}使用ajaxPager() Twig 函数通过 AJAX 动态更新分页记录。局部文件应显示记录并包含分页器,例如,名为latest-posts.htm的局部文件,其内容如下。
<div>
{% for post in posts %}
<h2>{{ post.title }}</h2>
{% endfor %}
</div>
<nav>
{{ ajaxPager(posts) }}
</nav>然后使用{% ajaxPartial %} Twig 标签在页面上渲染该局部文件。
url = "/blog"
[collection blog]
handle = "Blog\Post"{% set posts = blog.paginate(10) %}
<h3>Latest Posts</h3>
{% ajaxPartial 'latest-posts' %}或者,您可以将所有逻辑封装在局部文件内部,使其完全可移植。
[collection blog]
handle = "Blog\Post"{% set posts = blog.paginate(10) %}
<div>
{% for post in posts %}
<h2>{{ post.title }}</h2>
{% endfor %}
</div>
<nav>
{{ ajaxPager(posts) }}
</nav>然后,该局部文件可以在页面或布局的任何位置渲染,无需任何额外配置。
url = "/blog"{% ajaxPartial 'latest-posts' %}“加载更多”按钮,有时也称为无限加载器,是一种以堆栈形式而非跨多个页面显示记录的方法。
这种方法使用 AJAX 局部文件来追加新内容以及一个自毁按钮。例如,名为load-more-posts.htm的局部文件,其内容如下。
{% set posts = blog.paginate(10) %}
<div>
{% for post in posts %}
<h2>{{ post.title }}</h2>
{% endfor %}
</div>
{% if posts.hasMorePages %}
<button
data-request="onAjax"
data-request-update="{ _self: '@' }"
data-request-success="this.remove()"
data-request-data="{ page: {{ posts.currentPage + 1 }} }"
data-attach-loading>
Load More
</button>
{% endif %}该按钮元素利用 AJAX 数据属性的组合来执行追加模式下的自更新,将下一页的页码作为数据传递,并在完成后移除自身。
该局部文件应使用{% ajaxPartial %} Twig 标签进行渲染。
url = "/blog"{% ajaxPartial 'load-more-posts' %}