Pagination 分页
v2.0.6+

分页组件，服务端返回 JSON 自动渲染分页条。与 htmx 集成，点击页码通过 hx-get 请求新数据。

基础用法

  • Preview
  • Code
点击页码按钮触发请求（这里返回静态 JSON 仅用于演示渲染）。 
<div hx-ext="bny-pagination"
     hx-get="/api/users"
     hx-target="#user-list"
     hx-swap="innerHTML"
     data-max-buttons="7">
</div>
<div id="user-list"></div>

<!-- 服务端返回 JSON： -->
<!-- { "total": 100, "page": 1, "pageSize": 10 } -->

简洁模式 + 主题色

  • Preview
  • Code
<div hx-ext="bny-pagination"
     color="blue" model="simple"
     data-max-buttons="5"
     data-jumper="false"
     data-total="false">
</div>

与表格组合

  • Preview
  • Code
data-render-list="true" 配合 JSON 中的 columns 与 allList，自动渲染表格 + 分页条，点击页码切换数据（前端分页）。 
<div hx-ext="bny-pagination"
     hx-get="/api/users"
     hx-target="#table-demo"
     hx-swap="innerHTML"
     hx-trigger="load"
     data-render-list="true"
     data-page-size="5">
</div>
<div id="table-demo"></div>

<!-- 服务端返回 JSON： -->
<!-- { "total": 30, "pageSize": 5, -->
<!--   "columns": [{"field":"id","title":"ID"},...], -->
<!--   "allList": [{"id":1,...},...] } -->

配置项

  • Preview
  • Code
常用配置：
data-max-buttons：最多页码按钮数（默认 7）
data-page-size：每页条数（默认 10）
data-jumper="false"：隐藏跳转框
data-total="false"：隐藏总数
data-page-param：URL 参数名（默认 page）
color：主题色（default/green/blue/yellow/red）
model="simple"：无边框简洁模式 
<div hx-ext="bny-pagination"
     hx-get="/api/list"
     hx-target="#demo"
     data-page-size="20"
     data-max-buttons="9"
     data-page-param="p"
     color="green">
</div>

API

属性

属性说明
hx-ext="bny-pagination"启用分页
hx-get请求数据的 URL
hx-target列表容器选择器
data-max-buttons最多页码按钮数，默认 7
data-page-size每页条数，默认 10
data-jumper设为 false 隐藏跳转框
data-total设为 false 隐藏总数
data-page-paramURL 参数名，默认 page
color主题色：default/green/blue/yellow/red
model="simple"无边框简洁模式