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跳转
首页上一页123456下一页尾页共142条,跳到
                                确定按钮是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>
                        

分页插件

分页插件axPagination支持多种数据格式分页,支持两种异步数据分页。

  • 1、页面已有的节点分页,比如ul+litbody+tr,数据格式为[dom,dom,...]
  • 2、对象数组分页,此类数据需要使用模板进行解析成dom元素,数据格式为[{title:'',click:'',href:''},{...}...]
  • 3、排序列表数组分页,目前已知是用于框架自身axList数据,数据格式为[{name:'',country:'',dom:''},{...}...]
  • 4、异步json数据分页,此类数据需要使用模板进行解析成dom元素并启用async参数,json文本格式为[{title:'',click:'',href:''},{...}...]
  • 5、从服务器异步读取一页数据,此类数据需要使用模板进行解析成dom元素并启用async参数,数据格式为[{title:'',click:'',href:''},{...}...],值得注意的是该数据方式每次只会从服务器取得一页的数据,所以比较适合大型数据情况。

插件运行方式有两种:

  • ax*属性:对按钮使用axPagination属性,配合使用data-listDom参数即可按默认参数运行插件。
  • js实例:通过new axPagination('#ID',{data:''})方式创建实例运行。
使用axPagination属性
使用js实例
  •                                     <ul id="list">
                                            <li>
                                                <div class="ax-info-block">
                                                    <div class="ax-row">
                                                        <div class="ax-col"><a href="###" class="ax-ell">南京:25日起将出现持续高温天气 最高可达41℃</a></div> <span class="ax-arrow">63次</span>
                                                    </div>
                                                </div>
                                                <div class="ax-break-line"></div>
                                            </li>
                                            <li>
                                                <div class="ax-info-block">
                                                    <div class="ax-row">
                                                        <div class="ax-col"><a href="###" class="ax-ell">美国总统拜登确诊感染新冠病毒 中方回应</a></div> <span class="ax-arrow">81次</span>
                                                    </div>
                                                </div>
                                                <div class="ax-break-line"></div>
                                            </li>
                                            <li>
                                                <div class="ax-info-block">
                                                    <div class="ax-row">
                                                        <div class="ax-col"><a href="###" class="ax-ell">中国证监会上海监管局原调研员朱毅被开除党籍</a></div> <span class="ax-arrow">204次</span>
                                                    </div>
                                                </div>
                                                <div class="ax-break-line"></div>
                                            </li>
                                            <li>
                                                <div class="ax-info-block">
                                                    <div class="ax-row">
                                                        <div class="ax-col"><a href="###" class="ax-ell">陕西本轮本土疫情全部清零</a></div> <span class="ax-arrow">365次</span>
                                                    </div>
                                                </div>
                                                <div class="ax-break-line"></div>
                                            </li>
                                            <li>
                                                <div class="ax-info-block">
                                                    <div class="ax-row">
                                                        <div class="ax-col"><a href="###" class="ax-ell">四川省泸州市政府原党组成员、副市长郭庆被“双开”</a></div> <span class="ax-arrow">109次</span>
                                                    </div>
                                                </div>
                                                <div class="ax-break-line"></div>
                                            </li>
                                            <li>
                                                <div class="ax-info-block">
                                                    <div class="ax-row">
                                                        <div class="ax-col"><a href="###" class="ax-ell">刘振芳任国铁集团董事长 郭竹学任总经理</a></div> <span class="ax-arrow">981次</span>
                                                    </div>
                                                </div>
                                                <div class="ax-break-line"></div>
                                            </li>
                                            <li>
                                                <div class="ax-info-block">
                                                    <div class="ax-row">
                                                        <div class="ax-col"><a href="###" class="ax-ell">天津西青区新增划定多个高、中、低风险区</a></div> <span class="ax-arrow">207次</span>
                                                    </div>
                                                </div>
                                                <div class="ax-break-line"></div>
                                            </li>
                                            <li>
                                                <div class="ax-info-block">
                                                    <div class="ax-row">
                                                        <div class="ax-col"><a href="###" class="ax-ell">中国移动原市场经营部资深经理陆文昌被查</a></div> <span class="ax-arrow">260次</span>
                                                    </div>
                                                </div>
                                                <div class="ax-break-line"></div>
                                            </li>
                                            <li>
                                                <div class="ax-info-block">
                                                    <div class="ax-row">
                                                        <div class="ax-col"><a href="###" class="ax-ell">刘炤任最高检党组成员,原任司法部副部长</a></div> <span class="ax-arrow">259次</span>
                                                    </div>
                                                </div>
                                                <div class="ax-break-line"></div>
                                            </li>
                                            <li>
                                                <div class="ax-info-block">
                                                    <div class="ax-row">
                                                        <div class="ax-col"><a href="###" class="ax-ell">林志颖驾驶特斯拉发生严重车祸,现已送医</a></div> <span class="ax-arrow">391次</span>
                                                    </div>
                                                </div>
                                                <div class="ax-break-line"></div>
                                            </li>
                                            <li>
                                                <div class="ax-info-block">
                                                    <div class="ax-row">
                                                        <div class="ax-col"><a href="###" class="ax-ell">郑州市防汛应急救援电话</a></div> <span class="ax-arrow">184次</span>
                                                    </div>
                                                </div>
                                                <div class="ax-break-line"></div>
                                            </li>
                                            <li>
                                                <div class="ax-info-block">
                                                    <div class="ax-row">
                                                        <div class="ax-col"><a href="###" class="ax-ell">频频“出圈”的网红官员</a></div> <span class="ax-arrow">368次</span>
                                                    </div>
                                                </div>
                                                <div class="ax-break-line"></div>
                                            </li>
                                            <li>
                                                <div class="ax-info-block">
                                                    <div class="ax-row">
                                                        <div class="ax-col"><a href="###" class="ax-ell">今天傍晚雷阵雨抵京,双休日继续闷热</a></div> <span class="ax-arrow">261次</span>
                                                    </div>
                                                </div>
                                                <div class="ax-break-line"></div>
                                            </li>
                                            <li>
                                                <div class="ax-info-block">
                                                    <div class="ax-row">
                                                        <div class="ax-col"><a href="###" class="ax-ell">一天新增超500例阳性!46家景区暂停接待</a></div> <span class="ax-arrow">715次</span>
                                                    </div>
                                                </div>
                                                <div class="ax-break-line"></div>
                                            </li>
                                            <li>
                                                <div class="ax-info-block">
                                                    <div class="ax-row">
                                                        <div class="ax-col"><a href="###" class="ax-ell">甘肃兰州城关区社会面检出阳性人员数量明显下降</a></div> <span class="ax-arrow">684次</span>
                                                    </div>
                                                </div>
                                                <div class="ax-break-line"></div>
                                            </li>
                                            <li>
                                                <div class="ax-info-block">
                                                    <div class="ax-row">
                                                        <div class="ax-col"><a href="###" class="ax-ell">山东省政协原主席陆懋曾因病逝世,享年94岁</a></div> <span class="ax-arrow">246次</span>
                                                    </div>
                                                </div>
                                                <div class="ax-break-line"></div>
                                            </li>
                                            <li>
                                                <div class="ax-info-block">
                                                    <div class="ax-row">
                                                        <div class="ax-col"><a href="###" class="ax-ell">甘肃兰州第二轮全域全员核酸检测检出阳性179例</a></div> <span class="ax-arrow">154次</span>
                                                    </div>
                                                </div>
                                                <div class="ax-break-line"></div>
                                            </li>
                                            <li>
                                                <div class="ax-info-block">
                                                    <div class="ax-row">
                                                        <div class="ax-col"><a href="###" class="ax-ell">甘肃兰州已启用集中隔离点172个 集中隔离10351人</a></div> <span class="ax-arrow">815次</span>
                                                    </div>
                                                </div>
                                                <div class="ax-break-line"></div>
                                            </li>
                                            <li>
                                                <div class="ax-info-block">
                                                    <div class="ax-row">
                                                        <div class="ax-col"><a href="###" class="ax-ell">澳门新增核酸检测阳性病例5例 社区实现清零</a></div> <span class="ax-arrow">487次</span>
                                                    </div>
                                                </div>
                                                <div class="ax-break-line"></div>
                                            </li>
                                            <li>
                                                <div class="ax-info-block">
                                                    <div class="ax-row">
                                                        <div class="ax-col"><a href="###" class="ax-ell">一查到底!南京回应寺庙供奉日本侵华战犯牌位</a></div> <span class="ax-arrow">685次</span>
                                                    </div>
                                                </div>
                                                <div class="ax-break-line"></div>
                                            </li>
                                            <li>
                                                <div class="ax-info-block">
                                                    <div class="ax-row">
                                                        <div class="ax-col"><a href="###" class="ax-ell">今日9时河南启动防汛四级应急响应</a></div> <span class="ax-arrow">163次</span>
                                                    </div>
                                                </div>
                                                <div class="ax-break-line"></div>
                                            </li>
                                            <li>
                                                <div class="ax-info-block">
                                                    <div class="ax-row">
                                                        <div class="ax-col"><a href="###" class="ax-ell">击败卫冕冠军,清华女篮夺得CUBA队史第3冠</a></div> <span class="ax-arrow">241次</span>
                                                    </div>
                                                </div>
                                                <div class="ax-break-line"></div>
                                            </li>
                                            <li>
                                                <div class="ax-info-block">
                                                    <div class="ax-row">
                                                        <div class="ax-col"><a href="###" class="ax-ell">滞留涠洲岛八天八夜,他们“希望那个岛越来越好”</a></div> <span class="ax-arrow">259次</span>
                                                    </div>
                                                </div>
                                                <div class="ax-break-line"></div>
                                            </li>
                                            <li>
                                                <div class="ax-info-block">
                                                    <div class="ax-row">
                                                        <div class="ax-col"><a href="###" class="ax-ell">吉林省7月21日新增本地无症状感染者2例,均在榆树市</a></div> <span class="ax-arrow">581次</span>
                                                    </div>
                                                </div>
                                                <div class="ax-break-line"></div>
                                            </li>
                                            <li>
                                                <div class="ax-info-block">
                                                    <div class="ax-row">
                                                        <div class="ax-col"><a href="###" class="ax-ell">安徽7月21日新增本土确诊8例、本土无症状44例</a></div> <span class="ax-arrow">48次</span>
                                                    </div>
                                                </div>
                                                <div class="ax-break-line"></div>
                                            </li>
                                            <li>
                                                <div class="ax-info-block">
                                                    <div class="ax-row">
                                                        <div class="ax-col"><a href="###" class="ax-ell">痛心!长江白鲟被正式宣布灭绝 存活了约2亿年</a></div> <span class="ax-arrow">69次</span>
                                                    </div>
                                                </div>
                                                <div class="ax-break-line"></div>
                                            </li>
                                            <li>
                                                <div class="ax-info-block">
                                                    <div class="ax-row">
                                                        <div class="ax-col"><a href="###" class="ax-ell">北京7月21日无新增本土确诊病例和本土无症状感染者</a></div> <span class="ax-arrow">841次</span>
                                                    </div>
                                                </div>
                                                <div class="ax-break-line"></div>
                                            </li>
                                            <li>
                                                <div class="ax-info-block">
                                                    <div class="ax-row">
                                                        <div class="ax-col"><a href="###" class="ax-ell">如何稳增长?基建再次“挑大梁”</a></div> <span class="ax-arrow">154次</span>
                                                    </div>
                                                </div>
                                                <div class="ax-break-line"></div>
                                            </li>
                                            <li>
                                                <div class="ax-info-block">
                                                    <div class="ax-row">
                                                        <div class="ax-col"><a href="###" class="ax-ell">深圳多地调整疫情风险区等级</a></div> <span class="ax-arrow">325次</span>
                                                    </div>
                                                </div>
                                                <div class="ax-break-line"></div>
                                            </li>
                                            <li>
                                                <div class="ax-info-block">
                                                    <div class="ax-row">
                                                        <div class="ax-col"><a href="###" class="ax-ell">教育部开展专项行动,严查这些突出问题!</a></div> <span class="ax-arrow">962次</span>
                                                    </div>
                                                </div>
                                                <div class="ax-break-line"></div>
                                            </li>
                                            <li>
                                                <div class="ax-info-block">
                                                    <div class="ax-row">
                                                        <div class="ax-col"><a href="###" class="ax-ell">云南7月21日无新增确诊病例</a></div> <span class="ax-arrow">459次</span>
                                                    </div>
                                                </div>
                                                <div class="ax-break-line"></div>
                                            </li>
                                            <li>
                                                <div class="ax-info-block">
                                                    <div class="ax-row">
                                                        <div class="ax-col"><a href="###" class="ax-ell">广东中山三角镇中高风险区清零</a></div> <span class="ax-arrow">98次</span>
                                                    </div>
                                                </div>
                                                <div class="ax-break-line"></div>
                                            </li>
                                            <li>
                                                <div class="ax-info-block">
                                                    <div class="ax-row">
                                                        <div class="ax-col"><a href="###" class="ax-ell">陪伴香港人23年的大熊猫“安安”离世,终年35岁</a></div> <span class="ax-arrow">1105次</span>
                                                    </div>
                                                </div>
                                                <div class="ax-break-line"></div>
                                            </li>
                                            <li>
                                                <div class="ax-info-block">
                                                    <div class="ax-row">
                                                        <div class="ax-col"><a href="###" class="ax-ell">这一省会城市土拍要求“现房销售”,啥信号?</a></div> <span class="ax-arrow">965次</span>
                                                    </div>
                                                </div>
                                                <div class="ax-break-line"></div>
                                            </li>
                                            <li>
                                                <div class="ax-info-block">
                                                    <div class="ax-row">
                                                        <div class="ax-col"><a href="###" class="ax-ell">车市上半年:“乘”涨“商”跌 商用车何时重归增长?</a></div> <span class="ax-arrow">125次</span>
                                                    </div>
                                                </div>
                                                <div class="ax-break-line"></div>
                                            </li>
                                            <li>
                                                <div class="ax-info-block">
                                                    <div class="ax-row">
                                                        <div class="ax-col"><a href="###" class="ax-ell">广州地铁三号线东延段开始铺轨</a></div> <span class="ax-arrow">854次</span>
                                                    </div>
                                                </div>
                                                <div class="ax-break-line"></div>
                                            </li>
                                            <li>
                                                <div class="ax-info-block">
                                                    <div class="ax-row">
                                                        <div class="ax-col"><a href="###" class="ax-ell">甘肃临夏积石山县本轮疫情已累计报告7例感染者</a></div> <span class="ax-arrow">698次</span>
                                                    </div>
                                                </div>
                                                <div class="ax-break-line"></div>
                                            </li>
                                        </ul>
                                        <div class="ax-pagination" axPagination data-data="#list"></div>
                                        <div clas="ax-break"></div>
                                        <div id="jsList"></div>
                                        <div class="ax-pagination" id="js"></div>
                                            
  •                                             let data = [
                    { title: '南京:25日起将出现持续高温天气 最高可达41℃', href: '###', click: 63 },
                    { title: '美国总统拜登确诊感染新冠病毒 中方回应', href: '###', click: 81 },
                    { title: '中国证监会上海监管局原调研员朱毅被开除党籍', href: '###', click: 204 },
                    { title: '陕西本轮本土疫情全部清零', href: '###', click: 365 },
                    { title: '四川省泸州市政府原党组成员、副市长郭庆被“双开”', href: '###', click: 109 },
                    { title: '刘振芳任国铁集团董事长 郭竹学任总经理', href: '###', click: 981 },
                    { title: '天津西青区新增划定多个高、中、低风险区', href: '###', click: 207 },
                    { title: '中国移动原市场经营部资深经理陆文昌被查', href: '###', click: 260 },
                    { title: '刘炤任最高检党组成员,原任司法部副部长', href: '###', click: 259 },
                    { title: '林志颖驾驶特斯拉发生严重车祸,现已送医', href: '###', click: 391 },
                    { title: '郑州市防汛应急救援电话', href: '###', click: 184 },
                    { title: '频频“出圈”的网红官员', href: '###', click: 368 },
                    { title: '今天傍晚雷阵雨抵京,双休日继续闷热', href: '###', click: 261 },
                    { title: '一天新增超500例阳性!46家景区暂停接待', href: '###', click: 715 },
                    { title: '甘肃兰州城关区社会面检出阳性人员数量明显下降', href: '###', click: 684 },
                    { title: '山东省政协原主席陆懋曾因病逝世,享年94岁', href: '###', click: 246 },
                    { title: '甘肃兰州第二轮全域全员核酸检测检出阳性179例', href: '###', click: 154 },
                    { title: '甘肃兰州已启用集中隔离点172个 集中隔离10351人', href: '###', click: 815 },
                    { title: '澳门新增核酸检测阳性病例5例 社区实现清零', href: '###', click: 487 },
                    { title: '一查到底!南京回应寺庙供奉日本侵华战犯牌位', href: '###', click: 685 },
                    { title: '今日9时河南启动防汛四级应急响应', href: '###', click: 163 },
                    { title: '击败卫冕冠军,清华女篮夺得CUBA队史第3冠', href: '###', click: 241 },
                    { title: '滞留涠洲岛八天八夜,他们“希望那个岛越来越好”', href: '###', click: 259 },
                    { title: '吉林省7月21日新增本地无症状感染者2例,均在榆树市', href: '###', click: 581 },
                    { title: '安徽7月21日新增本土确诊8例、本土无症状44例', href: '###', click: 48 },
                    { title: '痛心!长江白鲟被正式宣布灭绝 存活了约2亿年', href: '###', click: 69 },
                    { title: '北京7月21日无新增本土确诊病例和本土无症状感染者', href: '###', click: 841 },
                    { title: '如何稳增长?基建再次“挑大梁”', href: '###', click: 154 },
                    { title: '深圳多地调整疫情风险区等级', href: '###', click: 325 },
                    { title: '教育部开展专项行动,严查这些突出问题!', href: '###', click: 962 },
                    { title: '云南7月21日无新增确诊病例', href: '###', click: 459 },
                    { title: '广东中山三角镇中高风险区清零', href: '###', click: 98 },
                    { title: '陪伴香港人23年的大熊猫“安安”离世,终年35岁', href: '###', click: 1105 },
                    { title: '这一省会城市土拍要求“现房销售”,啥信号?', href: '###', click: 965 },
                    { title: '车市上半年:“乘”涨“商”跌 商用车何时重归增长?', href: '###', click: 125 },
                    { title: '广州地铁三号线东延段开始铺轨', href: '###', click: 854 },
                    { title: '甘肃临夏积石山县本轮疫情已累计报告7例感染者', href: '###', click: 698 },
                ]
                let tpl = `
                            <li>
                                <div class="ax-info-block">
                                    <div class="ax-row">
                                        <div class="ax-col"><a href="<% this.href %>" class="ax-ell"><% this.title %></a></div>
                                        <span class="ax-arrow"><% this.click %>次</span>
                                    </div>
                                </div>
                                <div class="ax-break-line"></div>
                            </li>
                            `
                let pages = new axPagination('#js', {
                    data: data,
                    template: tpl,
                    listDom:'#jsList',
                });
                                            
