Pagination 分页
基本用法
用ax-pagination包裹，当前分页请用ax-active表示；总分页用ax-total；上一页用ax-prev表示；下一页ax-next表示；首页用ax-first表示；尾页用ax-last表示。
默认居中排列，可组合使用ax-align-left和ax-align-right实现居左排列和居右排列。
因为是行内元素，注意span或a标签之间不要有间隔或者换行，否则会产生多余的4px间隔。
<div class="ax-pagination">
<a class="ax-total">共142条</a><a href="###" class="ax-prev">上一页</a><a href="###">1</a><a class="ax-active">2</a><a href="###">3</a><a href="###">4</a><a href="###">5</a><a href="###">6</a><a href="###" class="ax-next">下一页</a><a href="###" class="ax-last">尾页</a>
</div>
<div class="ax-pagination ax-align-left">
<a class="ax-total">共142条</a><a href="###" class="ax-prev">上一页</a><a href="###">1</a><a class="ax-active">2</a><a href="###">3</a><a href="###">4</a><a href="###">5</a><a href="###">6</a><a href="###" class="ax-next">下一页</a><a href="###" class="ax-last">尾页</a>
</div>
<div class="ax-pagination ax-align-right">
<a class="ax-total">共142条</a><a href="###" class="ax-prev">上一页</a><a href="###">1</a><a class="ax-active">2</a><a href="###">3</a><a href="###">4</a><a href="###">5</a><a href="###">6</a><a href="###" class="ax-next">下一页</a><a href="###" class="ax-last">尾页</a>
</div>
跳转分页
确定按钮是Button
<div class="ax-pagination ax-align-left">
<a href="###" class="ax-first">首页</a><a href="###" class="ax-prev">上一页</a><a href="###">1</a><a class="ax-active">2</a><a href="###">3</a><a href="###">4</a><a href="###">5</a><a href="###">6</a><a href="###" class="ax-next">下一页</a><a href="###" class="ax-last">尾页</a><span class="ax-gopage"><span>共142条,跳到</span><input type="text"><span>页</span><button type="button" class="ax-btn">确定</button></span>
</div>
<div class="ax-break"></div>
确定按钮是Input
<div class="ax-pagination ax-align-left">
<a href="###" class="ax-first">首页</a><a href="###" class="ax-prev">上一页</a><a href="###">1</a><a class="ax-active">2</a><a href="###">3</a><a href="###">4</a><a href="###">5</a><a href="###">6</a><a href="###" class="ax-next">下一页</a><a href="###" class="ax-last">尾页</a><span class="ax-gopage"><span>共142条,跳到</span><input type="text"><span>页</span><input type="submit" value="确定" class="ax-btn"/></span>
</div>
<div class="ax-break"></div>
确定按钮是a
<div class="ax-pagination ax-align-left">
<a href="###" class="ax-first">首页</a><a href="###" class="ax-prev">上一页</a><a href="###">1</a><a class="ax-active">2</a><a href="###">3</a><a href="###">4</a><a href="###">5</a><a href="###">6</a><a href="###" class="ax-next">下一页</a><a href="###" class="ax-last">尾页</a><span class="ax-gopage"><span>共142条,跳到</span><input type="text"><span>页</span><a href="###">确定</a></span>
</div>
<div class="ax-break"></div>
select跳转
<div class="ax-pagination ax-align-left">
<a href="###" class="ax-first">首页</a><a href="###" class="ax-prev">上一页</a><a href="###">1</a><a class="ax-active">2</a><a href="###">3</a><a href="###">4</a><a href="###">5</a><a href="###">6</a><a href="###" class="ax-next">下一页</a><a href="###" class="ax-last">尾页</a><span class="ax-gopage"><span>共142条,跳到</span><select><option selected>8</option><option>9</option></select><span >页</span>
</div>
多种变形
<div class="ax-pagination">
<a class="ax-total">共142条</a><a href="###" class="ax-first">首页</a><a href="###" class="ax-prev"><i></i>上一页</a><a href="###">1</a><a class="ax-active">2</a><a href="###">3</a><span>...</span><a href="###">4</a><a href="###">5</a><a href="###">6</a><a href="###" class="ax-next">下一页<i></i></a><a href="###" class="ax-last">尾页</a>
</div>
<div class="ax-pagination">
<a class="ax-total">共142条</a><a href="###" class="ax-first"><i>《</i>首页</a><a href="###" class="ax-prev"><i>〈</i>上一页</a><a href="###">1</a><a class="ax-active">2</a><a href="###">3</a><span>...</span><a href="###">4</a><a href="###">5</a><a href="###">6</a><a href="###" class="ax-next">下一页<i>〉</i></a><a href="###" class="ax-last">尾页<i>》</i></a>
</div>
<div class="ax-pagination">
<a href="###" class="ax-firt"><i>《</i></a><a href="###" class="ax-prev"><i>〈</i></a><a href="###">1</a><a class="ax-active">2</a><a href="###">3</a><span>...</span><a href="###">4</a><a href="###">5</a><a href="###">6</a><a href="###" class="ax-next"><i>〉</i></a><a href="###" class="ax-last"><i>》</i></a>
</div>
<div class="ax-pagination">
<a href="###" class="ax-firt"><i class="ax-iconfont ax-icon-left-double"></i></a><a href="###" class="ax-prev"><i class="ax-iconfont ax-icon-left"></i></a><a href="###">1</a><a class="ax-active">2</a><a href="###">3</a><span>...</span><a href="###">4</a><a href="###">5</a><a href="###">6</a><a href="###" class="ax-next"><i class="ax-iconfont ax-icon-right"></i></a><a href="###" class="ax-last"><i class="ax-iconfont ax-icon-right-double"></i></a>
</div>
<div class="ax-pagination">
<a href="###" class="ax-firt">«</a><a href="###" class="ax-prev">‹</a><a href="###">1</a><a class="ax-active">2</a><a href="###">3</a><span>...</span><a href="###">4</a><a href="###">5</a><a href="###">6</a><a href="###" class="ax-next">›</a><a href="###" class="ax-last">»</a>
</div>
<div class="ax-pagination">
<a href="###" class="ax-firt">⇤</a><a href="###" class="ax-prev">←</a><a href="###">1</a><a class="ax-active">2</a><a href="###">3</a><span>...</span><a href="###">4</a><a href="###">5</a><a href="###">6</a><a href="###" class="ax-next">→</a><a href="###" class="ax-last">⇥</a>
</div>
<div class="ax-pagination">
<span>总共</span><span>200</span><span>个记录，当前第</span><span>8</span><span>页，每页</span><input type="text" value="15"><span>条数据</span> <a href="###" class="ax-first">首页</a><a href="###" class="ax-prev">上一页</a><a href="###" class="ax-next">下一页</a><a href="###" class="ax-last">尾页</a> <span>共142条，跳到</span><select><option selected>8</option><option>9</option></select><span>页</span>
</div>
组合
<div class="ax-pagination ax-align-left">
<div class="ax-group">
<a href="###" class="ax-firt">«</a><a href="###" class="ax-prev">‹</a><a href="###">1</a><a class="ax-active">2</a><a href="###">3</a><span>...</span><a href="###">4</a><a href="###">5</a><a href="###">6</a><a href="###" class="ax-next">›</a><a href="###" class="ax-last">»</a>
</div>
</div>
<div class="ax-pagination ax-align-left">
<div class="ax-group">
<a href="###" class="ax-firt">«</a><a href="###" class="ax-prev">‹</a><a href="###">1</a><a class="ax-active">2</a><a href="###">3</a><span>...</span><a href="###">4</a><a href="###">5</a><a href="###">6</a><a href="###" class="ax-next">›</a><a href="###" class="ax-last">»</a>
</div><span class="ax-gutter-sm"></span><span>2/8</span>
</div>
<div class="ax-pagination ax-align-left">
<div class="ax-group">
<a href="###" class="ax-firt">«</a><a href="###" class="ax-prev">‹</a><a href="###">1</a><a class="ax-active">2</a><a href="###">3</a><span>...</span><a href="###">4</a><a href="###">5</a><a href="###">6</a><a href="###" class="ax-next">›</a><a href="###" class="ax-last">»</a>
</div><span class="ax-gutter-sm"></span><span class="ax-gopage"><span>共142条,跳到</span><input type="text"><span>页</span><a href="###">确定</a>
</div>
<div class="ax-pagination ax-align-left">
<div class="ax-group">
<a href="###" class="ax-prev">‹</a><a href="###" class="ax-next">›</a>
</div>
</div>
其他组合风格
使用ax-pagination ax-light样式即可实现如下风格。
<div class="ax-pagination ax-light ax-align-left">
<div class="ax-group">
<a href="###" class="ax-firt">?</a><a href="###" class="ax-prev">?</a><a href="###">1</a><a class="ax-active">2</a><a href="###">3</a><span>...</span><a href="###">4</a><a href="###">5</a><a href="###">6</a><a href="###" class="ax-next">?</a><a href="###" class="ax-last">?</a>
</div>
</div>
分页插件
分页插件axPagination支持多种数据格式分页，支持两种异步数据分页。
- 1、页面已有的节点分页，比如
ul+li，tbody+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属性，配合使用listDom参数即可按默认参数运行插件。 - js实例：通过
new axPagination('#ID',{data:''})方式创建实例运行。
使用axPagination属性
-
-
-
-
34次
-
-
-
-
-
114次
-
-
30次
-
45次
-
-
-
-
-
-
-
-
-
76次
-
-
-
-
-
-
-
32次
-
77次
-
-
21次
-
11次
-
-
-
-
24次
-
使用js实例
-
<ul id="list"> <li> <div class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption>南京：25日起将出现持续高温天气 最高可达41℃</a></div> <i count>98次</i> </div> <hr /> </li> <li> <div class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption>美国总统拜登确诊感染新冠病毒 中方回应</a></div> <i count>24次</i> </div> <hr /> </li> <li> <div class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption>中国证监会上海监管局原调研员朱毅被开除党籍</a></div> <i count>56次</i> </div> <hr /> </li> <li> <div class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption>陕西本轮本土疫情全部清零</a></div> <i count>34次</i> </div> <hr /> </li> <li> <div class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption>四川省泸州市政府原党组成员、副市长郭庆被“双开”</a></div> <i count>76次</i> </div> <hr /> </li> <li> <div class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption>刘振芳任国铁集团董事长 郭竹学任总经理</a></div> <i count>86次</i> </div> <hr /> </li> <li> <div class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption>天津西青区新增划定多个高、中、低风险区</a></div> <i count>45次</i> </div> <hr /> </li> <li> <div class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption>中国移动原市场经营部资深经理陆文昌被查</a></div> <i count>67次</i> </div> <hr /> </li> <li> <div class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption>刘炤任最高检党组成员，原任司法部副部长</a></div> <i count>114次</i> </div> <hr /> </li> <li> <div class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption>林志颖驾驶特斯拉发生严重车祸，现已送医</a></div> <i count>65次</i> </div> <hr /> </li> <li> <div class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption>郑州市防汛应急救援电话</a></div> <i count>30次</i> </div> <hr /> </li> <li> <div class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption>频频“出圈”的网红官员</a></div> <i count>45次</i> </div> <hr /> </li> <li> <div class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption>今天傍晚雷阵雨抵京，双休日继续闷热</a></div> <i count>75次</i> </div> <hr /> </li> <li> <div class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption>一天新增超500例阳性！46家景区暂停接待</a></div> <i count>73次</i> </div> <hr /> </li> <li> <div class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption>甘肃兰州城关区社会面检出阳性人员数量明显下降</a></div> <i count>12次</i> </div> <hr /> </li> <li> <div class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption>山东省政协原主席陆懋曾因病逝世，享年94岁</a></div> <i count>36次</i> </div> <hr /> </li> <li> <div class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption>甘肃兰州第二轮全域全员核酸检测检出阳性179例</a></div> <i count>49次</i> </div> <hr /> </li> <li> <div class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption>甘肃兰州已启用集中隔离点172个 集中隔离10351人</a></div> <i count>58次</i> </div> <hr /> </li> <li> <div class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption>澳门新增核酸检测阳性病例5例 社区实现清零</a></div> <i count>43次</i> </div> <hr /> </li> <li> <div class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption>一查到底！南京回应寺庙供奉日本侵华战犯牌位</a></div> <i count>28次</i> </div> <hr /> </li> <li> <div class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption>今日9时河南启动防汛四级应急响应</a></div> <i count>76次</i> </div> <hr /> </li> <li> <div class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption>击败卫冕冠军，清华女篮夺得CUBA队史第3冠</a></div> <i count>43次</i> </div> <hr /> </li> <li> <div class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption>滞留涠洲岛八天八夜，他们“希望那个岛越来越好”</a></div> <i count>58次</i> </div> <hr /> </li> <li> <div class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption>吉林省7月21日新增本地无症状感染者2例，均在榆树市</a></div> <i count>65次</i> </div> <hr /> </li> <li> <div class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption>安徽7月21日新增本土确诊8例、本土无症状44例</a></div> <i count>49次</i> </div> <hr /> </li> <li> <div class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption>痛心！长江白鲟被正式宣布灭绝 存活了约2亿年</a></div> <i count>16次</i> </div> <hr /> </li> <li> <div class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption>北京7月21日无新增本土确诊病例和本土无症状感染者</a></div> <i count>60次</i> </div> <hr /> </li> <li> <div class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption>如何稳增长？基建再次“挑大梁”</a></div> <i count>32次</i> </div> <hr /> </li> <li> <div class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption>深圳多地调整疫情风险区等级</a></div> <i count>77次</i> </div> <hr /> </li> <li> <div class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption>教育部开展专项行动，严查这些突出问题！</a></div> <i count>47次</i> </div> <hr /> </li> <li> <div class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption>云南7月21日无新增确诊病例</a></div> <i count>21次</i> </div> <hr /> </li> <li> <div class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption>广东中山三角镇中高风险区清零</a></div> <i count>11次</i> </div> <hr /> </li> <li> <div class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption>陪伴香港人23年的大熊猫“安安”离世，终年35岁</a></div> <i count>16次</i> </div> <hr /> </li> <li> <div class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption>这一省会城市土拍要求“现房销售”，啥信号？</a></div> <i count>86次</i> </div> <hr /> </li> <li> <div class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption>车市上半年：“乘”涨“商”跌 商用车何时重归增长?</a></div> <i count>134次</i> </div> <hr /> </li> <li> <div class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption>广州地铁三号线东延段开始铺轨</a></div> <i count>24次</i> </div> <hr /> </li> <li> <div class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption>甘肃临夏积石山县本轮疫情已累计报告7例感染者</a></div> <i count>107次</i> </div> <hr /> </li> </ul> <div class="ax-pagination" axPagination='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-bulletin"> <div class="ax-bulletin-body"><a href="<# this.href #>" caption><# this.title #></a></div> <i arrow><# this.click #>次</i> </div> <hr/> </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:"ajax/list.json",async:"json",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:"ajax/list.json",async:"json",template:"#tpl",listDom:"#jsonList"'></div> <div class="ax-break"></div> <div class="ax-break"></div> <h5>sql异步分页，不带列表</h5> <div class="ax-pagination" axPagination='data:"ajax/server.php",async:"sql",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:"ajax/server.php",async:"sql",template:"#tpl",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:"ajax/server.php",async:"sql",template:"#tpl",listDom:"#sqlOver",loadingMode:"overlay"'></div> -
<script type="text/template" id="tpl"> <li> <div class="ax-bulletin"> <div class="ax-bulletin-body"><a href="<# this.href #>" caption><# this.title #></a></div> <i arrow><# this.click #>次</i> </div> <hr/> </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-bulletin"> <div class="ax-bulletin-body"><a href="<# this.href #>" caption><# this.newstime #>,<# this.cnname #>,<# this.enname #><# this.title #></a></div> <i arrow><# this.click #>次</i> </div> <hr/> </li> </script> <div axList='pagination:{data:"ajax/simpleSql.php",async:"sql",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; ?>
异步模式下也就是async=json或sql情况下，并且listDom的nodeName=TBODY，则不需要使用template参数，插件将按tr+td的默认表格模板填充数据。
<div class="inner" style="padding: 14px;">
<table class="ax-table">
<tbody id="tbody"></tbody>
</table>
<div class="ax-pagination" axPagination='data:"ajax/list.json",async:"json",listDom:"#tbody"'></div>
</div>
内置变量
axPagination插件在运行中会产生系列内置变量，这些变量是进行列表分页和列表渲染的基础，也是第三方插件引用axPagination实例的关键。内置变量说明如下：
- this.preData：渲染后列表的节点数组，如果使用了total参数(不为0的整数)，该变量将作为伪数组存在
- this.asyncData：异步渲染后（json或sql模式）获取的详细数组，格式如[{index:'',dom:tr,children:[{name:'',label:'',dom:td},...]},...]，其中的dom节点与preData一致
- this.selectData：当前列表中的节点数组（可见的）
- this.current：当前页码数值
- this.pagesNum：当前页码总数
- this.itemsNum：当前列表项目总数
- this.template：当前使用的模板
- this.targetDom：创建分页的目标节点
- this.renderedIndex：生成列表次数，初始值为0，在sql模式下会因为换页、检索、排序等操作不断递增
- this.pagesDom：放置页码的节点，不包含“上一页”、“下一页”等按钮
- this.pageFirst：首页按钮节点
- this.pageLast：尾页按钮节点
- this.pagePrev：上一页按钮节点
- this.pageNext：下一页按钮节点
- this.pageTotal：页码统计节点
- this.pageGo：分页跳转按钮节点
- this.group：合并页码的外节点
- this.listDom：列表节点
操作方法
创建分页实例后可使用内置方法控制分页。
- 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
- tplToDoms(data, template):根据标准数据生成节点数组，参数说明如下：
- data:标准数据，基本结构为[{title:'',click:''},{title:'',click:''}...]
- template:数据模板，默认等于options.template
- renderList(current, source,callback):根据节点数据渲染列表，参数说明如下：
- current:当前要渲染的页码
- source:数据源，节点数组，每一项都是列表子项节点
- callback:回调函数，支持三个参数：当前页码，总页码和当前信息数量
- getJsonData(data):获得sql异步数据，支持一个对象参数，其属性如下：
- template:将数据转成节点的模板，默认等于options.template
- url:json文件地址
- callback:回调函数，支持三个参数：
- doms:根据模板渲染后的节点数组
- objs:处理后的数组数据
- raw:从json文件获取的原始数据
- getSqlData(data):获得sql异步数据，该方法将向后台传递三个基本数值，即每页数量count、当前页码current和偏移量offset(相等于sql语句中limit的第二个参数)，如果需要传递更多内容请使用dataExtend参数；该方法支持一个对象参数，其属性如下：
- current:获取数据所在页码，默认为1
- count:每页数量，默认等于options.count
- total:信息总条数，默认等于options.total
- template:将数据转成节点的模板，默认等于options.template
- url:请求页面地址
- callback:回调函数，支持三个参数：
- doms:根据模板渲染后的节点数组
- objs:处理后的数组数据
- raw:从动态页面返回的原始数据
-
<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-bulletin"> <div class="ax-bulletin-body"><a href="<# this.href #>" caption><# this.title #></a></div> <i arrow><# this.click #>次</i> </div> <hr/> </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查看！`) }
手动渲染列表
如果使用实体数据，那么插件可自动渲染列表节点，但是不排除用户需要控制渲染列表的时机以及分页总数，所以可使用插件的手动渲染功能。
参数total表示手动渲染的数据总条数，默认为0，即表明插件自动渲染列表节点；如果需要手动渲染则需要将total值设为大于0的整数。根据count值（每页条数）可推算出最终会划分为几页。
<div class="ax-pagination" axPagination='total:46,count:8'></div>
创建分页之后自然需要生成列表内容，通过onTurned/turned回调监听进行列表渲染，其参数如下：
- current：当前页码数
- pages：总页码数
- offset：当页信息数量，最后一页之前与每页信息数量相同
-
<ul id="simManualBox"></ul> <div class="ax-pagination" id="simManual"></div> -
new axPagination('#simManual',{ count:5, total:48, listDom:'#simManualBox', onTurned:function(current,pages,offset){ //this指向实例本身，可以使用内置变量 //先清空listDom再append this.listDom.innerHTML = ''; //使用碎片提高js效率 let fragment = document.createDocumentFragment(); for(let k=1;k<=offset;k++){ //axAddElem是AXUI创建节点的函数 fragment.appendChild(axAddElem('li','',`本页第${k}条信息，当前页码${current}，总页码${pages}`)); } this.listDom.appendChild(fragment); } });
以上示例为完全手动的渲染方法，可使用内置方法进行列表渲染。
- 非异步数据：使用
tplToDoms + renderList方法 - json异步数据：使用
getJsonData + renderList方法 - sql异步数据：使用
getSqlData + renderList方法
非异步
JSON异步
SQL异步
-
<h5>非异步</h5> <ul id="manualList01"></ul> <div class="ax-pagination" id="manualIns01"></div> <div class="ax-break"></div> <h5>JSON异步</h5> <ul id="manualList02"></ul> <div class="ax-pagination" id="manualIns02"></div> <div class="ax-break"></div> <h5>SQL异步</h5> <ul id="manualList03"></ul> <div class="ax-pagination" id="manualIns03"></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-bulletin"> <div class="ax-bulletin-body"><a href="<# this.href #>" caption><# this.title #></a></div> <i arrow><# this.click #>次</i> </div> <hr/> </li> ` //手动非异步 new axPagination('#manualIns01', { listDom: '#manualList01', count: 5, total: 28, template: tpl, onTurned: function (current) { let doms = this.tplToDoms(data); this.renderList(current,doms); } }); //手动json异步 new axPagination('#manualIns02', { listDom: '#manualList02', count: 5, total: 28, template: tpl, onTurned: function (current) { this.getJsonData({ url:'ajax/list.json', callback:function(doms){ this.renderList(current,doms); } }); } }); //手动sql异步 new axPagination('#manualIns03', { listDom: '#manualList03', count: 5, total: 28, template: tpl, onTurned: function (current) { this.getSqlData({ current:current, url:'ajax/manualPag.php', callback:function(doms){ //返回只有一页数据，所以填1 this.renderList(1,doms); } }); } }); -
[ { "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"); //连接数据库，数据库用户自己定义 $server="数据库地址"; $username="数据库用户名"; $password="数据库密码"; $database="数据库名"; $table = '数据表名'; $connect = mysql_connect($server,$username,$password) or die("数据库链接错误"); mysql_select_db($database,$connect); mysql_query("set names 'utf8'"); //接收到三个基本数值：count，current和offset //起始索引 $start = $_POST[count] * ($_POST[current] - 1); //检索语句 $sqlString="select * from {$table} limit {$start},{$_POST[offset]}"; $sql=mysql_query($sqlString); //根据数据生成对象数组 $result = array(); while ($row = mysql_fetch_object($sql)){ array_push($result,$row); } //输出，最终返回类似{data:[{},{}...]} //$object = array('data' => $result,'current' => $current, 'pagesNum' => $pagesNum, 'itemsNum' => $itemsNum); $object = array('data' => $result); $success = json_encode($object); echo $success; ?>
更新数据
使用updateData方法可更新数据，继而更新分页；updateData方法会保持当前页数。其有两个参数
data:必填项，分页数据，可以是片头所描述的五种数据，包括数据数组、#id、html节点、json地址和动态页面地址，另外可以是sql类型专用的对象{url:'',sql:{}}，特别说明如下：- url:动态页面地址
- sql:sql语句对象，支持写法如下:
- sql:{sort:'order by click desc'}
- sql:{filter:'country like %china%'}
- sql:{searh:'country = "china"'}
- sql:{searh:'country = "china"',sort:'order by click desc'}
- sql:{extend:'country = "china" order by click desc'}
- 注意：sort、filter、search和extend作为变量名用户可以自行定义，最终会传递到动态页面取值（比如PHP中以$_POST[sort]取值）
mode:选填项，数据更新模式，overwrite表示覆盖源数据，append表示在源数据后面追加callback:选填项，回调函数。无参数，this指向实例本身
-
<a href="###" class="ax-btn ax-primary" id="btnData">点击更新分页数据</a> <div class="ax-break"></div> <div id="dataList"></div> <a href="###" class="ax-btn ax-primary" id="btnSql">点击更新发布日期排序</a> <a href="###" class="ax-btn ax-primary" id="btnFilter">点击找出新加坡数据</a> <a href="###" class="ax-btn ax-primary" id="btnReset">点击重置列表</a> <div class="ax-break"></div> <div id="dataSql" style="position: relative;"></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-bulletin"> <div class="ax-bulletin-body"><a href="<# this.href #>" caption><# this.title #></a></div> <i arrow><# this.click #>次</i> </div> <hr/> </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('使用追加模式，更新了数据！') }) } let btnSql = document.querySelector('#btnSql'), btnFilter = document.querySelector('#btnFilter'), btnReset = document.querySelector('#btnReset'), dataSql = new axPagination('', { data: 'ajax/sqlData.php', async: 'sql', template: '#sql', listDom: '#dataSql', loadingMode: 'overlay', }); btnSql.onclick = function () { //url就是实例参数的data值（服务器页面地址） dataSql.updateData({ url: dataSql.options.data, sql: { sort: 'order by newstime desc' } }, '', function () { alert('重新排序了，分页页码不变！') }); } btnFilter.onclick = function () { dataSql.updateData({ url: dataSql.options.data, sql: { filter: 'cnname like "%新加坡%"' } }, '', function () { alert('找出了国名等于“新加坡”的数据！') }); } btnReset.onclick = function () { dataSql.updateData({ url: dataSql.options.data, sql: '' }, '', function () { alert('重置了数据！') }); } -
<?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'"); //解析post过来的data $extend = isset($_POST[extend])?$_POST[extend]:''; $sort = isset($_POST[sort])?$_POST[sort]:''; $filter = isset($_POST[filter])?$_POST[filter]:''; $search = isset($_POST[search])?$_POST[search]:''; if($extend){ $where = $extend; }else if($filter || $search){ $where = 'where '.$search.' '.$filter; }else{ $where =''; } //修正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} {$where} {$sort} 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; ?>
更新参数
使用update方法可更新参数，继而更新分页；update方法会初始化实例，页码回到1。其有两个参数
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-bulletin"> <div class="ax-bulletin-body"><a href="<# this.href #>" caption><# this.title #></a></div> <i arrow><# this.click #>次</i> </div> <hr/> </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', }) }
更新页码
如果遇到preData数据的增减会导致页码响应的变化，所以updatePages方法便是帮助更新页码的方法。其支持三个参数：
obj:必填项，删除或者新增的目标对象，可以是preData行索引也可以是preData其中的一项type:选填项，更新类型，默认为remove删除项类型，可选择addBefore目标项前新增或addAfter目标项后新增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-bulletin"> <div class="ax-bulletin-body"><a href="<# this.href #>" caption><# this.title #></a></div> <i arrow><# this.click #>次</i> </div> <hr/> </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:"ajax/list.json",async:"json",template:"#tpl"'></div> <div class="ax-break"></div> <div class="ax-break"></div> <h5>group，regular使用ax-group包裹</h5> <div class="ax-pagination" axPagination='data:"ajax/list.json",async:"json",template:"#tpl",type:"group"'></div> <div class="ax-break"></div> <div class="ax-break"></div> <h5>simple，最简单的展示方式，只有上一页和下一页</h5> <div class="ax-pagination" axPagination='data:"ajax/list.json",async:"json",template:"#tpl",type:"simple"'></div> <div class="ax-break"></div> <div class="ax-break"></div> <h5>full，最全的展示方式，包含分页的全部功能</h5> <div class="ax-pagination" axPagination='data:"ajax/list.json",async:"json",template:"#tpl",type:"full"'></div> <div class="ax-break"></div> <div class="ax-break"></div> <h5>pagesRight，最全的展示方式，但是对统计跳转功能和页码分开放置，页码放在右侧</h5> <div class="ax-pagination" axPagination='data:"ajax/list.json",async:"json",template:"#tpl",type:"pagesRight"'></div> <div class="ax-break"></div> <div class="ax-break"></div> <h5>pagesLeft，最全的展示方式，但是对统计跳转功能和页码分开放置，页码放在左侧</h5> <div class="ax-pagination" axPagination='data:"ajax/list.json",async:"json",template:"#tpl",type:"pagesLeft"'></div> <div class="ax-break"></div> <div class="ax-break"></div> <h5>pure，简约的纯页码展示方式</h5> <div class="ax-pagination" axPagination='data:"ajax/list.json",async:"json",template:"#tpl",type:"pure"'></div> <div class="ax-break"></div> <div class="ax-break"></div> -
<script type="text/template" id="tpl"> <li> <div class="ax-bulletin"> <div class="ax-bulletin-body"><a href="<# this.href #>" caption><# this.title #></a></div> <i arrow><# this.click #>次</i> </div> <hr/> </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 } ]
监听方法
本插件有若干监听方法，以on为关键字，参数中监听格式为：new instance({onShow:function(){}})；实例后监听格式是：instance.on('show',function(){})。在参数中监听和实例后监听效果相同。具体事件说明如下：
onBeforeRendered/beforeRendered：渲染分页节点完成时执行，支持两个参数，即当页的列表节点数组和当页列表详细onRendered/rendered：渲染分页节点完成时执行，支持参数current当前页码、pagesNum总页码和offset偏移量onUpdated/updated：更新参数和更新数据后执行，支持参数current当前页码、pagesNum总页码和offset偏移量onTurned/turned：翻页后执行，比如点击页码、上一页、下一页，支持参数current当前页码、pagesNum总页码和offset偏移量
演示实例显示结果使用了console.log方法，请按下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-bulletin"> <div class="ax-bulletin-body"><a href="<# this.href #>" caption><# this.title #></a></div> <i arrow><# this.click #>次</i> </div> <hr/> </li> ` //on监听 let onUpdated = document.querySelector('#onUpdated'), onIns = new axPagination('', { data: data, template: tpl, listDom: '#onList', }); onUpdated.onclick = function () { onIns.update({ current: 2, count: 2, }) } onIns.on('beforeRendered', function (list) { console.log('渲染进行中！当前列表节点如下：'); console.log(list); }); onIns.on('rendered', function (current, pages, offset) { console.log('渲染完成！当前页码：' + current + '，总页数' + pages + '，偏移量' + offset) }); onIns.on('updated', function (current, pages, offset) { console.log('更新了数据！当前页码：' + current + '，总页数' + pages + '，偏移量' + offset) }); onIns.on('turned', function (current, pages, offset) { console.log('翻页了！当前页码：' + current + '，总页数' + pages + '，偏移量' + offset) });
参数选项
document.addEventListener("DOMContentLoaded", function() {
var demo1 = new axPagination('',{
insName: '',//实例名称，字符串格式；如果填写了实例名称，那么该实例会被添加到实例合集当中，通过axInstance方法可获取本实例，详细请查看：ax-utils-instance.php
listDom: '',//存放列表dom的盒子，如果需要展示筛选出来的列表则需要填写
count: 10, //每页item数量，整数类型
current: 1, //当前页码，整数类型
total: 0,//参与分页的信息条数，整数类型，默认为0表示不启用，如果启用表明将不从data获取数据，而是手动渲染数据；总页数=total/count
firstText: '首页', //首页展示文字
prevText: '上一页', //上一页展示文字
nextText: '下一页', //下一页展示文字
lastText: '尾页', //尾页展示文字
allPages: false,//是否显示所有页码，默认否，可选择true显示全部页码
data: [], //用于创建列表Dom的数组，据此创建分页
clickDelay: 200,//点击按钮时的延时时间，避免快速连续多次点击导致系统负荷
template: '', //数组转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从数据库获得数据
ajaxType: 'post',//异步提交的方式，默认post，可填get
delay: 0,//异步分页内容时延时加载
dataExtend: '',//异步传递的数据对象扩展，除了current、count和offset可以传递更多参数
breakpoints: {},//使用断点以适配终端，详情查看ax-utils-other.php页面
onBeforeRendered: function (listArr) {
//渲染list节点前回调，支持listArr参数，即渲染当页的节点数组
},
onRendered: function (current, pagesNum,offset) {
//渲染完list节点后回调，支持current、pagesNum和offset参数
},
onUpdated: function (current, pagesNum,offset) {
//更新后回调，支持current、pagesNum和offset参数
},
onTurned: function (current, pagesNum,offset) {
//初次加载和翻页后回调，支持current、pagesNum和offset参数
}
});
});