Pagination 分页
基本用法
用ax-pagination包裹，当前分页请用ax-active表示；总分页用ax-total；上一页用ax-prev表示；下一页ax-next表示；首页用ax-first表示；尾页用ax-last表示。
默认居中排列，可组合使用ax-align-left和ax-align-right实现居左排列和居右排列。
因为是行内元素，注意span或a标签之间不要有间隔或者换行，否则会产生多余的4px间隔。
<div class="ax-pagination">
<a class="ax-total">共142条</a><a href="###" class="ax-prev">上一页</a><a href="###">1</a><a class="ax-active">2</a><a href="###">3</a><a href="###">4</a><a href="###">5</a><a href="###">6</a><a href="###" class="ax-next">下一页</a><a href="###" class="ax-last">尾页</a>
</div>
<div class="ax-pagination ax-align-left">
<a class="ax-total">共142条</a><a href="###" class="ax-prev">上一页</a><a href="###">1</a><a class="ax-active">2</a><a href="###">3</a><a href="###">4</a><a href="###">5</a><a href="###">6</a><a href="###" class="ax-next">下一页</a><a href="###" class="ax-last">尾页</a>
</div>
<div class="ax-pagination ax-align-right">
<a class="ax-total">共142条</a><a href="###" class="ax-prev">上一页</a><a href="###">1</a><a class="ax-active">2</a><a href="###">3</a><a href="###">4</a><a href="###">5</a><a href="###">6</a><a href="###" class="ax-next">下一页</a><a href="###" class="ax-last">尾页</a>
</div>
跳转分页
确定按钮是Button
<div class="ax-pagination ax-align-left">
<a href="###" class="ax-first">首页</a><a href="###" class="ax-prev">上一页</a><a href="###">1</a><a class="ax-active">2</a><a href="###">3</a><a href="###">4</a><a href="###">5</a><a href="###">6</a><a href="###" class="ax-next">下一页</a><a href="###" class="ax-last">尾页</a><span class="ax-gopage"><span>共142条,跳到</span><input type="text"><span>页</span><button type="button" class="ax-btn">确定</button></span>
</div>
<div class="ax-break"></div>
确定按钮是Input
<div class="ax-pagination ax-align-left">
<a href="###" class="ax-first">首页</a><a href="###" class="ax-prev">上一页</a><a href="###">1</a><a class="ax-active">2</a><a href="###">3</a><a href="###">4</a><a href="###">5</a><a href="###">6</a><a href="###" class="ax-next">下一页</a><a href="###" class="ax-last">尾页</a><span class="ax-gopage"><span>共142条,跳到</span><input type="text"><span>页</span><input type="submit" value="确定" class="ax-btn"/></span>
</div>
<div class="ax-break"></div>
确定按钮是a
<div class="ax-pagination ax-align-left">
<a href="###" class="ax-first">首页</a><a href="###" class="ax-prev">上一页</a><a href="###">1</a><a class="ax-active">2</a><a href="###">3</a><a href="###">4</a><a href="###">5</a><a href="###">6</a><a href="###" class="ax-next">下一页</a><a href="###" class="ax-last">尾页</a><span class="ax-gopage"><span>共142条,跳到</span><input type="text"><span>页</span><a href="###">确定</a></span>
</div>
<div class="ax-break"></div>
select跳转
<div class="ax-pagination ax-align-left">
<a href="###" class="ax-first">首页</a><a href="###" class="ax-prev">上一页</a><a href="###">1</a><a class="ax-active">2</a><a href="###">3</a><a href="###">4</a><a href="###">5</a><a href="###">6</a><a href="###" class="ax-next">下一页</a><a href="###" class="ax-last">尾页</a><span class="ax-gopage"><span>共142条,跳到</span><select><option selected>8</option><option>9</option></select><span >页</span>
</div>
多种变形
<div class="ax-pagination">
<a class="ax-total">共142条</a><a href="###" class="ax-first">首页</a><a href="###" class="ax-prev"><i></i>上一页</a><a href="###">1</a><a class="ax-active">2</a><a href="###">3</a><span>...</span><a href="###">4</a><a href="###">5</a><a href="###">6</a><a href="###" class="ax-next">下一页<i></i></a><a href="###" class="ax-last">尾页</a>
</div>
<div class="ax-pagination">
<a class="ax-total">共142条</a><a href="###" class="ax-first"><i>《</i>首页</a><a href="###" class="ax-prev"><i>〈</i>上一页</a><a href="###">1</a><a class="ax-active">2</a><a href="###">3</a><span>...</span><a href="###">4</a><a href="###">5</a><a href="###">6</a><a href="###" class="ax-next">下一页<i>〉</i></a><a href="###" class="ax-last">尾页<i>》</i></a>
</div>
<div class="ax-pagination">
<a href="###" class="ax-firt"><i>《</i></a><a href="###" class="ax-prev"><i>〈</i></a><a href="###">1</a><a class="ax-active">2</a><a href="###">3</a><span>...</span><a href="###">4</a><a href="###">5</a><a href="###">6</a><a href="###" class="ax-next"><i>〉</i></a><a href="###" class="ax-last"><i>》</i></a>
</div>
<div class="ax-pagination">
<a href="###" class="ax-firt"><i class="ax-iconfont ax-icon-left-double"></i></a><a href="###" class="ax-prev"><i class="ax-iconfont ax-icon-left"></i></a><a href="###">1</a><a class="ax-active">2</a><a href="###">3</a><span>...</span><a href="###">4</a><a href="###">5</a><a href="###">6</a><a href="###" class="ax-next"><i class="ax-iconfont ax-icon-right"></i></a><a href="###" class="ax-last"><i class="ax-iconfont ax-icon-right-double"></i></a>
</div>
<div class="ax-pagination">
<a href="###" class="ax-firt">«</a><a href="###" class="ax-prev">‹</a><a href="###">1</a><a class="ax-active">2</a><a href="###">3</a><span>...</span><a href="###">4</a><a href="###">5</a><a href="###">6</a><a href="###" class="ax-next">›</a><a href="###" class="ax-last">»</a>
</div>
<div class="ax-pagination">
<a href="###" class="ax-firt">⇤</a><a href="###" class="ax-prev">←</a><a href="###">1</a><a class="ax-active">2</a><a href="###">3</a><span>...</span><a href="###">4</a><a href="###">5</a><a href="###">6</a><a href="###" class="ax-next">→</a><a href="###" class="ax-last">⇥</a>
</div>
<div class="ax-pagination">
<span>总共</span><span>200</span><span>个记录，当前第</span><span>8</span><span>页，每页</span><input type="text" value="15"><span>条数据</span> <a href="###" class="ax-first">首页</a><a href="###" class="ax-prev">上一页</a><a href="###" class="ax-next">下一页</a><a href="###" class="ax-last">尾页</a> <span>共142条，跳到</span><select><option selected>8</option><option>9</option></select><span>页</span>
</div>
组合
<div class="ax-pagination ax-align-left">
<div class="ax-group">
<a href="###" class="ax-firt">«</a><a href="###" class="ax-prev">‹</a><a href="###">1</a><a class="ax-active">2</a><a href="###">3</a><span>...</span><a href="###">4</a><a href="###">5</a><a href="###">6</a><a href="###" class="ax-next">›</a><a href="###" class="ax-last">»</a>
</div>
</div>
<div class="ax-pagination ax-align-left">
<div class="ax-group">
<a href="###" class="ax-firt">«</a><a href="###" class="ax-prev">‹</a><a href="###">1</a><a class="ax-active">2</a><a href="###">3</a><span>...</span><a href="###">4</a><a href="###">5</a><a href="###">6</a><a href="###" class="ax-next">›</a><a href="###" class="ax-last">»</a>
</div><span class="ax-gutter-sm"></span><span>2/8</span>
</div>
<div class="ax-pagination ax-align-left">
<div class="ax-group">
<a href="###" class="ax-firt">«</a><a href="###" class="ax-prev">‹</a><a href="###">1</a><a class="ax-active">2</a><a href="###">3</a><span>...</span><a href="###">4</a><a href="###">5</a><a href="###">6</a><a href="###" class="ax-next">›</a><a href="###" class="ax-last">»</a>
</div><span class="ax-gutter-sm"></span><span class="ax-gopage"><span>共142条,跳到</span><input type="text"><span>页</span><a href="###">确定</a>
</div>
<div class="ax-pagination ax-align-left">
<div class="ax-group">
<a href="###" class="ax-prev">‹</a><a href="###" class="ax-next">›</a>
</div>
</div>
其他组合风格
使用ax-pagination ax-light样式即可实现如下风格。
<div class="ax-pagination ax-light ax-align-left">
<div class="ax-group">
<a href="###" class="ax-firt">?</a><a href="###" class="ax-prev">?</a><a href="###">1</a><a class="ax-active">2</a><a href="###">3</a><span>...</span><a href="###">4</a><a href="###">5</a><a href="###">6</a><a href="###" class="ax-next">?</a><a href="###" class="ax-last">?</a>
</div>
</div>
静态分页插件 PLUGIN
Paginathing是一个简单使用的用于前端的静态分页插件，虽然作者更新频率不高，但是对于常规使用已经足够，本框架在原插件2018年版本基础上进行了合理的修改整合。详情见Github。
- 修改HTML结构
- 修改CSS前缀为ax
- 新增pageClass参数
- 新增total参数
- 新增innerClass参数
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
-
<script src="https://src.axui.cn/v1.0/src/plugins/paginathing/paginathing.min.js" type="text/javascript"></script> <script type='text/javascript'> $(document).ready(function () { $('#page02').paginathing(); }); </script> -
<ul id="page01"> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">1</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">2</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">3</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">4</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">5</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">6</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">7</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">8</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">9</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">10</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">11</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">12</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">13</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">14</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">15</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">16</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">17</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">18</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">19</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">20</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">21</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">22</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">23</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">24</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">25</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">26</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">27</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">28</div></div></div><div class="ax-break-line"></div></li> </ul>
自定义参数
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
-
<script src="https://src.axui.cn/v1.0/src/plugins/paginathing/paginathing.min.js" type="text/javascript"></script> <script type='text/javascript'> $(document).ready(function () { $('#page02').paginathing({ perPage: 5, lessHidden:true, prevText: '前一页', nextText: '后一页', firstText: '首页', lastText: '尾页', total: true, }); }); </script> -
<ul id="page02"> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">1</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">2</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">3</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">4</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">5</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">6</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">7</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">8</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">9</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">10</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">11</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">12</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">13</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">14</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">15</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">16</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">17</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">18</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">19</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">20</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">21</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">22</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">23</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">24</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">25</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">26</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">27</div></div></div><div class="ax-break-line"></div></li> <li><div class="ax-info-block"><div class="ax-row"><div class="ax-col">28</div></div></div><div class="ax-break-line"></div></li> </ul>
Paginathing插件参数说明如下
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| perPage | 每页显示多少条数据，填写整数数值 | number | 10 |
| limitPagination | 是否限制总数，默认为false不限制，如果需要限制总数请填写整数数值 | boolean/number | false |
| firstLast | 是否显示前/后页按钮，默认true显示，false表示不显示 | boolean | true |
| firstLast | 是否显示首页/尾页按钮，默认true显示，false表示不显示 | boolean | true |
| prevText | 前一页按钮文字，默认是单箭头，可以填文字、图标或者特殊字符 | text | |
| nextText | 后一页按钮文字，默认是单箭头，可以填文字、图标或者特殊字符 | text | |
| firstText | 首页按钮文字，默认是双箭头，可以填文字、图标或者特殊字符 | text | |
| lastText | 尾页按钮文字，默认是双箭头，可以填文字、图标或者特殊字符 | text | |
| containerClass | 分页外边样式，不建议修改 | text | ax-pagination |
| innerClass | 分页内边组合显示样式，不建议修改 | text | ax-group |
| pageClass | 分页标签的样式，默认没有样式 | text | 空 |
| activeClass | 当前页样式，不建议修改 | text | ax-active |
| disabledClass | 不可操作样式，不建议修改 | text | ax-disabled |
| insertAfter | 页码导航在哪里创建，默认在列表后面创建，可以自定义位置，class或id均可 | text | null |
| total | 是否显示页码说明，默认false不显示，true表示显示xx/xx的页面说明 | boolean | false |
| lessHidden | 如果列表总数小于一个分页数量，是否隐藏分页插件，默认false不隐藏，true表示隐藏 | boolean | false |