注意:初始化分页插件并不需要列表的Dom,如果想让数据通过列表的方式看到效果,请给listDom属性添加id、className或node节点。以上js实例中因为填写了listDom参数,所以能将列表显示出来。

异步数据

以上两个实例已经演示两种数据使用方式,一是页面已有的Dom节点,二是对象数组,权且定义为同步数据使用;分页插件的异步数据分两种,一种是调用同域的json文件获取数据,一种是指向系统动态页面,返回某一页的对象数组数据。他们的使用方法分别如下:

  • json异步:启用async:'json',将data指向json文件地址,并使用template属性
  • sql异步:启用async:'sql',将data指向提交动态网页地址,并使用template属性。sql异步原理是将“count每页数量”和“current当前页”作为数据传递至动态页面,动态页面返回数据,格式为{data:'',current:'',pagesNum:'',count:''},即某页列表数组、当前页码、总页数和每页数量。注意三个问题:
    • 1、返回的data只是一页数据
    • 2、为何需要返回current呢?如果数据库中只有2页数据,但是传递过去的current值大于2,那么动态页面将current参数自动修正为2并返回
    • 3、pagesNum是动态页面根据数据库中数据总数除以传递过来的count值而获得的

异步分页自带了缓冲加载效果,用户可通过设置delay参数查看效果,单位是ms,默认值是0;

