Pagination 分页

基本用法

ax-pagination包裹,当前分页请用ax-active表示;总分页用ax-total;上一页用ax-prev表示;下一页ax-next表示;首页用ax-first表示;尾页用ax-last表示。

默认居中排列,可组合使用ax-align-leftax-align-right实现居左排列和居右排列。

因为是行内元素,注意spana标签之间不要有间隔或者换行,否则会产生多余的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
首页上一页123456下一页尾页共142条,跳到
确定按钮是Input
确定按钮是a
select跳转
                                确定按钮是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样式即可实现如下风格。

123...456
                                <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/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/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