json异步分页,不带列表
json异步分页,带列表
sql异步分页,不带列表
sql异步分页,带列表参数
sql异步分页,带列表和loadingMode参数实现浮层加载效果
  •                                             <h5>json异步分页,不带列表</h5>
                                                <div class="ax-pagination" axPagination data-data="ajax/list.json" data-async="json" data-template="#tpl"></div>
                                                <div class="ax-break"></div><div class="ax-break"></div>
                                                <h5>json异步分页,带列表</h5>
                                                <div id="jsonList"></div>
                                                <div class="ax-pagination" axPagination data-data="ajax/list.json" data-async="json" data-template="#tpl" data-listDom="#jsonList"></div>
                                                <div class="ax-break"></div><div class="ax-break"></div>
                                                <h5>sql异步分页,不带列表</h5>
                                                <div class="ax-pagination" axPagination data-data="ajax/server.php" data-async="sql" data-template="#tpl"></div>
                                                <div class="ax-break"></div><div class="ax-break"></div>
                                                <h5>sql异步分页,带列表参数</h5>
                                                <div id="sqlList"></div>
                                                <div class="ax-pagination" axPagination data-data="ajax/server.php" data-async="sql" data-template="#tpl" data-listDom="#sqlList" ></div>
                                                <div class="ax-break"></div><div class="ax-break"></div>
                                                <h5>sql异步分页,带列表和loadingMode参数实现浮层加载效果</h5>
                                                <div id="sqlOver" style="position: relative;"></div>
                                                <div class="ax-pagination" axPagination data-data="ajax/server.php" data-async="sql" data-template="#tpl" data-listDom="#sqlOver"  data-loadingMode="overlay"></div>
                                            
  •                             <script type="text/template" id="tpl">
                                    <li>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="<% this.href %>" class="ax-ell"><% this.title %></a></div>
                                                <span class="ax-arrow"><% this.click %>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-break-line"></div>
                                    </li>
                                </script>
                                            
  •                                         [
                                                {
                                                    "title": "南京:25日起将出现持续高温天气 最高可达41℃",
                                                    "href": "###",
                                                    "click": 63
                                                },
                                                {
                                                    "title": "美国总统拜登确诊感染新冠病毒 中方回应",
                                                    "href": "###",
                                                    "click": 81
                                                },
                                                {
                                                    "title": "中国证监会上海监管局原调研员朱毅被开除党籍",
                                                    "href": "###",
                                                    "click": 204
                                                },
                                                {
                                                    "title": "陕西本轮本土疫情全部清零",
                                                    "href": "###",
                                                    "click": 365
                                                },
                                                {
                                                    "title": "四川省泸州市政府原党组成员、副市长郭庆被“双开”",
                                                    "href": "###",
                                                    "click": 109
                                                },
                                                {
                                                    "title": "刘振芳任国铁集团董事长 郭竹学任总经理",
                                                    "href": "###",
                                                    "click": 981
                                                },
                                                {
                                                    "title": "天津西青区新增划定多个高、中、低风险区",
                                                    "href": "###",
                                                    "click": 207
                                                },
                                                {
                                                    "title": "中国移动原市场经营部资深经理陆文昌被查",
                                                    "href": "###",
                                                    "click": 260
                                                },
                                                {
                                                    "title": "刘炤任最高检党组成员,原任司法部副部长",
                                                    "href": "###",
                                                    "click": 259
                                                },
                                                {
                                                    "title": "林志颖驾驶特斯拉发生严重车祸,现已送医",
                                                    "href": "###",
                                                    "click": 391
                                                },
                                                {
                                                    "title": "郑州市防汛应急救援电话",
                                                    "href": "###",
                                                    "click": 184
                                                },
                                                {
                                                    "title": "频频“出圈”的网红官员",
                                                    "href": "###",
                                                    "click": 368
                                                },
                                                {
                                                    "title": "今天傍晚雷阵雨抵京,双休日继续闷热",
                                                    "href": "###",
                                                    "click": 261
                                                },
                                                {
                                                    "title": "一天新增超500例阳性!46家景区暂停接待",
                                                    "href": "###",
                                                    "click": 715
                                                },
                                                {
                                                    "title": "甘肃兰州城关区社会面检出阳性人员数量明显下降",
                                                    "href": "###",
                                                    "click": 684
                                                },
                                                {
                                                    "title": "山东省政协原主席陆懋曾因病逝世,享年94岁",
                                                    "href": "###",
                                                    "click": 246
                                                },
                                                {
                                                    "title": "甘肃兰州第二轮全域全员核酸检测检出阳性179例",
                                                    "href": "###",
                                                    "click": 154
                                                },
                                                {
                                                    "title": "甘肃兰州已启用集中隔离点172个 集中隔离10351人",
                                                    "href": "###",
                                                    "click": 815
                                                },
                                                {
                                                    "title": "澳门新增核酸检测阳性病例5例 社区实现清零",
                                                    "href": "###",
                                                    "click": 487
                                                },
                                                {
                                                    "title": "一查到底!南京回应寺庙供奉日本侵华战犯牌位",
                                                    "href": "###",
                                                    "click": 685
                                                },
                                                {
                                                    "title": "今日9时河南启动防汛四级应急响应",
                                                    "href": "###",
                                                    "click": 163
                                                },
                                                {
                                                    "title": "击败卫冕冠军,清华女篮夺得CUBA队史第3冠",
                                                    "href": "###",
                                                    "click": 241
                                                },
                                                {
                                                    "title": "滞留涠洲岛八天八夜,他们“希望那个岛越来越好”",
                                                    "href": "###",
                                                    "click": 259
                                                },
                                                {
                                                    "title": "吉林省7月21日新增本地无症状感染者2例,均在榆树市",
                                                    "href": "###",
                                                    "click": 581
                                                },
                                                {
                                                    "title": "安徽7月21日新增本土确诊8例、本土无症状44例",
                                                    "href": "###",
                                                    "click": 48
                                                },
                                                {
                                                    "title": "痛心!长江白鲟被正式宣布灭绝 存活了约2亿年",
                                                    "href": "###",
                                                    "click": 69
                                                },
                                                {
                                                    "title": "北京7月21日无新增本土确诊病例和本土无症状感染者",
                                                    "href": "###",
                                                    "click": 841
                                                },
                                                {
                                                    "title": "如何稳增长?基建再次“挑大梁”",
                                                    "href": "###",
                                                    "click": 154
                                                },
                                                {
                                                    "title": "深圳多地调整疫情风险区等级",
                                                    "href": "###",
                                                    "click": 325
                                                },
                                                {
                                                    "title": "教育部开展专项行动,严查这些突出问题!",
                                                    "href": "###",
                                                    "click": 962
                                                },
                                                {
                                                    "title": "云南7月21日无新增确诊病例",
                                                    "href": "###",
                                                    "click": 459
                                                },
                                                {
                                                    "title": "广东中山三角镇中高风险区清零",
                                                    "href": "###",
                                                    "click": 98
                                                },
                                                {
                                                    "title": "陪伴香港人23年的大熊猫“安安”离世,终年35岁",
                                                    "href": "###",
                                                    "click": 1105
                                                },
                                                {
                                                    "title": "这一省会城市土拍要求“现房销售”,啥信号?",
                                                    "href": "###",
                                                    "click": 965
                                                },
                                                {
                                                    "title": "车市上半年:“乘”涨“商”跌 商用车何时重归增长?",
                                                    "href": "###",
                                                    "click": 125
                                                },
                                                {
                                                    "title": "广州地铁三号线东延段开始铺轨",
                                                    "href": "###",
                                                    "click": 854
                                                },
                                                {
                                                    "title": "甘肃临夏积石山县本轮疫情已累计报告7例感染者",
                                                    "href": "###",
                                                    "click": 698
                                                }
                                            ]
                                            
  •                                             <?php
                                                header("Content-Type:text/plain;charset=utf-8");
                                                //定义user变量,是被检索内容
                                                $list = array
                                                 (
                                                     array("title" => "南京:25日起将出现持续高温天气 最高可达41℃","href" => "###","click" => "63"),
                                                     array("title" => "美国总统拜登确诊感染新冠病毒 中方回应","href" => "###","click" => "573"),
                                                     array("title" => "中国证监会上海监管局原调研员朱毅被开除党籍","href" => "###","click" => "41"),
                                                     array("title" => "陕西本轮本土疫情全部清零","href" => "###","click" => "18"),
                                                     array("title" => "四川省泸州市政府原党组成员、副市长郭庆被“双开”","href" => "###","click" => "47"),
                                                     array("title" => "刘振芳任国铁集团董事长 郭竹学任总经理","href" => "###","click" => "237"),
                                                     array("title" => "天津西青区新增划定多个高、中、低风险区","href" => "###","click" => "429"),
                                                     array("title" => "中国移动原市场经营部资深经理陆文昌被查","href" => "###","click" => "48"),
                                                     array("title" => "刘炤任最高检党组成员,原任司法部副部长","href" => "###","click" => "974"),
                                                     array("title" => "林志颖驾驶特斯拉发生严重车祸,现已送医","href" => "###","click" => "753"),
                                                     array("title" => "郑州市防汛应急救援电话","href" => "###","click" => "124"),
                                                     array("title" => "频频“出圈”的网红官员","href" => "###","click" => "340"),
                                                     array("title" => "今天傍晚雷阵雨抵京,双休日继续闷热","href" => "###","click" => "43"),
                                                     array("title" => "一天新增超500例阳性!46家景区暂停接待","href" => "###","click" => "970"),
                                                     array("title" => "甘肃兰州城关区社会面检出阳性人员数量明显下降","href" => "###","click" => "237"),
                                                     array("title" => "山东省政协原主席陆懋曾因病逝世,享年94岁","href" => "###","click" => "473"),
                                                     array("title" => "甘肃兰州第二轮全域全员核酸检测检出阳性179例","href" => "###","click" => "100"),
                                                     array("title" => "甘肃兰州已启用集中隔离点172个 集中隔离10351人","href" => "###","click" => "107"),
                                                     array("title" => "澳门新增核酸检测阳性病例5例 社区实现清零","href" => "###","click" => "234"),
                                                     array("title" => "一查到底!南京回应寺庙供奉日本侵华战犯牌位","href" => "###","click" => "789"),
                                                     array("title" => "今日9时河南启动防汛四级应急响应","href" => "###","click" => "1126"),
                                                     array("title" => "击败卫冕冠军,清华女篮夺得CUBA队史第3冠","href" => "###","click" => "567"),
                                                     array("title" => "滞留涠洲岛八天八夜,他们“希望那个岛越来越好”","href" => "###","click" => "86"),
                                                     array("title" => "吉林省7月21日新增本地无症状感染者2例,均在榆树市","href" => "###","click" => "102"),
                                                     array("title" => "安徽7月21日新增本土确诊8例、本土无症状44例","href" => "###","click" => "21"),
                                                     array("title" => "痛心!长江白鲟被正式宣布灭绝 存活了约2亿年","href" => "###","click" => "45"),
                                                     array("title" => "北京7月21日无新增本土确诊病例和本土无症状感染者","href" => "###","click" => "67"),
                                                     array("title" => "如何稳增长?基建再次“挑大梁”","href" => "###","click" => "854"),
                                                     array("title" => "深圳多地调整疫情风险区等级","href" => "###","click" => "21"),
                                                     array("title" => "教育部开展专项行动,严查这些突出问题!","href" => "###","click" => "65"),
                                                     array("title" => "云南7月21日无新增确诊病例","href" => "###","click" => "465"),
                                                     array("title" => "广东中山三角镇中高风险区清零","href" => "###","click" => "27"),
                                                     array("title" => "陪伴香港人23年的大熊猫“安安”离世,终年35岁","href" => "###","click" => "967"),
                                                     array("title" => "这一省会城市土拍要求“现房销售”,啥信号?","href" => "###","click" => "364"),
                                                     array("title" => "车市上半年:“乘”涨“商”跌 商用车何时重归增长?","href" => "###","click" => "142"),
                                                     array("title" => "广州地铁三号线东延段开始铺轨","href" => "###","click" => "642"),
                                                     array("title" => "甘肃临夏积石山县本轮疫情已累计报告7例感染者","href" => "###","click" => "361"),
                                                
                                                 );
                                                $itemsNum = count($list,0);
                                                $divisor = $itemsNum / $_POST["count"];
                                                $pagesNum =  (strpos($divisor, '.') == false) ? $divisor : (floor($divisor) + 1);
                                                $current =  '';
                                                if($_POST["current"] < 1){
                                                    $current = 1;
                                                }else if($_POST["current"]  > $pagesNum){
                                                    $current= $pagesNum;
                                                }else{
                                                    $current = $_POST["current"];
                                                }
                                                $data = array_slice($list,$_POST["count"] * ($current - 1), $_POST["count"]);
                                                
                                                $arr_success = array('data' => $data,'current' => $current, 'pagesNum' => $pagesNum, 'itemsNum' => $itemsNum);
                                                $success = json_encode($arr_success);
                                                
                                                if($itemsNum == 0){
                                                    echo '源数据为空!';
                                                }else if($_POST["current"] > $pagesNum){
                                                    echo '页码不存在!';
                                                }else{
                                                    echo $success; 
                                                }
                                                
                                                ?>
                                            
注意:使用节点模板,可以以定义变量的形式,如let tpl=`模板内容`,或者将模板内容写在script标签里以ID调用。

以上列举了从php中的数组中获得分页数据,但是实际上一般管理系统需要从数据库中直接读取数据,此时用于分页的话需要将sql中获取的数据转成数组返回给分页插件,以下列举从sql数据库中获取数据。如果需要对sql数据分页后进行筛选检索操作请点击这里查看sortList实例。

    •                                         <script type="text/template" id="sql">
                                                  <li>
                                                      <div class="ax-info-block">
                                                          <div class="ax-row">
                                                              <div class="ax-col"><a href="<% this.href %>" class="ax-ell"><% this.newstime %>,<% this.cnname %>,<% this.enname %><% this.title %></a></div>
                                                              <span class="ax-arrow"><% this.click %>次</span>
                                                          </div>
                                                      </div>
                                                      <div class="ax-break-line"></div>
                                                  </li>
                                              </script>
                                              <div axList data-data="ajax/simpleSql.php" data-async="sql" data-template="#sql">
                                                  <ul list></ul>
                                              </div>
                                              
    • <?php
      header("Content-Type:text/plain;charset=utf-8");
      //连接数据库,数据库用户自己定义
      $server="localhost";
      $username="admin";
      $password="123456";
      $database="axui";
      $table = 'news';
      $connect = mysql_connect($server,$username,$password) or die("数据库链接错误");
      mysql_select_db($database,$connect);
      mysql_query("set names 'utf8'");
      
      //修正current,并获取pagesNum和itemsNum
      $getNum = mysql_query("select * from {$table} {$where}");
      $itemsNum = mysql_num_rows($getNum);
      $divisor = $itemsNum / $_POST[count];
      $pagesNum =  (strpos($divisor, '.') == false) ? $divisor : (floor($divisor) + 1);
      $current =  '';
      if($_POST[current] < 1){
      	$current = 1;
      }else if($_POST[current]  > $pagesNum){
      	$current= $pagesNum;
      }else{
      	$current = $_POST[current];
      }
      //如果检索结果行数为0,那么itemsNum,pagesNum和current都为0
      $start = $current?$_POST[count] * ($current - 1):0;
      
      //检索最终数据
      $sqlString="select * from {$table} limit {$start},{$_POST[count]}";
      $sql=mysql_query($sqlString);
      
      //根据数据生成对象数组
      $result = array();
      while ($row = mysql_fetch_object($sql)){
          array_push($result,$row);
      }
      //输出,将current、pagesNum和itemsNum拼接进对象,最终返回类似{dom:[{},{}...],current:1,pagesNum:10,itemsNum:100}
      $object = array('data' => $result,'current' => $current, 'pagesNum' => $pagesNum, 'itemsNum' => $itemsNum);
      $success = json_encode($object);
      echo $success;
      
      ?>
                                              

    操作方法

    创建分页实例后可使用内置方法控制分页。

    • first(callback):返回首页,支持callback回调函数,回调函数参数为:当前页码current和总页码pagesNum
    • last(callback):返回尾页,支持callback回调函数,回调函数参数为:当前页码current和总页码pagesNum
    • prev(callback):返回上一页,支持callback回调函数,回调函数参数为:当前页码current和总页码pagesNum
    • next(callback):返回下一页,支持callback回调函数,回调函数参数为:当前页码current和总页码pagesNum
    • go(page, callback):返回指定页码,page是指将要跳转的页码,支持callback回调函数,回调函数参数为:当前页码current和总页码pagesNum
    • info(callback):获得分页实例信息,返回一个对象:{ current: '当前页码', pagesNum: '总页码', itemsNum: '每页数量', selectData: '当前页的节点数组' },支持callback回调函数,回调函数参数为:当前页码current和总页码pagesNum
    •                                     <a href="###" class="ax-btn ax-primary" id="first">回到首页</a>
                                          <a href="###" class="ax-btn ax-primary" id="last">回到尾页</a>
                                          <a href="###" class="ax-btn ax-primary" id="prev">上一页</a>
                                          <a href="###" class="ax-btn ax-primary" id="next">下一页</a>
                                          <a href="###" class="ax-btn ax-primary" id="info">分页信息</a>
                                          <div class="ax-break"></div>
                                          <div id="optList"></div>
                                              
    •                 let data = [
                          { title: '南京:25日起将出现持续高温天气 最高可达41℃', href: '###', click: 63 },
                          { title: '美国总统拜登确诊感染新冠病毒 中方回应', href: '###', click: 81 },
                          { title: '中国证监会上海监管局原调研员朱毅被开除党籍', href: '###', click: 204 },
                          { title: '陕西本轮本土疫情全部清零', href: '###', click: 365 },
                          { title: '四川省泸州市政府原党组成员、副市长郭庆被“双开”', href: '###', click: 109 },
                          { title: '刘振芳任国铁集团董事长 郭竹学任总经理', href: '###', click: 981 },
                          { title: '天津西青区新增划定多个高、中、低风险区', href: '###', click: 207 },
                          { title: '中国移动原市场经营部资深经理陆文昌被查', href: '###', click: 260 },
                          { title: '刘炤任最高检党组成员,原任司法部副部长', href: '###', click: 259 },
                          { title: '林志颖驾驶特斯拉发生严重车祸,现已送医', href: '###', click: 391 },
                          { title: '郑州市防汛应急救援电话', href: '###', click: 184 },
                          { title: '频频“出圈”的网红官员', href: '###', click: 368 },
                          { title: '今天傍晚雷阵雨抵京,双休日继续闷热', href: '###', click: 261 },
                          { title: '一天新增超500例阳性!46家景区暂停接待', href: '###', click: 715 },
                          { title: '甘肃兰州城关区社会面检出阳性人员数量明显下降', href: '###', click: 684 },
                          { title: '山东省政协原主席陆懋曾因病逝世,享年94岁', href: '###', click: 246 },
                          { title: '甘肃兰州第二轮全域全员核酸检测检出阳性179例', href: '###', click: 154 },
                          { title: '甘肃兰州已启用集中隔离点172个 集中隔离10351人', href: '###', click: 815 },
                          { title: '澳门新增核酸检测阳性病例5例 社区实现清零', href: '###', click: 487 },
                          { title: '一查到底!南京回应寺庙供奉日本侵华战犯牌位', href: '###', click: 685 },
                          { title: '今日9时河南启动防汛四级应急响应', href: '###', click: 163 },
                          { title: '击败卫冕冠军,清华女篮夺得CUBA队史第3冠', href: '###', click: 241 },
                          { title: '滞留涠洲岛八天八夜,他们“希望那个岛越来越好”', href: '###', click: 259 },
                          { title: '吉林省7月21日新增本地无症状感染者2例,均在榆树市', href: '###', click: 581 },
                          { title: '安徽7月21日新增本土确诊8例、本土无症状44例', href: '###', click: 48 },
                          { title: '痛心!长江白鲟被正式宣布灭绝 存活了约2亿年', href: '###', click: 69 },
                          { title: '北京7月21日无新增本土确诊病例和本土无症状感染者', href: '###', click: 841 },
                          { title: '如何稳增长?基建再次“挑大梁”', href: '###', click: 154 },
                          { title: '深圳多地调整疫情风险区等级', href: '###', click: 325 },
                          { title: '教育部开展专项行动,严查这些突出问题!', href: '###', click: 962 },
                          { title: '云南7月21日无新增确诊病例', href: '###', click: 459 },
                          { title: '广东中山三角镇中高风险区清零', href: '###', click: 98 },
                          { title: '陪伴香港人23年的大熊猫“安安”离世,终年35岁', href: '###', click: 1105 },
                          { title: '这一省会城市土拍要求“现房销售”,啥信号?', href: '###', click: 965 },
                          { title: '车市上半年:“乘”涨“商”跌 商用车何时重归增长?', href: '###', click: 125 },
                          { title: '广州地铁三号线东延段开始铺轨', href: '###', click: 854 },
                          { title: '甘肃临夏积石山县本轮疫情已累计报告7例感染者', href: '###', click: 698 },
                      ]
                      let tpl = `
                              <li>
                                  <div class="ax-info-block">
                                      <div class="ax-row">
                                          <div class="ax-col"><a href="<% this.href %>" class="ax-ell"><% this.title %></a></div>
                                          <span class="ax-arrow"><% this.click %>次</span>
                                      </div>
                                  </div>
                                  <div class="ax-break-line"></div>
                              </li>
                                  `
      
                      let first = document.querySelector('#first'),
                      last = document.querySelector('#last'),
                      prev = document.querySelector('#prev'),
                      next = document.querySelector('#next'),
                      info = document.querySelector('#info'),
                      opt = new axPagination('', {
                          data: data,
                          template: tpl,
                          listDom: '#optList',
                      });
                      first.onclick = function(){
                          opt.first(function(current){console.log('返回首页!,页码是'+current)})
                      }
                      last.onclick = function(){
                          opt.last(function(current){console.log('返回尾页!,页码是'+current)})
                      }
                      prev.onclick = function(){
                          opt.prev(function(current){console.log('返回上一页!,页码是'+current)})
                      }
                      next.onclick = function(){
                          opt.next(function(current){console.log('返回下一页!,页码是'+current)})
                      }
                      info.onclick = function(){
                          console.log(opt.info().selectData);
                          alert(`当前页码是:${opt.info().current};总页码是:${opt.info().pagesNum};每页项目数是:${opt.info().count};总项目数是:${opt.info().itemsNum};当页数据使用F12查看!`)
                      }
                                              

    更新数据

    使用updateData方法可更新数据,继而更新分页。其有两个参数

    • data:必填项,分页数据,可以是片头所描述的五种数据
    • mode:选填项,数据更新模式,overwrite表示覆盖源数据,append表示在源数据后面追加
    • callback:选填项,回调函数。无参数,this指向实例本身
    •                                             <a href="###" class="ax-btn ax-primary" id="btnData">点击更新分页数据</a>
                                                  <div class="ax-break"></div>
                                                  <div id="dataList"></div>
                                              
    •                             let data = [
                                      { title: '南京:25日起将出现持续高温天气 最高可达41℃', href: '###', click: 63 },
                                      { title: '美国总统拜登确诊感染新冠病毒 中方回应', href: '###', click: 81 },
                                      { title: '中国证监会上海监管局原调研员朱毅被开除党籍', href: '###', click: 204 },
                                      { title: '陕西本轮本土疫情全部清零', href: '###', click: 365 },
                                      { title: '四川省泸州市政府原党组成员、副市长郭庆被“双开”', href: '###', click: 109 },
                                      { title: '刘振芳任国铁集团董事长 郭竹学任总经理', href: '###', click: 981 },
                                      { title: '天津西青区新增划定多个高、中、低风险区', href: '###', click: 207 },
                                      { title: '中国移动原市场经营部资深经理陆文昌被查', href: '###', click: 260 },
                                      { title: '刘炤任最高检党组成员,原任司法部副部长', href: '###', click: 259 },
                                      { title: '林志颖驾驶特斯拉发生严重车祸,现已送医', href: '###', click: 391 },
                                      { title: '郑州市防汛应急救援电话', href: '###', click: 184 },
                                      { title: '频频“出圈”的网红官员', href: '###', click: 368 },
                                      { title: '今天傍晚雷阵雨抵京,双休日继续闷热', href: '###', click: 261 },
                                      { title: '一天新增超500例阳性!46家景区暂停接待', href: '###', click: 715 },
                                      { title: '甘肃兰州城关区社会面检出阳性人员数量明显下降', href: '###', click: 684 },
                                      { title: '山东省政协原主席陆懋曾因病逝世,享年94岁', href: '###', click: 246 },
                                      { title: '甘肃兰州第二轮全域全员核酸检测检出阳性179例', href: '###', click: 154 },
                                      { title: '甘肃兰州已启用集中隔离点172个 集中隔离10351人', href: '###', click: 815 },
                                      { title: '澳门新增核酸检测阳性病例5例 社区实现清零', href: '###', click: 487 },
                                      { title: '一查到底!南京回应寺庙供奉日本侵华战犯牌位', href: '###', click: 685 },
                                      { title: '今日9时河南启动防汛四级应急响应', href: '###', click: 163 },
                                      { title: '击败卫冕冠军,清华女篮夺得CUBA队史第3冠', href: '###', click: 241 },
                                      { title: '滞留涠洲岛八天八夜,他们“希望那个岛越来越好”', href: '###', click: 259 },
                                      { title: '吉林省7月21日新增本地无症状感染者2例,均在榆树市', href: '###', click: 581 },
                                      { title: '安徽7月21日新增本土确诊8例、本土无症状44例', href: '###', click: 48 },
                                      { title: '痛心!长江白鲟被正式宣布灭绝 存活了约2亿年', href: '###', click: 69 },
                                      { title: '北京7月21日无新增本土确诊病例和本土无症状感染者', href: '###', click: 841 },
                                      { title: '如何稳增长?基建再次“挑大梁”', href: '###', click: 154 },
                                      { title: '深圳多地调整疫情风险区等级', href: '###', click: 325 },
                                      { title: '教育部开展专项行动,严查这些突出问题!', href: '###', click: 962 },
                                      { title: '云南7月21日无新增确诊病例', href: '###', click: 459 },
                                      { title: '广东中山三角镇中高风险区清零', href: '###', click: 98 },
                                      { title: '陪伴香港人23年的大熊猫“安安”离世,终年35岁', href: '###', click: 1105 },
                                      { title: '这一省会城市土拍要求“现房销售”,啥信号?', href: '###', click: 965 },
                                      { title: '车市上半年:“乘”涨“商”跌 商用车何时重归增长?', href: '###', click: 125 },
                                      { title: '广州地铁三号线东延段开始铺轨', href: '###', click: 854 },
                                      { title: '甘肃临夏积石山县本轮疫情已累计报告7例感染者', href: '###', click: 698 },
                                  ]
                                  let tpl = `
                                          <li>
                                              <div class="ax-info-block">
                                                  <div class="ax-row">
                                                      <div class="ax-col"><a href="<% this.href %>" class="ax-ell"><% this.title %></a></div>
                                                      <span class="ax-arrow"><% this.click %>次</span>
                                                  </div>
                                              </div>
                                              <div class="ax-break-line"></div>
                                          </li>
                                  `
      
                                  //更新数据
                                  let newArr = [
                                      { title: '1', href: '###', click: 53 },
                                      { title: '2', href: '###', click: 73 },
                                      { title: '3', href: '###', click: 12 },
                                      { title: '4', href: '###', click: 426 },
                                      { title: '5', href: '###', click: 102 },
                                      { title: '6', href: '###', click: 756 },
                                      { title: '7', href: '###', click: 37 },
                                      { title: '8', href: '###', click: 86 },
                                      { title: '9', href: '###', click: 152 },
                                      { title: '10', href: '###', click: 472 },
                                      { title: '11', href: '###', click: 26 },
                                      { title: '12', href: '###', click: 38 },
                                      { title: '13', href: '###', click: 96 },
                                      { title: '14', href: '###', click: 75 },
                      
                                  ]
                                  let btnData = document.querySelector('#btnData'),
                                      newData = new axPagination('', {
                                          data: data,
                                          template: tpl,
                                          listDom: '#dataList',
                                      });
                                  btnData.onclick = function () {
                                      newData.updateData(newArr,'append', function () {
                                          alert('使用追加模式,更新了数据!')
                                      })
                                  }
                                              

    更新参数

    使用update方法可更新参数,继而更新分页。其有两个参数

    • setting:必填项,将要修改的参数对象
    • mode:选填项,数据更新模式,overwrite表示覆盖源数据,append表示在源数据后面追加,在修改data参数后有用!
    • callback:选填项,回调函数。无参数,this指向实例本身
    •                                     <a href="###" class="ax-btn ax-primary" id="updataPage">更新到第2页码,每页2条</a>
                                          <a href="###" class="ax-btn ax-primary" id="updataPure">只显示纯页码</a>
                                          <div class="ax-break"></div>
                                          <div id="paraList"></div>
                                              
    •                             let data = [
                                      { title: '南京:25日起将出现持续高温天气 最高可达41℃', href: '###', click: 63 },
                                      { title: '美国总统拜登确诊感染新冠病毒 中方回应', href: '###', click: 81 },
                                      { title: '中国证监会上海监管局原调研员朱毅被开除党籍', href: '###', click: 204 },
                                      { title: '陕西本轮本土疫情全部清零', href: '###', click: 365 },
                                      { title: '四川省泸州市政府原党组成员、副市长郭庆被“双开”', href: '###', click: 109 },
                                      { title: '刘振芳任国铁集团董事长 郭竹学任总经理', href: '###', click: 981 },
                                      { title: '天津西青区新增划定多个高、中、低风险区', href: '###', click: 207 },
                                      { title: '中国移动原市场经营部资深经理陆文昌被查', href: '###', click: 260 },
                                      { title: '刘炤任最高检党组成员,原任司法部副部长', href: '###', click: 259 },
                                      { title: '林志颖驾驶特斯拉发生严重车祸,现已送医', href: '###', click: 391 },
                                      { title: '郑州市防汛应急救援电话', href: '###', click: 184 },
                                      { title: '频频“出圈”的网红官员', href: '###', click: 368 },
                                      { title: '今天傍晚雷阵雨抵京,双休日继续闷热', href: '###', click: 261 },
                                      { title: '一天新增超500例阳性!46家景区暂停接待', href: '###', click: 715 },
                                      { title: '甘肃兰州城关区社会面检出阳性人员数量明显下降', href: '###', click: 684 },
                                      { title: '山东省政协原主席陆懋曾因病逝世,享年94岁', href: '###', click: 246 },
                                      { title: '甘肃兰州第二轮全域全员核酸检测检出阳性179例', href: '###', click: 154 },
                                      { title: '甘肃兰州已启用集中隔离点172个 集中隔离10351人', href: '###', click: 815 },
                                      { title: '澳门新增核酸检测阳性病例5例 社区实现清零', href: '###', click: 487 },
                                      { title: '一查到底!南京回应寺庙供奉日本侵华战犯牌位', href: '###', click: 685 },
                                      { title: '今日9时河南启动防汛四级应急响应', href: '###', click: 163 },
                                      { title: '击败卫冕冠军,清华女篮夺得CUBA队史第3冠', href: '###', click: 241 },
                                      { title: '滞留涠洲岛八天八夜,他们“希望那个岛越来越好”', href: '###', click: 259 },
                                      { title: '吉林省7月21日新增本地无症状感染者2例,均在榆树市', href: '###', click: 581 },
                                      { title: '安徽7月21日新增本土确诊8例、本土无症状44例', href: '###', click: 48 },
                                      { title: '痛心!长江白鲟被正式宣布灭绝 存活了约2亿年', href: '###', click: 69 },
                                      { title: '北京7月21日无新增本土确诊病例和本土无症状感染者', href: '###', click: 841 },
                                      { title: '如何稳增长?基建再次“挑大梁”', href: '###', click: 154 },
                                      { title: '深圳多地调整疫情风险区等级', href: '###', click: 325 },
                                      { title: '教育部开展专项行动,严查这些突出问题!', href: '###', click: 962 },
                                      { title: '云南7月21日无新增确诊病例', href: '###', click: 459 },
                                      { title: '广东中山三角镇中高风险区清零', href: '###', click: 98 },
                                      { title: '陪伴香港人23年的大熊猫“安安”离世,终年35岁', href: '###', click: 1105 },
                                      { title: '这一省会城市土拍要求“现房销售”,啥信号?', href: '###', click: 965 },
                                      { title: '车市上半年:“乘”涨“商”跌 商用车何时重归增长?', href: '###', click: 125 },
                                      { title: '广州地铁三号线东延段开始铺轨', href: '###', click: 854 },
                                      { title: '甘肃临夏积石山县本轮疫情已累计报告7例感染者', href: '###', click: 698 },
                                  ]
                                  let tpl = `
                                          <li>
                                              <div class="ax-info-block">
                                                  <div class="ax-row">
                                                      <div class="ax-col"><a href="<% this.href %>" class="ax-ell"><% this.title %></a></div>
                                                      <span class="ax-arrow"><% this.click %>次</span>
                                                  </div>
                                              </div>
                                              <div class="ax-break-line"></div>
                                          </li>
                                  `
                                 
                                  //更新参数
                                  let updataPage = document.querySelector('#updataPage'),
                                      updataPure = document.querySelector('#updataPure'),
                                      newPara = new axPagination('', {
                                          data: data,
                                          template: tpl,
                                          listDom: '#paraList',
                                      });
                                  updataPage.onclick = function () {
                                      newPara.update({
                                          current: 2,
                                          count: 2,
                                      })
                                  }
                                  updataPure.onclick = function () {
                                      newPara.update({
                                          type: 'simple',
                                      })
                                  }
                                              

    页码风格

    分页包含导航按钮、页码以及页码跳转,通过使用type参数设置分页风格。

    • regular:类似:首页,上一页,1,2,3,...9,10下一页尾页
    • group:regular基础上使用ax-group包裹
    • simple:只保留上一页和下一页按钮
    • full:类似:在regular基础上在加total和前往分页
    • pagesRight:内容跟full一样,只是使用弹性布局将分页至于右侧
    • pagesLeft:内容跟full一样,只是使用弹性布局将分页至于左侧
    • pure:纯页码风格,在regular基础上减掉按钮
    regular,默认展示方式,包含按钮导航和页码
    group,regular使用ax-group包裹
    simple,最简单的展示方式,只有上一页和下一页
    full,最全的展示方式,包含分页的全部功能
    pagesRight,最全的展示方式,但是对统计跳转功能和页码分开放置,页码放在右侧
    pagesLeft,最全的展示方式,但是对统计跳转功能和页码分开放置,页码放在左侧
    pure,简约的纯页码展示方式
    •                                     <h5>regular</h5>
                                          <div class="ax-pagination" axPagination data-data="ajax/list.json" data-async="json" data-template="#tpl"></div>
                                          <div class="ax-break"></div><div class="ax-break"></div>
                                          <h5>simple</h5>
                                          <div class="ax-pagination" axPagination data-data="ajax/list.json" data-async="json" data-template="#tpl" data-type="simple"></div>
                                          <div class="ax-break"></div><div class="ax-break"></div>
                                          <h5>full</h5>
                                          <div class="ax-pagination" axPagination data-data="ajax/list.json" data-async="json" data-template="#tpl" data-type="full"></div>
                                          <div class="ax-break"></div><div class="ax-break"></div>
                                          <h5>pagesRight</h5>
                                          <div class="ax-pagination ax-row" axPagination data-data="ajax/list.json" data-async="json" data-template="#tpl" data-type="pagesRight"></div>
                                          <div class="ax-break"></div><div class="ax-break"></div>
                                          <h5>pagesLeft</h5>
                                          <div class="ax-pagination ax-row" axPagination data-data="ajax/list.json" data-async="json" data-template="#tpl" data-type="pagesLeft"></div>
                                          <div class="ax-break"></div><div class="ax-break"></div>
                                          <h5>pure</h5>
                                          <div class="ax-pagination" axPagination data-data="ajax/list.json" data-async="json" data-template="#tpl" data-type="pure"></div>
                                          <div class="ax-break"></div><div class="ax-break"></div>
                                              
    •                                         <script type="text/template" id="tpl">
                                                  <li>
                                                      <div class="ax-info-block">
                                                          <div class="ax-row">
                                                              <div class="ax-col"><a href="<% this.href %>" class="ax-ell"><% this.title %></a></div>
                                                              <span class="ax-arrow"><% this.click %>次</span>
                                                          </div>
                                                      </div>
                                                      <div class="ax-break-line"></div>
                                                  </li>
                                              </script>
                                              
    •                                         [
                                                  {
                                                      "title": "南京:25日起将出现持续高温天气 最高可达41℃",
                                                      "href": "###",
                                                      "click": 63
                                                  },
                                                  {
                                                      "title": "美国总统拜登确诊感染新冠病毒 中方回应",
                                                      "href": "###",
                                                      "click": 81
                                                  },
                                                  {
                                                      "title": "中国证监会上海监管局原调研员朱毅被开除党籍",
                                                      "href": "###",
                                                      "click": 204
                                                  },
                                                  {
                                                      "title": "陕西本轮本土疫情全部清零",
                                                      "href": "###",
                                                      "click": 365
                                                  },
                                                  {
                                                      "title": "四川省泸州市政府原党组成员、副市长郭庆被“双开”",
                                                      "href": "###",
                                                      "click": 109
                                                  },
                                                  {
                                                      "title": "刘振芳任国铁集团董事长 郭竹学任总经理",
                                                      "href": "###",
                                                      "click": 981
                                                  },
                                                  {
                                                      "title": "天津西青区新增划定多个高、中、低风险区",
                                                      "href": "###",
                                                      "click": 207
                                                  },
                                                  {
                                                      "title": "中国移动原市场经营部资深经理陆文昌被查",
                                                      "href": "###",
                                                      "click": 260
                                                  },
                                                  {
                                                      "title": "刘炤任最高检党组成员,原任司法部副部长",
                                                      "href": "###",
                                                      "click": 259
                                                  },
                                                  {
                                                      "title": "林志颖驾驶特斯拉发生严重车祸,现已送医",
                                                      "href": "###",
                                                      "click": 391
                                                  },
                                                  {
                                                      "title": "郑州市防汛应急救援电话",
                                                      "href": "###",
                                                      "click": 184
                                                  },
                                                  {
                                                      "title": "频频“出圈”的网红官员",
                                                      "href": "###",
                                                      "click": 368
                                                  },
                                                  {
                                                      "title": "今天傍晚雷阵雨抵京,双休日继续闷热",
                                                      "href": "###",
                                                      "click": 261
                                                  },
                                                  {
                                                      "title": "一天新增超500例阳性!46家景区暂停接待",
                                                      "href": "###",
                                                      "click": 715
                                                  },
                                                  {
                                                      "title": "甘肃兰州城关区社会面检出阳性人员数量明显下降",
                                                      "href": "###",
                                                      "click": 684
                                                  },
                                                  {
                                                      "title": "山东省政协原主席陆懋曾因病逝世,享年94岁",
                                                      "href": "###",
                                                      "click": 246
                                                  },
                                                  {
                                                      "title": "甘肃兰州第二轮全域全员核酸检测检出阳性179例",
                                                      "href": "###",
                                                      "click": 154
                                                  },
                                                  {
                                                      "title": "甘肃兰州已启用集中隔离点172个 集中隔离10351人",
                                                      "href": "###",
                                                      "click": 815
                                                  },
                                                  {
                                                      "title": "澳门新增核酸检测阳性病例5例 社区实现清零",
                                                      "href": "###",
                                                      "click": 487
                                                  },
                                                  {
                                                      "title": "一查到底!南京回应寺庙供奉日本侵华战犯牌位",
                                                      "href": "###",
                                                      "click": 685
                                                  },
                                                  {
                                                      "title": "今日9时河南启动防汛四级应急响应",
                                                      "href": "###",
                                                      "click": 163
                                                  },
                                                  {
                                                      "title": "击败卫冕冠军,清华女篮夺得CUBA队史第3冠",
                                                      "href": "###",
                                                      "click": 241
                                                  },
                                                  {
                                                      "title": "滞留涠洲岛八天八夜,他们“希望那个岛越来越好”",
                                                      "href": "###",
                                                      "click": 259
                                                  },
                                                  {
                                                      "title": "吉林省7月21日新增本地无症状感染者2例,均在榆树市",
                                                      "href": "###",
                                                      "click": 581
                                                  },
                                                  {
                                                      "title": "安徽7月21日新增本土确诊8例、本土无症状44例",
                                                      "href": "###",
                                                      "click": 48
                                                  },
                                                  {
                                                      "title": "痛心!长江白鲟被正式宣布灭绝 存活了约2亿年",
                                                      "href": "###",
                                                      "click": 69
                                                  },
                                                  {
                                                      "title": "北京7月21日无新增本土确诊病例和本土无症状感染者",
                                                      "href": "###",
                                                      "click": 841
                                                  },
                                                  {
                                                      "title": "如何稳增长?基建再次“挑大梁”",
                                                      "href": "###",
                                                      "click": 154
                                                  },
                                                  {
                                                      "title": "深圳多地调整疫情风险区等级",
                                                      "href": "###",
                                                      "click": 325
                                                  },
                                                  {
                                                      "title": "教育部开展专项行动,严查这些突出问题!",
                                                      "href": "###",
                                                      "click": 962
                                                  },
                                                  {
                                                      "title": "云南7月21日无新增确诊病例",
                                                      "href": "###",
                                                      "click": 459
                                                  },
                                                  {
                                                      "title": "广东中山三角镇中高风险区清零",
                                                      "href": "###",
                                                      "click": 98
                                                  },
                                                  {
                                                      "title": "陪伴香港人23年的大熊猫“安安”离世,终年35岁",
                                                      "href": "###",
                                                      "click": 1105
                                                  },
                                                  {
                                                      "title": "这一省会城市土拍要求“现房销售”,啥信号?",
                                                      "href": "###",
                                                      "click": 965
                                                  },
                                                  {
                                                      "title": "车市上半年:“乘”涨“商”跌 商用车何时重归增长?",
                                                      "href": "###",
                                                      "click": 125
                                                  },
                                                  {
                                                      "title": "广州地铁三号线东延段开始铺轨",
                                                      "href": "###",
                                                      "click": 854
                                                  },
                                                  {
                                                      "title": "甘肃临夏积石山县本轮疫情已累计报告7例感染者",
                                                      "href": "###",
                                                      "click": 698
                                                  }
                                              ]
                                              

    监听方法

    借鉴jQuery的写法,本插件有若干监听方法,基本写法是:instance.on('load',function(){});具体事件说明如下:

    • rendered:渲染分页节点完成时执行,与options.rendered回调函数用法一致
    • updated:更新参数和更新数据后执行
    • turned:翻页后执行,比如点击页码、上一页、下一页

    演示实例使用console方法,请用F12打开浏览器控制台查看监听结果。

    •                                     <a href="###" class="ax-btn ax-primary" id="updataPage">更新到第2页码,每页2条</a>
                                          <a href="###" class="ax-btn ax-primary" id="updataPure">只显示纯页码</a>
                                          <div class="ax-break"></div>
                                          <div id="paraList"></div>
                                              
    •                             let data = [
                                      { title: '南京:25日起将出现持续高温天气 最高可达41℃', href: '###', click: 63 },
                                      { title: '美国总统拜登确诊感染新冠病毒 中方回应', href: '###', click: 81 },
                                      { title: '中国证监会上海监管局原调研员朱毅被开除党籍', href: '###', click: 204 },
                                      { title: '陕西本轮本土疫情全部清零', href: '###', click: 365 },
                                      { title: '四川省泸州市政府原党组成员、副市长郭庆被“双开”', href: '###', click: 109 },
                                      { title: '刘振芳任国铁集团董事长 郭竹学任总经理', href: '###', click: 981 },
                                      { title: '天津西青区新增划定多个高、中、低风险区', href: '###', click: 207 },
                                      { title: '中国移动原市场经营部资深经理陆文昌被查', href: '###', click: 260 },
                                      { title: '刘炤任最高检党组成员,原任司法部副部长', href: '###', click: 259 },
                                      { title: '林志颖驾驶特斯拉发生严重车祸,现已送医', href: '###', click: 391 },
                                      { title: '郑州市防汛应急救援电话', href: '###', click: 184 },
                                      { title: '频频“出圈”的网红官员', href: '###', click: 368 },
                                      { title: '今天傍晚雷阵雨抵京,双休日继续闷热', href: '###', click: 261 },
                                      { title: '一天新增超500例阳性!46家景区暂停接待', href: '###', click: 715 },
                                      { title: '甘肃兰州城关区社会面检出阳性人员数量明显下降', href: '###', click: 684 },
                                      { title: '山东省政协原主席陆懋曾因病逝世,享年94岁', href: '###', click: 246 },
                                      { title: '甘肃兰州第二轮全域全员核酸检测检出阳性179例', href: '###', click: 154 },
                                      { title: '甘肃兰州已启用集中隔离点172个 集中隔离10351人', href: '###', click: 815 },
                                      { title: '澳门新增核酸检测阳性病例5例 社区实现清零', href: '###', click: 487 },
                                      { title: '一查到底!南京回应寺庙供奉日本侵华战犯牌位', href: '###', click: 685 },
                                      { title: '今日9时河南启动防汛四级应急响应', href: '###', click: 163 },
                                      { title: '击败卫冕冠军,清华女篮夺得CUBA队史第3冠', href: '###', click: 241 },
                                      { title: '滞留涠洲岛八天八夜,他们“希望那个岛越来越好”', href: '###', click: 259 },
                                      { title: '吉林省7月21日新增本地无症状感染者2例,均在榆树市', href: '###', click: 581 },
                                      { title: '安徽7月21日新增本土确诊8例、本土无症状44例', href: '###', click: 48 },
                                      { title: '痛心!长江白鲟被正式宣布灭绝 存活了约2亿年', href: '###', click: 69 },
                                      { title: '北京7月21日无新增本土确诊病例和本土无症状感染者', href: '###', click: 841 },
                                      { title: '如何稳增长?基建再次“挑大梁”', href: '###', click: 154 },
                                      { title: '深圳多地调整疫情风险区等级', href: '###', click: 325 },
                                      { title: '教育部开展专项行动,严查这些突出问题!', href: '###', click: 962 },
                                      { title: '云南7月21日无新增确诊病例', href: '###', click: 459 },
                                      { title: '广东中山三角镇中高风险区清零', href: '###', click: 98 },
                                      { title: '陪伴香港人23年的大熊猫“安安”离世,终年35岁', href: '###', click: 1105 },
                                      { title: '这一省会城市土拍要求“现房销售”,啥信号?', href: '###', click: 965 },
                                      { title: '车市上半年:“乘”涨“商”跌 商用车何时重归增长?', href: '###', click: 125 },
                                      { title: '广州地铁三号线东延段开始铺轨', href: '###', click: 854 },
                                      { title: '甘肃临夏积石山县本轮疫情已累计报告7例感染者', href: '###', click: 698 },
                                  ]
                                  let tpl = `
                                          <li>
                                              <div class="ax-info-block">
                                                  <div class="ax-row">
                                                      <div class="ax-col"><a href="<% this.href %>" class="ax-ell"><% this.title %></a></div>
                                                      <span class="ax-arrow"><% this.click %>次</span>
                                                  </div>
                                              </div>
                                              <div class="ax-break-line"></div>
                                          </li>
                                  `
                                 
                                  //on监听
                                  let onUpdate = document.querySelector('#onUpdate'),
                                      onIns = new axPagination('', {
                                          data: data,
                                          template: tpl,
                                          listDom: '#onList',
                                      });
                                      onUpdate.onclick = function () {
                                          onIns.update({
                                          current: 2,
                                          count: 2,
                                      })
                                  }
                                  onIns.on('rendered',function(current,pages){
                                      console.log('渲染完成!当前页码:'+current+',总页数'+pages)
                                  });
                                  onIns.on('updated',function(current,pages){
                                      console.log('更新了数据!当前页码:'+current+',总页数'+pages)
                                  });
                                  onIns.on('turned',function(current,pages){
                                      console.log('翻页了!当前页码:'+current+',总页数'+pages)
                                  });
                                              

    参数选项

    document.addEventListener("DOMContentLoaded", function() {
          var demo1 = new axPagination('',{
            listDom: null,//存放列表dom的盒子,如果需要展示筛选出来的列表则需要填写
            count: 10, //每页item数量
            current: 1, //当前页码
            firstText: '首页', //首页展示文字
            prevText: '上一页', //上一页展示文字
            nextText: '下一页', //下一页展示文字
            lastText: '尾页', //尾页展示文字
            allPages: false,//是否显示所有页码,默认否,可选择true显示全部页码
            data: [], //用于创建列表Dom的数组,据此创建分页
            template: null, //数组转Dom的模板
            type: 'regular', //分页导航风格,可选填regular,simple,full,pagesRight,pagesLeft,pure
            //type:'regular'//类似:首页,上一页,1,2,3,...9,10下一页尾页
            //type:'simple'//只保留上一页和下一页按钮
            //type:'full'//类似:在regular基础上在加total和前往分页
            //type:'pagesRight'//内容跟full一样,只是使用弹性布局将分页至于右侧
            //type:'pagesLeft'//内容跟full一样,只是使用弹性布局将分页至于左侧
            //type:'pure'//纯页码风格,在regular基础上减掉按钮
            loadingMode: 'replace',//使用异步分页的加载效果,默认是replace即清除列表显示转圈,可选择overlay即浮在原列表上
            className: '',//给分页Dom追加class样式,比如:className: 'ax-align-right'
            lastDel: '', //删除当页最后一条某个节点,可以是className,id或node
            async: '',//异步方式,选择从json文件获取数组数据,或选择sql从数据库获得数据
            url: '',//异步获取列表地址
            delay: 0,//异步分页内容时延时加载
            rendered: function (current, pagesNum) {
                //渲染完list和pagination节点后回调,支持current和pagesNum参数
            }
          });
    });