sortList 排序列表
简介
为了瘦身，本框架抛弃了List.js-v2.3.1插件，其详细使用方法查看插件官网，或者Github。本框架自主开发了简单可用的排序列表插件，具备的功能如下：
- 1、支持多种分页风格，与axPagination一致。
- 2、支持input关键字搜索和按指定name搜索
- 3、支持指定关键字搜索
- 4、支持中文排序，包括顺序和逆序
- 5、支持四种数据，即页面现有ul+li节点、js数组数据、json异步数据和sql异步数据调用
- 6、支持表格分页和排序
使用方法
插件运行方式有两种：
- ax*属性：对将要黏住的元素使用
axList属性即可按默认参数运行插件。 - js实例：通过
new axList('#ID',{})方式创建实例运行。
最简单用法
几个简单步骤便可对现有的列表进行分页显示。
- 1、外围Dom使用
axList属性 - 2、对内列表Dom使用
list属性
- 98次
- 63次
- 97次
- 112次
- 54次
- 87次
- 131次
- 51次
- 15次
- 49次
- 84次
- 146次
- 95次
<div axList>
<ul list>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>新加坡</i><i>Singapore</i>，南航与英航签署联营合作协议代码共享</a></div>
<span count><i>98</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>英国</i><i>United Kingdom</i>，到英国大城小镇看“亮灯”</a></div>
<span count><i>63</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>英国</i><i>United Kingdom</i>，英国人喝茶不再流行贵族范</a></div>
<span count><i>97</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>西班牙</i><i>Spain</i>，西班牙斗牛与逗牛，精彩各不同</a></div>
<span count><i>112</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>中国</i><i>China</i>，出了转广州拍照，朋友以为我去了澳洲旅游！</a></div>
<span count><i>54</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>古巴</i><i>Cuba</i>，古巴自由行,在古巴旅游是一种怎样的体验?</a></div>
<span count><i>87</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>中国</i><i>China</i>，道北，洛阳人熟悉又陌生的地方，如今新面貌</a></div>
<span count><i>131</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>日本</i><i>Japan</i>，一边泡温泉一边看海景，来日本，体验独有的温泉文化</a></div>
<span count><i>51</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>韩国</i><i>Korea</i>，国际航线受阻，韩航空公司抢占国内航线</a></div>
<span count><i>15</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>印度</i><i>India</i>，巴厘岛“原始海滩”，海浪滔天，风景壮美，是绝佳的“冲浪秘境” </a></div>
<span count><i>49</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>印尼</i><i>Indonesia</i>，印尼最活跃的活火山，导致一个王国毁灭，是最受欢迎旅游目的地</a></div>
<span count><i>84</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>马尔代夫</i><i>Maldives</i>，印尼最活跃的活火山，带上这篇旅游攻略，你才能知道马尔代夫有多美~</a></div>
<span count><i>146</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>泰国</i><i>Thailand</i>，泰国的清新小镇，被誉为泰国的小瑞士，风景优美闻名于世</a></div>
<span count><i>95</i>次</span>
</li> </ul>
</div>
使用js方法实现以上简单实例，使用了pagination.count=4和pagination.current=2参数。
- 98次
- 63次
- 97次
- 112次
- 54次
- 87次
- 131次
- 51次
- 15次
- 49次
- 84次
- 146次
- 95次
-
<div id="list"> <ul list> <li class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption><i>新加坡</i><i>Singapore</i>，南航与英航签署联营合作协议代码共享</a></div> <span count><i>98</i>次</span> </li> <li class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption><i>英国</i><i>United Kingdom</i>，到英国大城小镇看“亮灯”</a></div> <span count><i>63</i>次</span> </li> <li class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption><i>英国</i><i>United Kingdom</i>，英国人喝茶不再流行贵族范</a></div> <span count><i>97</i>次</span> </li> <li class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption><i>西班牙</i><i>Spain</i>，西班牙斗牛与逗牛，精彩各不同</a></div> <span count><i>112</i>次</span> </li> <li class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption><i>中国</i><i>China</i>，出了转广州拍照，朋友以为我去了澳洲旅游！</a></div> <span count><i>54</i>次</span> </li> <li class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption><i>古巴</i><i>Cuba</i>，古巴自由行,在古巴旅游是一种怎样的体验?</a></div> <span count><i>87</i>次</span> </li> <li class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption><i>中国</i><i>China</i>，道北，洛阳人熟悉又陌生的地方，如今新面貌</a></div> <span count><i>131</i>次</span> </li> <li class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption><i>日本</i><i>Japan</i>，一边泡温泉一边看海景，来日本，体验独有的温泉文化</a></div> <span count><i>51</i>次</span> </li> <li class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption><i>韩国</i><i>Korea</i>，国际航线受阻，韩航空公司抢占国内航线</a></div> <span count><i>15</i>次</span> </li> <li class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption><i>印度</i><i>India</i>，巴厘岛“原始海滩”，海浪滔天，风景壮美，是绝佳的“冲浪秘境” </a></div> <span count><i>49</i>次</span> </li> <li class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption><i>印尼</i><i>Indonesia</i>，印尼最活跃的活火山，导致一个王国毁灭，是最受欢迎旅游目的地</a></div> <span count><i>84</i>次</span> </li> <li class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption><i>马尔代夫</i><i>Maldives</i>，印尼最活跃的活火山，带上这篇旅游攻略，你才能知道马尔代夫有多美~</a></div> <span count><i>146</i>次</span> </li> <li class="ax-bulletin"> <div class="ax-bulletin-body"><a href="###" caption><i>泰国</i><i>Thailand</i>，泰国的清新小镇，被誉为泰国的小瑞士，风景优美闻名于世</a></div> <span count><i>95</i>次</span> </li> </ul> </div> -
let list = new axList('#list', { pagination:{ count: 4, current: 2, } });
常规用法
除了常用的分页之外，其他功能包括：自动检索，手动检索，关键字检索、自定义条件检索、排序、显示全部等。使用上述方法的前提是使用names参数，也就是要指定排序和检索将基于什么属性名，该参数使用英文逗号隔开。
- 1、input自动检索。对input键入关键字便可自动检索。注意事项如下：
- input需要使用
keyword属性和auto属性 - 默认对所有字段检索，如果需要按指定指定筛选，请填写input的
keyword属性，多个字段用英文逗号隔开，，例如keyword='country,click' - 多字段检索条件运算符默认or，即满足一个条件即可，通过给input追加
operator属性来改变检索条件运算符，例如operator='and' - 域内可以有多个这种input
- 2、input手动检索。该方法需要input和按钮配合使用，即input输入关键字，点击按钮进行手动检索。注意事项如下：
- input需要使用
keyword属性和name属性 - 按钮需要使用
search属性和filed属性，field值等于input的name值，以此进行关联操作 - 默认对所有字段检索，如果需要按指定指定筛选，请填写input的
keyword属性，多个字段用英文逗号隔开，，例如keyword='country,click' - 多字段检索条件运算符默认or，即满足一个条件即可，通过给input追加
operator属性来改变检索条件运算符，例如operator='and' - 域内可以有多对这种input+按钮组合
- 3、列表排序。支持顺序和逆序，域内按钮只支持一个字段。注意事项如下：
- 对按钮使用
sort属性并填写一个字段名 - 列表默认无序，点击后将按插件的
order参数（默认asc）进行排序，如果需要改变第一次点击后的默认顺序，可对按钮使用order属性使用值(asc或desc)或者改变插件的order参数 - 按钮的sort属性只能填写一个字段名
- 4、关键字检索。通过filter属性自定义检索按钮。
- 对按钮使用
filter属性并以json格式至少填写一个键值对 - filter属性的写法是
json写法，即键值对的形式，支持一个或多个键值对，例如filter="key:text"或filter='country:"China",click:59' - filter的key是字段名，必须来自参数
names，否则检索不到内容 - 多字段检索条件运算符默认or，即满足一个条件即可，通过给按钮追加
operator属性来改变检索条件运算符，例如operator='and' - 5、自定义条件检索。不同于filter按钮，extend按钮是通过项目筛选语句来检索内容。
- 对按钮使用
extend属性并填写检索语句，例如按arr.filter(item=>item.name == 'china')检索，那么extend="item.name == 'china'" - 按钮extend值中项目变量名必须是item，不能使用其他的变量名
- 6、初始化列表。如果需要初始化列表，可对按钮填入
reset属性，点击即可初始化。
以上的按钮和input可以出现在axList中任意地方，也可以使用多个。
- 98次
- 63次
- 97次
- 112次
- 54次
- 87次
- 131次
- 51次
- 15次
- 49次
- 84次
- 146次
- 95次
<div axList='names:"add,country,click"'>
<ul class="ax-row ax-split ax-padding">
<li class="ax-col ax-col-3">
<div class="ax-row ax-input-group">
<div class="ax-flex-block">
<input placeholder="自动筛选" type="text" keyword auto>
<span class="ax-pos-right"><a href="##" class="ax-iconfont ax-icon-close" clear reset></a></span>
</div>
</div>
</li>
<span class="ax-gutter"></span>
<li class="ax-col ax-col-5">
<div class="ax-row ax-input-group">
<div class="ax-flex-block ax-with-suffix">
<input placeholder="手动筛选..." type="text" name="key" keyword="add,country,click">
<span class="ax-pos-right"><a href="##" class="ax-iconfont ax-icon-close" clear reset></a></span>
</div>
<a href="###" class="ax-suffix ax-btn ax-primary" search field="key">搜索</a>
</div>
</li>
<span class="ax-gutter"></span>
<li class="ax-col ax-col-3">
<a href="##" class="ax-btn ax-primary ax-full" sort="click" order="desc">点击排列</a>
</li>
<span class="ax-gutter"></span>
<li class="ax-col ax-col-3">
<a href="##" class="ax-btn ax-primary ax-full" sort="add">中文排列</a>
</li>
<span class="ax-gutter"></span>
<li class="ax-col ax-col-3">
<a href="##" class="ax-btn ax-primary ax-full" filter='country:"China"'>中国事件</a>
</li>
<span class="ax-gutter"></span>
<li class="ax-col ax-col-3">
<a href="##" class="ax-btn ax-primary ax-full" extend="item.click > 200">自定义</a>
</li>
<span class="ax-gutter"></span>
<li class="ax-col ax-col-2">
<a href="##" class="ax-btn ax-primary ax-full" reset>全部</a>
</li>
</ul>
<ul list>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i add>新加坡</i><i country>Singapore</i>，南航与英航签署联营合作协议代码共享</a></div>
<span count><i click>98</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i add>英国</i><i country>United Kingdom</i>，到英国大城小镇看“亮灯”</a></div>
<span count><i click>63</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i add>英国</i><i country>United Kingdom</i>，英国人喝茶不再流行贵族范</a></div>
<span count><i click>97</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i add>西班牙</i><i country>Spain</i>，西班牙斗牛与逗牛，精彩各不同</a></div>
<span count><i click>112</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i add>中国</i><i country>China</i>，出了转广州拍照，朋友以为我去了澳洲旅游！</a></div>
<span count><i click>54</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i add>古巴</i><i country>Cuba</i>，古巴自由行,在古巴旅游是一种怎样的体验?</a></div>
<span count><i click>87</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i add>中国</i><i country>China</i>，道北，洛阳人熟悉又陌生的地方，如今新面貌</a></div>
<span count><i click>131</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i add>日本</i><i country>Japan</i>，一边泡温泉一边看海景，来日本，体验独有的温泉文化</a></div>
<span count><i click>51</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i add>韩国</i><i country>Korea</i>，国际航线受阻，韩航空公司抢占国内航线</a></div>
<span count><i click>15</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i add>印度</i><i country>India</i>，巴厘岛“原始海滩”，海浪滔天，风景壮美，是绝佳的“冲浪秘境” </a></div>
<span count><i click>49</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i add>印尼</i><i country>Indonesia</i>，印尼最活跃的活火山，导致一个王国毁灭，是最受欢迎旅游目的地</a></div>
<span count><i click>84</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i add>马尔代夫</i><i country>Maldives</i>，印尼最活跃的活火山，带上这篇旅游攻略，你才能知道马尔代夫有多美~</a></div>
<span count><i click>146</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i add>泰国</i><i country>Thailand</i>，泰国的清新小镇，被誉为泰国的小瑞士，风景优美闻名于世</a></div>
<span count><i click>95</i>次</span>
</li>
</ul>
</div>
Json异步数据
对于已存在页面的ul+li数据或者tbody+tr的数据能自动生成排序列表之外，也支持异步获取json数据创建排序列表。必须使用的参数有pagination.data、pagination.async和pagination.template
- pagination.data:填写json文件地址
- pagination.async:是指异步方式，此处填写"json"
- pagination.template:是指列表模板，填写#id或模板变量（js中使用）
-
<script type="text/template" id="tpl"> <li> <div class="ax-bulletin"> <div class="ax-bulletin-body"><a href="<# this.href #>" caption><i title><# this.title #></i></a></div> <span arrow><i click><# this.click #></i>次</span> </div> <hr/> </li> </script> <div axList='names:"title,click",pagination:{data:"ajax/list.json",async:"json",template:"#tpl"}'> <ul class="ax-row ax-split ax-padding"> <li class="ax-col ax-col-3"> <div class="ax-row ax-input-group"> <div class="ax-flex-block"> <input placeholder="自动筛选" type="text" keyword auto> <span class="ax-pos-right"><a href="##" class="ax-iconfont ax-icon-close" clear reset></a></span> </div> </div> </li> <span class="ax-gutter"></span> <li class="ax-col ax-col-5"> <div class="ax-row ax-input-group"> <div class="ax-flex-block ax-with-suffix"> <input placeholder="手动筛选..." type="text" name="key" keyword="title,click"> <span class="ax-pos-right"><a href="##" class="ax-iconfont ax-icon-close" clear reset></a></span> </div> <a href="###" class="ax-suffix ax-btn ax-primary" search field="key">搜索</a> </div> </li> <span class="ax-gutter"></span> <li class="ax-col ax-col-3"> <a href="##" class="ax-btn ax-primary ax-full" sort="click" order="desc">点击排列</a> </li> <span class="ax-gutter"></span> <li class="ax-col ax-col-3"> <a href="##" class="ax-btn ax-primary ax-full" sort="title">中文排列</a> </li> <span class="ax-gutter"></span> <li class="ax-col ax-col-3"> <a href="##" class="ax-btn ax-primary ax-full" filter='title:"北京"'>北京事件</a> </li> <span class="ax-gutter"></span> <li class="ax-col ax-col-3"> <a href="##" class="ax-btn ax-primary ax-full" extend="item.click > 200">自定义</a> </li> <span class="ax-gutter"></span> <li class="ax-col ax-col-2"> <a href="##" class="ax-btn ax-primary ax-full" reset>全部</a> </li> </ul> <ul list></ul> </div> -
[ { "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 } ]
Sql异步数据
如果数据比较庞大，不管是使用页面现有节点还是json异步都将明显感到性能下降。此时便需要使用sql异步数据方法。基本原理是：前端页面向后端页面发送数据请求（发送current和count），后端页面根据请求组装好数据发回前端。后端发回前端的数据只有一页而不是全部，通过页码或数据检索实现列表数据变化。
由于从数据库获取数据有些特殊，而且该方法一般用于管理系统之中。如果只是显示一个有分页的列表，那么用法跟json异步方法一致。使用方法如下：
pagination.data参数填写动态页面地址pagination.async参数填写sql字符串pagination.template参数数据模板Idpagination.delay为可选参数，填了之后会显示缓冲加载效果
如果要使用操作方法，则需要填写更多参数，其核心原理是通过修改插件中dataExtend参数以改变向后台发送的数据指令，这些指令与sql语法息息相关，比如单纯的sql异步数据列表发送的current和count相当于拼接sql语句中的limit片段，而dataExtend将让sql语句进一步扩展以实现更复杂的检索。以axList使用方法为例：
- 1、input自动检索。对input键入关键字便可自动检索。注意事项如下：
- input需要使用
keyword属性和auto属性 - 默认对所有字段检索，如果需要按指定指定筛选，请填写input的
keyword属性，多个字段用英文逗号隔开，，例如keyword='country,click' - 多字段检索条件运算符默认or，即满足一个条件即可，通过给input追加
operator属性来改变检索条件运算符，例如operator='and' - 域内可以有多个这种input
- 2、input手动检索。该方法需要input和按钮配合使用，即input输入关键字，点击按钮进行手动检索。注意事项如下：
- input需要使用
keyword属性和name属性 - 按钮需要使用
search属性和filed属性，field值等于input的name值，以此进行关联操作 - 默认对所有字段检索，如果需要按指定指定筛选，请填写input的
keyword属性，多个字段用英文逗号隔开，，例如keyword='country,click' - 多字段检索条件运算符默认or，即满足一个条件即可，通过给input追加
operator属性来改变检索条件运算符，例如operator='and' - 域内可以有多对这种input+按钮组合
- 3、Sql排序。注意事项如下：
- 对按钮使用
sort属性 - 基本语法是一条排序语句，例如
sort="order by click desc"，多个排序规则可以是sort="order by click desc,enname asc" - 如果只有一种排序规则，那么可实现toggle效果
- 4、Sql筛选。注意事项如下：。
- 对按钮使用
filter属性 - 基本语法是一条where语句，例如
filter="cnname like '%中国%'"，多个筛选条件可以是filter="cnname like '%中国%' or enname like '%na%'" - 5、Sql自定义检索。如果常规方法不能满足要求，可使用
extend属性自定义sql检索条件，注意事项如下： - 对按钮使用
extendd属性 - 基本语法是一条
select之后的sql语句，例如extend="enname like '%o%' order by click desc" - 6、初始化列表。如果需要初始化列表，可对按钮填入
reset属性，点击即可初始化。
以上的按钮和input可以出现在axList中任意地方，也可以使用多个。
-
<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/sqlData.php",async:"sql",template:"#sql"}'> <ul class="ax-row ax-split ax-padding"> <li class="ax-col ax-col-3"> <div class="ax-row ax-input-group"> <div class="ax-flex-block"> <input placeholder="自动筛选" type="text" keyword="cnname,enname,title" auto> <span class="ax-pos-right"><a href="##" class="ax-iconfont ax-icon-close" clear reset></a></span> </div> </div> </li> <span class="ax-gutter"></span> <li class="ax-col ax-col-5"> <div class="ax-row ax-input-group"> <div class="ax-flex-block ax-with-suffix"> <input placeholder="手动筛选..." type="text" name="key" keyword="cnname,enname,title"> <span class="ax-pos-right"><a href="##" class="ax-iconfont ax-icon-close" clear reset></a></span> </div> <a href="###" class="ax-suffix ax-btn ax-primary" search field="key">搜索</a> </div> </li> <span class="ax-gutter"></span> <li class="ax-col ax-col-3"> <a href="##" class="ax-btn ax-primary ax-full" sort="order by click desc">点击排序</a> </li> <span class="ax-gutter"></span> <li class="ax-col ax-col-3"> <a href="##" class="ax-btn ax-primary ax-full" sort="order by cnname desc">中文排序</a> </li> <span class="ax-gutter"></span> <li class="ax-col ax-col-3"> <a href="##" class="ax-btn ax-primary ax-full" filter="cnname like '%中国%'">中国事件</a> </li> <span class="ax-gutter"></span> <li class="ax-col ax-col-3"> <a href="##" class="ax-btn ax-primary ax-full" extend="where enname like '%o%' order by click desc">自定义</a> </li> <span class="ax-gutter"></span> <li class="ax-col ax-col-2"> <a href="##" class="ax-btn ax-primary ax-full" reset>全部</a> </li> </ul> <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'"); //解析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; ?>
以上事例用js方法实现，并将button和input放在其他地方，如下：
-
<ul class="ax-row ax-split ax-padding"> <li class="ax-col ax-col-3"> <div class="ax-row ax-input-group"> <div class="ax-flex-block"> <input placeholder="自动筛选" type="text" id="autoSearch"> <span class="ax-pos-right"><a href="##" class="ax-iconfont ax-icon-close" clear id="autoClear"></a></span> </div> </div> </li> <span class="ax-gutter"></span> <li class="ax-col ax-col-5"> <div class="ax-row ax-input-group"> <div class="ax-flex-block ax-with-suffix"> <input placeholder="手动筛选..." type="text" id="keyInput"> <span class="ax-pos-right"><a href="##" class="ax-iconfont ax-icon-close" clear id="keyClear"></a></span> </div> <a href="###" class="ax-suffix ax-btn ax-primary" id="keySearch">搜索</a> </div> </li> <span class="ax-gutter"></span> <li class="ax-col ax-col-3"> <a href="##" class="ax-btn ax-primary ax-full" id="keySortClick">点击排序</a> </li> <span class="ax-gutter"></span> <li class="ax-col ax-col-3"> <a href="##" class="ax-btn ax-primary ax-full" id="keySortName">中文排序</a> </li> <span class="ax-gutter"></span> <li class="ax-col ax-col-3"> <a href="##" class="ax-btn ax-primary ax-full" id="keyFilter">中国事件</a> </li> <span class="ax-gutter"></span> <li class="ax-col ax-col-3"> <a href="##" class="ax-btn ax-primary ax-full" id="keyExtend">自定义</a> </li> <span class="ax-gutter"></span> <li class="ax-col ax-col-2"> <a href="##" class="ax-btn ax-primary ax-full" id="keyReset">全部</a> </li> </ul> <div id="keyIns"> <ul list></ul> </div> -
let sqlTemplate = ` <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> `, autoSearch = document.querySelector('#autoSearch'), autoClear = document.querySelector('#autoClear'), keyInput = document.querySelector('#keyInput'), keyClear = document.querySelector('#keyClear'), keySearch = document.querySelector('#keySearch'), keySortClick = document.querySelector('#keySortClick'), keySortName = document.querySelector('#keySortName'), keyFilter = document.querySelector('#keyFilter'), keyReset = document.querySelector('#keyReset'), keyIns = new axList('#keyIns', { pagination: { data: 'ajax/sqlData.php', async: "sql", template: sqlTemplate, } }); keySortClick.onclick = function () { //可使用axThrottle节流函数，避免频繁检索数据库 keyIns.updateSql({ dataExtend: { sort: 'order by click desc' } }, function () { console.log('按点击数量降序！'); }); } keySortName.onclick = function () { //可使用axThrottle节流函数，避免频繁检索数据库 keyIns.updateSql({ dataExtend: { sort: 'order by cnname desc' } }, function () { console.log('按中文降序！'); }); } keyFilter.onclick = function () { //可使用axThrottle节流函数，避免频繁检索数据库 keyIns.updateSql({ dataExtend: { filter: "cnname like '%中国%'" } }, function () { console.log('检索“中国”的事件！'); }); } keyExtend.onclick = function () { //可使用axThrottle节流函数，避免频繁检索数据库 keyIns.updateSql({ dataExtend: { extend: "where enname like '%o%' order by click desc" } }, function () { console.log('自定义检索条件！'); }); } keyReset.onclick = function () { //可使用axThrottle节流函数，避免频繁检索数据库 keyIns.updateSql({ dataExtend: { reset: true } }, function () { console.log('重置列表！'); }); } keySearch.onclick = function () { //可使用axThrottle节流函数，避免频繁检索数据库 keyIns.updateSql({ dataExtend: { search: "cnname like '%" + keyInput.value + "%' or enname like '%" + keyInput.value + "%' or title like '%" + keyInput.value + "%'" } }, function () { console.log('关键字搜索完成！'); }); } keyInput.onkeyup = function (e) { //回车键代码是13 if (e.keyCode === 13) { keySearch.click(); } } keyClear.onclick = function () { //可使用axThrottle节流函数，避免频繁检索数据库 keyInput.value = ''; keyIns.updateSql({ dataExtend: { reset: true } }, function () { console.log('重置列表！'); }); } autoSearch.oninput = function (e) { //可使用axDebounce防抖函数，避免频繁检索数据库 keyIns.updateSql({ dataExtend: { search: "cnname like '%" + this.value + "%' or enname like '%" + this.value + "%' or title like '%" + this.value + "%'" } }, function () { console.log('关键字搜索完成！'); }); } autoClear.onclick = function () { autoSearch.value = ''; keyIns.updateSql({ dataExtend: { reset: true } }, function () { console.log('重置列表！'); }); } -
<?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; ?>
分页
使用List插件默认分页，可以通过设置paginationShow:false来取消分页，也可以通过设置type参数展示不同风格的分页，关于分页的用法请参见axPagination。
- regular：默认展示方式，包含按钮导航和页码
- group：regular基础上使用
ax-group包裹 - simple：最简单的展示方式，只有上一页和下一页
- full：最全的展示方式，包含分页的全部功能
- pagesRight：最全的展示方式，但是对统计跳转功能和页码分开放置，页码放在右侧
- pagesLeft：最全的展示方式，但是对统计跳转功能和页码分开放置，页码放在左侧
- pure：简约的纯页码展示方式
- 98次
- 63次
- 97次
- 112次
- 54次
- 87次
- 131次
- 51次
- 15次
- 49次
- 84次
- 146次
- 95次
- 98次
- 63次
- 97次
- 112次
- 54次
- 87次
- 131次
- 51次
- 15次
- 49次
- 84次
- 146次
- 95次
- 98次
- 63次
- 97次
- 112次
- 54次
- 87次
- 131次
- 51次
- 15次
- 49次
- 84次
- 146次
- 95次
- 98次
- 63次
- 97次
- 112次
- 54次
- 87次
- 131次
- 51次
- 15次
- 49次
- 84次
- 146次
- 95次
- 98次
- 63次
- 97次
- 112次
- 54次
- 87次
- 131次
- 51次
- 15次
- 49次
- 84次
- 146次
- 95次
- 98次
- 63次
- 97次
- 112次
- 54次
- 87次
- 131次
- 51次
- 15次
- 49次
- 84次
- 146次
- 95次
<div axList='pagination:{type:"regular"}'>
<ul list>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>新加坡</i><i>Singapore</i>，南航与英航签署联营合作协议代码共享</a></div>
<span count><i>98</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>英国</i><i>United Kingdom</i>，到英国大城小镇看“亮灯”</a></div>
<span count><i>63</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>英国</i><i>United Kingdom</i>，英国人喝茶不再流行贵族范</a></div>
<span count><i>97</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>西班牙</i><i>Spain</i>，西班牙斗牛与逗牛，精彩各不同</a></div>
<span count><i>112</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>中国</i><i>China</i>，出了转广州拍照，朋友以为我去了澳洲旅游！</a></div>
<span count><i>54</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>古巴</i><i>Cuba</i>，古巴自由行,在古巴旅游是一种怎样的体验?</a></div>
<span count><i>87</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>中国</i><i>China</i>，道北，洛阳人熟悉又陌生的地方，如今新面貌</a></div>
<span count><i>131</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>日本</i><i>Japan</i>，一边泡温泉一边看海景，来日本，体验独有的温泉文化</a></div>
<span count><i>51</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>韩国</i><i>Korea</i>，国际航线受阻，韩航空公司抢占国内航线</a></div>
<span count><i>15</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>印度</i><i>India</i>，巴厘岛“原始海滩”，海浪滔天，风景壮美，是绝佳的“冲浪秘境” </a></div>
<span count><i>49</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>印尼</i><i>Indonesia</i>，印尼最活跃的活火山，导致一个王国毁灭，是最受欢迎旅游目的地</a></div>
<span count><i>84</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>马尔代夫</i><i>Maldives</i>，印尼最活跃的活火山，带上这篇旅游攻略，你才能知道马尔代夫有多美~</a></div>
<span count><i>146</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>泰国</i><i>Thailand</i>，泰国的清新小镇，被誉为泰国的小瑞士，风景优美闻名于世</a></div>
<span count><i>95</i>次</span>
</li> </ul>
</div>
<div class="ax-break-xl"></div>
<hr/>
<div axList='pagination:{type:"full"}'>
<ul list>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>新加坡</i><i>Singapore</i>，南航与英航签署联营合作协议代码共享</a></div>
<span count><i>98</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>英国</i><i>United Kingdom</i>，到英国大城小镇看“亮灯”</a></div>
<span count><i>63</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>英国</i><i>United Kingdom</i>，英国人喝茶不再流行贵族范</a></div>
<span count><i>97</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>西班牙</i><i>Spain</i>，西班牙斗牛与逗牛，精彩各不同</a></div>
<span count><i>112</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>中国</i><i>China</i>，出了转广州拍照，朋友以为我去了澳洲旅游！</a></div>
<span count><i>54</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>古巴</i><i>Cuba</i>，古巴自由行,在古巴旅游是一种怎样的体验?</a></div>
<span count><i>87</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>中国</i><i>China</i>，道北，洛阳人熟悉又陌生的地方，如今新面貌</a></div>
<span count><i>131</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>日本</i><i>Japan</i>，一边泡温泉一边看海景，来日本，体验独有的温泉文化</a></div>
<span count><i>51</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>韩国</i><i>Korea</i>，国际航线受阻，韩航空公司抢占国内航线</a></div>
<span count><i>15</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>印度</i><i>India</i>，巴厘岛“原始海滩”，海浪滔天，风景壮美，是绝佳的“冲浪秘境” </a></div>
<span count><i>49</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>印尼</i><i>Indonesia</i>，印尼最活跃的活火山，导致一个王国毁灭，是最受欢迎旅游目的地</a></div>
<span count><i>84</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>马尔代夫</i><i>Maldives</i>，印尼最活跃的活火山，带上这篇旅游攻略，你才能知道马尔代夫有多美~</a></div>
<span count><i>146</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>泰国</i><i>Thailand</i>，泰国的清新小镇，被誉为泰国的小瑞士，风景优美闻名于世</a></div>
<span count><i>95</i>次</span>
</li> </ul>
</div>
<div class="ax-break-xl"></div>
<hr/>
<div axList='pagination:{type:"simple"}'>
<ul list>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>新加坡</i><i>Singapore</i>，南航与英航签署联营合作协议代码共享</a></div>
<span count><i>98</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>英国</i><i>United Kingdom</i>，到英国大城小镇看“亮灯”</a></div>
<span count><i>63</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>英国</i><i>United Kingdom</i>，英国人喝茶不再流行贵族范</a></div>
<span count><i>97</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>西班牙</i><i>Spain</i>，西班牙斗牛与逗牛，精彩各不同</a></div>
<span count><i>112</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>中国</i><i>China</i>，出了转广州拍照，朋友以为我去了澳洲旅游！</a></div>
<span count><i>54</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>古巴</i><i>Cuba</i>，古巴自由行,在古巴旅游是一种怎样的体验?</a></div>
<span count><i>87</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>中国</i><i>China</i>，道北，洛阳人熟悉又陌生的地方，如今新面貌</a></div>
<span count><i>131</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>日本</i><i>Japan</i>，一边泡温泉一边看海景，来日本，体验独有的温泉文化</a></div>
<span count><i>51</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>韩国</i><i>Korea</i>，国际航线受阻，韩航空公司抢占国内航线</a></div>
<span count><i>15</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>印度</i><i>India</i>，巴厘岛“原始海滩”，海浪滔天，风景壮美，是绝佳的“冲浪秘境” </a></div>
<span count><i>49</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>印尼</i><i>Indonesia</i>，印尼最活跃的活火山，导致一个王国毁灭，是最受欢迎旅游目的地</a></div>
<span count><i>84</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>马尔代夫</i><i>Maldives</i>，印尼最活跃的活火山，带上这篇旅游攻略，你才能知道马尔代夫有多美~</a></div>
<span count><i>146</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>泰国</i><i>Thailand</i>，泰国的清新小镇，被誉为泰国的小瑞士，风景优美闻名于世</a></div>
<span count><i>95</i>次</span>
</li> </ul>
</div>
<div class="ax-break-xl"></div>
<hr/>
<div axList='pagination:{type:"pure"}'>
<ul list>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>新加坡</i><i>Singapore</i>，南航与英航签署联营合作协议代码共享</a></div>
<span count><i>98</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>英国</i><i>United Kingdom</i>，到英国大城小镇看“亮灯”</a></div>
<span count><i>63</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>英国</i><i>United Kingdom</i>，英国人喝茶不再流行贵族范</a></div>
<span count><i>97</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>西班牙</i><i>Spain</i>，西班牙斗牛与逗牛，精彩各不同</a></div>
<span count><i>112</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>中国</i><i>China</i>，出了转广州拍照，朋友以为我去了澳洲旅游！</a></div>
<span count><i>54</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>古巴</i><i>Cuba</i>，古巴自由行,在古巴旅游是一种怎样的体验?</a></div>
<span count><i>87</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>中国</i><i>China</i>，道北，洛阳人熟悉又陌生的地方，如今新面貌</a></div>
<span count><i>131</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>日本</i><i>Japan</i>，一边泡温泉一边看海景，来日本，体验独有的温泉文化</a></div>
<span count><i>51</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>韩国</i><i>Korea</i>，国际航线受阻，韩航空公司抢占国内航线</a></div>
<span count><i>15</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>印度</i><i>India</i>，巴厘岛“原始海滩”，海浪滔天，风景壮美，是绝佳的“冲浪秘境” </a></div>
<span count><i>49</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>印尼</i><i>Indonesia</i>，印尼最活跃的活火山，导致一个王国毁灭，是最受欢迎旅游目的地</a></div>
<span count><i>84</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>马尔代夫</i><i>Maldives</i>，印尼最活跃的活火山，带上这篇旅游攻略，你才能知道马尔代夫有多美~</a></div>
<span count><i>146</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>泰国</i><i>Thailand</i>，泰国的清新小镇，被誉为泰国的小瑞士，风景优美闻名于世</a></div>
<span count><i>95</i>次</span>
</li> </ul>
</div>
<div class="ax-break-xl"></div>
<hr/>
<div axList='pagination:{type:"pagesLeft"}'>
<ul list>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>新加坡</i><i>Singapore</i>，南航与英航签署联营合作协议代码共享</a></div>
<span count><i>98</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>英国</i><i>United Kingdom</i>，到英国大城小镇看“亮灯”</a></div>
<span count><i>63</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>英国</i><i>United Kingdom</i>，英国人喝茶不再流行贵族范</a></div>
<span count><i>97</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>西班牙</i><i>Spain</i>，西班牙斗牛与逗牛，精彩各不同</a></div>
<span count><i>112</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>中国</i><i>China</i>，出了转广州拍照，朋友以为我去了澳洲旅游！</a></div>
<span count><i>54</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>古巴</i><i>Cuba</i>，古巴自由行,在古巴旅游是一种怎样的体验?</a></div>
<span count><i>87</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>中国</i><i>China</i>，道北，洛阳人熟悉又陌生的地方，如今新面貌</a></div>
<span count><i>131</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>日本</i><i>Japan</i>，一边泡温泉一边看海景，来日本，体验独有的温泉文化</a></div>
<span count><i>51</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>韩国</i><i>Korea</i>，国际航线受阻，韩航空公司抢占国内航线</a></div>
<span count><i>15</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>印度</i><i>India</i>，巴厘岛“原始海滩”，海浪滔天，风景壮美，是绝佳的“冲浪秘境” </a></div>
<span count><i>49</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>印尼</i><i>Indonesia</i>，印尼最活跃的活火山，导致一个王国毁灭，是最受欢迎旅游目的地</a></div>
<span count><i>84</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>马尔代夫</i><i>Maldives</i>，印尼最活跃的活火山，带上这篇旅游攻略，你才能知道马尔代夫有多美~</a></div>
<span count><i>146</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>泰国</i><i>Thailand</i>，泰国的清新小镇，被誉为泰国的小瑞士，风景优美闻名于世</a></div>
<span count><i>95</i>次</span>
</li> </ul>
</div>
<div class="ax-break-xl"></div>
<hr/>
<div axList='pagination:{type:"pagesRight"}'>
<ul list>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>新加坡</i><i>Singapore</i>，南航与英航签署联营合作协议代码共享</a></div>
<span count><i>98</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>英国</i><i>United Kingdom</i>，到英国大城小镇看“亮灯”</a></div>
<span count><i>63</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>英国</i><i>United Kingdom</i>，英国人喝茶不再流行贵族范</a></div>
<span count><i>97</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>西班牙</i><i>Spain</i>，西班牙斗牛与逗牛，精彩各不同</a></div>
<span count><i>112</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>中国</i><i>China</i>，出了转广州拍照，朋友以为我去了澳洲旅游！</a></div>
<span count><i>54</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>古巴</i><i>Cuba</i>，古巴自由行,在古巴旅游是一种怎样的体验?</a></div>
<span count><i>87</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>中国</i><i>China</i>，道北，洛阳人熟悉又陌生的地方，如今新面貌</a></div>
<span count><i>131</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>日本</i><i>Japan</i>，一边泡温泉一边看海景，来日本，体验独有的温泉文化</a></div>
<span count><i>51</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>韩国</i><i>Korea</i>，国际航线受阻，韩航空公司抢占国内航线</a></div>
<span count><i>15</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>印度</i><i>India</i>，巴厘岛“原始海滩”，海浪滔天，风景壮美，是绝佳的“冲浪秘境” </a></div>
<span count><i>49</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>印尼</i><i>Indonesia</i>，印尼最活跃的活火山，导致一个王国毁灭，是最受欢迎旅游目的地</a></div>
<span count><i>84</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>马尔代夫</i><i>Maldives</i>，印尼最活跃的活火山，带上这篇旅游攻略，你才能知道马尔代夫有多美~</a></div>
<span count><i>146</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>泰国</i><i>Thailand</i>，泰国的清新小镇，被誉为泰国的小瑞士，风景优美闻名于世</a></div>
<span count><i>95</i>次</span>
</li> </ul>
</div>
指定分页Dom
分页的节点默认是放在list下方，可通过设置paginationDom参数将分页放在任意的位置。该Dom需要使用ax-pagination样式进行美化
- 98次
- 63次
- 97次
- 112次
- 54次
- 87次
- 131次
- 51次
- 15次
- 49次
- 84次
- 146次
- 95次
<div axList='paginationDom:"#pages"'>
<ul list>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>新加坡</i><i>Singapore</i>，南航与英航签署联营合作协议代码共享</a></div>
<span count><i>98</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>英国</i><i>United Kingdom</i>，到英国大城小镇看“亮灯”</a></div>
<span count><i>63</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>英国</i><i>United Kingdom</i>，英国人喝茶不再流行贵族范</a></div>
<span count><i>97</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>西班牙</i><i>Spain</i>，西班牙斗牛与逗牛，精彩各不同</a></div>
<span count><i>112</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>中国</i><i>China</i>，出了转广州拍照，朋友以为我去了澳洲旅游！</a></div>
<span count><i>54</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>古巴</i><i>Cuba</i>，古巴自由行,在古巴旅游是一种怎样的体验?</a></div>
<span count><i>87</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>中国</i><i>China</i>，道北，洛阳人熟悉又陌生的地方，如今新面貌</a></div>
<span count><i>131</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>日本</i><i>Japan</i>，一边泡温泉一边看海景，来日本，体验独有的温泉文化</a></div>
<span count><i>51</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>韩国</i><i>Korea</i>，国际航线受阻，韩航空公司抢占国内航线</a></div>
<span count><i>15</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>印度</i><i>India</i>，巴厘岛“原始海滩”，海浪滔天，风景壮美，是绝佳的“冲浪秘境” </a></div>
<span count><i>49</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>印尼</i><i>Indonesia</i>，印尼最活跃的活火山，导致一个王国毁灭，是最受欢迎旅游目的地</a></div>
<span count><i>84</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>马尔代夫</i><i>Maldives</i>，印尼最活跃的活火山，带上这篇旅游攻略，你才能知道马尔代夫有多美~</a></div>
<span count><i>146</i>次</span>
</li>
<li class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption><i>泰国</i><i>Thailand</i>，泰国的清新小镇，被誉为泰国的小瑞士，风景优美闻名于世</a></div>
<span count><i>95</i>次</span>
</li> </ul>
<div id="pages" class="ax-pagination"></div>
</div>
排序表格
借助axList插件可实现简单的排序表格，使用方法如下。
- 1、table追加axList属性
- 2、table追加排序字段属性names
- 3、th使用sort=*属性，sort的值应该存在于names里，如果需要默认排序使用order=asc/desc
- 4、td使用排序属性
| 顺序 | 朝代 | 存在时间 |
|---|---|---|
| A | 唐朝 | 274年 |
| B | 宋朝 | 319年 |
| C | 元朝 | 97年 |
| D | 明朝 | 276年 |
<table class="ax-table" axList='names:"no,dynasty,life"'>
<thead>
<tr>
<th class="sort" sort="no">顺序<i class="ax-sort-arrow"></i></th>
<th class="sort" sort="dynasty">朝代<i class="ax-sort-arrow"></i></th>
<th class="sort" sort="life">存在时间<i class="ax-sort-arrow"></i></th>
</tr>
</thead>
<tbody list>
<tr>
<td no>A</td>
<td dynasty>唐朝</td>
<td><i life>274</i>年</td>
</tr>
<tr>
<td no>B</td>
<td dynasty>宋朝</td>
<td><i life>319</i>年</td>
</tr>
<tr>
<td no>C</td>
<td dynasty>元朝</td>
<td><i life>97</i>年</td>
</tr>
<tr>
<td no>D</td>
<td dynasty>明朝</td>
<td><i life>276</i>年</td>
</tr>
</tbody>
</table>
完全表格
借助axList插件可实现带工具栏而且带冻结的表格。以下示例在表格排序基础上增加冻结(左右冻结和头冻结)，关键字自动检索和操作按钮。注意事项如下：
- ax-table-tools、toolsleft、toolsright、ax-table-search、ax-table-button、ax-table-wrapper、ax-table、ax-pagination这些属性或类名是固化的，也就是说为了达到该效果请保持这个dom结构
- 如果需要在th上显示排序状态，需要追加<i class="ax-sort-arrow"></i>节点
- 表格本身也是一个列表，所以在用法上与ul+li列表一致
| 日期 | hour | 城市 | AQI | PM2.5 | PM2.5_24h | PM10 | PM10_24h | SO2 | SO2_24h | NO2 | NO2_24h | O3 | O3_24h | O3_8h | O3_8h_24h | CO | CO_24h |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 2014-04-13 | 28 | 张家界 | 103 | 77 | 67 | 105 | 87 | 8 | 13 | 15 | 14 | 81 | 114 | 86 | 109 | 1.637 | 1.372 |
| 2014-05-09 | 12 | 湘潭 | 84 | 62 | 53 | 104 | 92 | 44 | 52 | 49 | 42 | 76 | 129 | 93 | 139 | 1.127 | 1.198 |
| 2014-05-13 | 19 | 沧州 | 84 | 46 | 50 | 75 | 81 | 22 | 28 | 22 | 24 | 127 | 159 | 140 | 145 | 0.768 | 0.734 |
| 2014-06-10 | 10 | 淄博 | 83 | 48 | 48 | 114 | 126 | 54 | 100 | 47 | 51 | 138 | 150 | 137 | 137 | 1.324 | 1.632 |
| 2014-05-08 | 18 | 杭州 | 95 | 71 | 59 | 132 | 111 | 47 | 30 | 69 | 61 | 99 | 129 | 95 | 152 | 0.918 | 0.913 |
| 2014-05-06 | 14 | 赤峰 | 113 | 19 | 37 | 174 | 135 | 12 | 27 | 11 | 29 | 66 | 79 | 72 | 83 | 0.657 | 1.316 |
| 2014-05-13 | 18 | 福州 | 60 | 27 | 23 | 68 | 52 | 8 | 7 | 30 | 26 | 75 | 107 | 87 | 88 | 1.182 | 1.199 |
| 2014-05-17 | 23 | 舟山 | 74 | 31 | 51 | 38 | 66 | 8 | 12 | 33 | 38 | 116 | 178 | 128 | 146 | 1.141 | 1.351 |
| 2014-04-14 | 15 | 日照 | 121 | 76 | 65 | 169 | 155 | 30 | 48 | 43 | 66 | 240 | 240 | 180 | 180 | 0.871 | 1.376 |
| 2014-05-13 | 19 | 宝鸡 | 63 | 37 | 57 | 75 | 117 | 20 | 14 | 33 | 44 | 59 | 96 | 36 | 75 | 1.784 | 1.963 |
| 2014-03-23 | 19 | 韶关 | 78 | 57 | 42 | 73 | 57 | 45 | 25 | 44 | 29 | 34 | 42 | 31 | 49 | 2.705 | 2.188 |
| 2014-05-06 | 18 | 河源 | 22 | 13 | 35 | 22 | 55 | 9 | 15 | 33 | 34 | 35 | 59 | 37 | 39 | 1.225 | 1.356 |
<div axList="names:'date,hour,city,aqi,pm25,pm25d,pm10,pm10d,so2,so2d,no2,no2d,o3,o3d,o38,o38d,co,cod',pagination:{type:'pagesRight'}">
<div class="ax-table-tools">
<div toolsleft>
<div class="ax-table-search">
<div class="ax-row ax-input-group">
<div class="ax-flex-block">
<input placeholder="请输入关键字..." type="text" keyword auto>
<span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close" reset></a></span>
</div>
</div>
</div>
</div>
<div toolsright>
<div class="ax-table-button">
<span class="ax-btn-group"><a href="###" class="ax-btn" extend='item.aqi > 80 && item.so2 > 30'>aqi大于80且SO2大于30</a><a href="###" class="ax-btn" sort='date' order="asc">按日期排序</a><a href="###" class="ax-btn" filter='city:"州"'>显示“州”</a><a href="###" class="ax-btn" reset>重置</a></span>
</div>
</div>
</div>
<div class="ax-break"></div>
<div class="ax-table-wrapper" display="grid" style="height:30rem;" fixedheader fixedleft fixedright>
<table class="ax-table" nowrap>
<thead>
<tr>
<th sort="date">日期<i class="ax-sort-arrow"></i></th>
<th sort="hour">hour<i class="ax-sort-arrow"></i></th>
<th sort="city">城市<i class="ax-sort-arrow"></i></th>
<th sort="aqi">AQI<i class="ax-sort-arrow"></i></th>
<th sort="pm25">PM2.5<i class="ax-sort-arrow"></i></th>
<th sort="pm25d">PM2.5_24h<i class="ax-sort-arrow"></i></th>
<th sort="pm10">PM10<i class="ax-sort-arrow"></i></th>
<th sort="pm10d">PM10_24h<i class="ax-sort-arrow"></i></th>
<th sort="so2">SO2<i class="ax-sort-arrow"></i></th>
<th sort="so2d">SO2_24h<i class="ax-sort-arrow"></i></th>
<th sort="no2">NO2<i class="ax-sort-arrow"></i></th>
<th sort="no2d">NO2_24h<i class="ax-sort-arrow"></i></th>
<th sort="o3">O3<i class="ax-sort-arrow"></i></th>
<th sort="o3d">O3_24h<i class="ax-sort-arrow"></i></th>
<th sort="o38">O3_8h<i class="ax-sort-arrow"></i></th>
<th sort="o38d">O3_8h_24h<i class="ax-sort-arrow"></i></th>
<th sort="co">CO<i class="ax-sort-arrow"></i></th>
<th sort="cod">CO_24h<i class="ax-sort-arrow"></i></th>
</tr>
</thead>
<tbody list>
<tr>
<td date>2014-04-13</td>
<td hour>28</td>
<td city>张家界</td>
<td aqi>103</td>
<td pm25>77</td>
<td pm25d>67</td>
<td pm10>105</td>
<td pm10d>87</td>
<td so2>8</td>
<td so2d>13</td>
<td no2>15</td>
<td no2d>14</td>
<td o3>81</td>
<td o3d>114</td>
<td o38>86</td>
<td o38d>109</td>
<td co>1.637</td>
<td cod>1.372</td>
</tr>
<tr>
<td date>2014-05-09</td>
<td hour>12</td>
<td city>湘潭</td>
<td aqi>84</td>
<td pm25>62</td>
<td pm25d>53</td>
<td pm10>104</td>
<td pm10d>92</td>
<td so2>44</td>
<td so2d>52</td>
<td no2>49</td>
<td no2d>42</td>
<td o3>76</td>
<td o3d>129</td>
<td o38>93</td>
<td o38d>139</td>
<td co>1.127</td>
<td cod>1.198</td>
</tr>
<tr>
<td date>2014-05-13</td>
<td hour>19</td>
<td city>沧州</td>
<td aqi>84</td>
<td pm25>46</td>
<td pm25d>50</td>
<td pm10>75</td>
<td pm10d>81</td>
<td so2>22</td>
<td so2d>28</td>
<td no2>22</td>
<td no2d>24</td>
<td o3>127</td>
<td o3d>159</td>
<td o38>140</td>
<td o38d>145</td>
<td co>0.768</td>
<td cod>0.734</td>
</tr>
<tr>
<td date>2014-06-10</td>
<td hour>10</td>
<td city>淄博</td>
<td aqi>83</td>
<td pm25>48</td>
<td pm25d>48</td>
<td pm10>114</td>
<td pm10d>126</td>
<td so2>54</td>
<td so2d>100</td>
<td no2>47</td>
<td no2d>51</td>
<td o3>138</td>
<td o3d>150</td>
<td o38>137</td>
<td o38d>137</td>
<td co>1.324</td>
<td cod>1.632</td>
</tr>
<tr>
<td date>2014-05-08</td>
<td hour>18</td>
<td city>杭州</td>
<td aqi>95</td>
<td pm25>71</td>
<td pm25d>59</td>
<td pm10>132</td>
<td pm10d>111</td>
<td so2>47</td>
<td so2d>30</td>
<td no2>69</td>
<td no2d>61</td>
<td o3>99</td>
<td o3d>129</td>
<td o38>95</td>
<td o38d>152</td>
<td co>0.918</td>
<td cod>0.913</td>
</tr>
<tr>
<td date>2014-05-06</td>
<td hour>14</td>
<td city>赤峰</td>
<td aqi>113</td>
<td pm25>19</td>
<td pm25d>37</td>
<td pm10>174</td>
<td pm10d>135</td>
<td so2>12</td>
<td so2d>27</td>
<td no2>11</td>
<td no2d>29</td>
<td o3>66</td>
<td o3d>79</td>
<td o38>72</td>
<td o38d>83</td>
<td co>0.657</td>
<td cod>1.316</td>
</tr>
<tr>
<td date>2014-05-13</td>
<td hour>18</td>
<td city>福州</td>
<td aqi>60</td>
<td pm25>27</td>
<td pm25d>23</td>
<td pm10>68</td>
<td pm10d>52</td>
<td so2>8</td>
<td so2d>7</td>
<td no2>30</td>
<td no2d>26</td>
<td o3>75</td>
<td o3d>107</td>
<td o38>87</td>
<td o38d>88</td>
<td co>1.182</td>
<td cod>1.199</td>
</tr>
<tr>
<td date>2014-05-17</td>
<td hour>23</td>
<td city>舟山</td>
<td aqi>74</td>
<td pm25>31</td>
<td pm25d>51</td>
<td pm10>38</td>
<td pm10d>66</td>
<td so2>8</td>
<td so2d>12</td>
<td no2>33</td>
<td no2d>38</td>
<td o3>116</td>
<td o3d>178</td>
<td o38>128</td>
<td o38d>146</td>
<td co>1.141</td>
<td cod>1.351</td>
</tr>
<tr>
<td date>2014-04-14</td>
<td hour>15</td>
<td city>日照</td>
<td aqi>121</td>
<td pm25>76</td>
<td pm25d>65</td>
<td pm10>169</td>
<td pm10d>155</td>
<td so2>30</td>
<td so2d>48</td>
<td no2>43</td>
<td no2d>66</td>
<td o3>240</td>
<td o3d>240</td>
<td o38>180</td>
<td o38d>180</td>
<td co>0.871</td>
<td cod>1.376</td>
</tr>
<tr>
<td date>2014-05-13</td>
<td hour>19</td>
<td city>宝鸡</td>
<td aqi>63</td>
<td pm25>37</td>
<td pm25d>57</td>
<td pm10>75</td>
<td pm10d>117</td>
<td so2>20</td>
<td so2d>14</td>
<td no2>33</td>
<td no2d>44</td>
<td o3>59</td>
<td o3d>96</td>
<td o38>36</td>
<td o38d>75</td>
<td co>1.784</td>
<td cod>1.963</td>
</tr>
<tr>
<td date>2014-03-23</td>
<td hour>19</td>
<td city>韶关</td>
<td aqi>78</td>
<td pm25>57</td>
<td pm25d>42</td>
<td pm10>73</td>
<td pm10d>57</td>
<td so2>45</td>
<td so2d>25</td>
<td no2>44</td>
<td no2d>29</td>
<td o3>34</td>
<td o3d>42</td>
<td o38>31</td>
<td o38d>49</td>
<td co>2.705</td>
<td cod>2.188</td>
</tr>
<tr>
<td date>2014-05-06</td>
<td hour>18</td>
<td city>河源</td>
<td aqi>22</td>
<td pm25>13</td>
<td pm25d>35</td>
<td pm10>22</td>
<td pm10d>55</td>
<td so2>9</td>
<td so2d>15</td>
<td no2>33</td>
<td no2d>34</td>
<td o3>35</td>
<td o3d>59</td>
<td o38>37</td>
<td o38d>39</td>
<td co>1.225</td>
<td cod>1.356</td>
</tr>
</tbody>
</table>
</div>
<div class="ax-pagination"></div>
</div>
操作方法
插件内置多个操作方法，包括排序、筛选、搜索等。
- search关键字搜索，完整用法
search(names, value, source, operator, isSql)，支持五个参数： - names：检索的字段名，数组类型，例如：['title','click']
- value：关键字，字符串类型
- source：数据源，数组类型，可为空，默认为加载后列表的preData
- operator：运算符，字符串类型，可为空，默认为插件的
operator参数值，可填or或and - isSql：是否为sql检索方式，布尔值，默认为false，如果非sql方式可不填，如果是sql检索方式请填true
- 注意：如果isSql为true，source可直接为空，因为将从数据库直接获取数据
- filter条件筛选，完整用法
filter(data, source, operator, isSql)，支持四个参数： - data：筛选的条件，json对象类型，例如：{title:'china',click:56}
- source：数据源，数组类型，可为空，默认为加载后列表的preData
- operator：运算符，字符串类型，可为空，默认为插件的
operator参数值，可填or或and - isSql：是否为sql检索方式，布尔值，默认为false，如果非sql方式可不填，如果是sql检索方式请填true
- 注意：如果isSql为true，source和可operator直接为空，因为将从数据库直接获取数据，此时的data为sql语句，比如"title like %china%"
- sort排序，完整用法
sort(data, order, isSql)，支持三个参数： - data：排序字段，字符串类型，只能填写一个字段名
- order：排序方式，字符串类型，可填asc或desc，默认为插件的
order参数值， - isSql：是否为sql检索方式，布尔值，默认为false，如果非sql方式可不填，如果是sql检索方式请填true
- 注意：如果isSql为true，order直接为空，此时的data为sql语句，比如"order by click desc"
- extend自定义筛选，完整用法
extend(str, isSql)，支持两个参数： - str：筛选语句，字符串类型，是js中filter方法的检索条件写法，例如"item.title.includes('china') && item.click == 45"，语句中的项目名必须为
item - isSql：是否为sql检索方式，布尔值，默认为false，如果非sql方式可不填，如果是sql检索方式请填true
- 注意：如果isSql为true，此时的str为sql语句，比如"title like %china% order by click desc"
- updateSql用sql语句异步更新列表分页，完整用法
updateSql(extend, callback)，支持两个参数： - extend：更新sql的语句，格式为{extend:'title like %china% order by click desc'}
- callback：更新后的回调函数，支持两个参数current和pagesNum
- updatePages用参数同步更新列表分页，完整用法
updatePages(setting, callback)，支持两个参数： - setting：分页的参数，是对象类型，例如{count:10,current:2}
- callback：更新后的回调函数，支持两个参数current和pagesNum
- reset重置，完整用法
reset(isSql)，支持一个参数： - isSql：是否为sql检索方式，布尔值，默认为false，如果非sql方式可不填，如果是sql检索方式请填true
创建分页实例后可使用内置方法控制分页。因为axList内核是以axPagination为基础，所以在分页上操作与axPagination是一致的。
- pagination.first(callback):返回首页，支持
callback回调函数，回调函数参数为：当前页码current和总页码pagesNum - pagination.last(callback):返回尾页，支持
callback回调函数，回调函数参数为：当前页码current和总页码pagesNum - pagination.prev(callback):返回上一页，支持
callback回调函数，回调函数参数为：当前页码current和总页码pagesNum - pagination.next(callback):返回下一页，支持
callback回调函数，回调函数参数为：当前页码current和总页码pagesNum - pagination.go(page, callback):返回指定页码，page是指将要跳转的页码，支持callback回调函数，回调函数参数为：当前页码current和总页码
pagesNum - pagination.info(callback):获得分页实例信息，返回一个对象：{ current: '当前页码', pagesNum: '总页码', itemsNum: '每页数量', selectData: '当前页的节点数组' }，支持callback回调函数，回调函数参数为：当前页码current和总页码pagesNum
另外，插件中内置了若干变量，在插件运行中会因为操作引起修改和重置。
- this.preData:生成列表(包括seach/filter等操作)后的列表数组数据
- this.rawData:插件初始化后保存的原始列表数组数据
- this.rawOptions:插件初始化后保存的原始参数
- this.paginationDom:列表的分页导航节点
- this.template:渲染列表节点的模板
- this.options:插件实例的参数
- this.names:检索搜索操作的字段名数组
- this.listDom:列表节点的父节点
- this.searchs:实例中所有带search属性的节点
- this.keywords:实例中所有带keyword属性的节点
- this.sorts:实例中所有带sort属性的节点
- this.resets:实例中所有带reset属性的节点
- this.filters:实例中所有带filter属性的节点
- this.extends:实例中所有带extend属性的节点
- this.pagination:列表实例中的分页实例
-
<a href="###" class="ax-btn ax-primary" id="search">检索“本土”</a> <a href="###" class="ax-btn ax-primary" id="extend">包含“本土”点击大于100</a> <a href="###" class="ax-btn ax-primary" id="filter">包含“本土”点击等于841</a> <a href="###" class="ax-btn ax-primary" id="sort">按点击逆序</a> <a href="###" class="ax-btn ax-primary" id="page">一页四条</a> <a href="###" class="ax-btn ax-primary" id="reset">重置</a> <div class="ax-break"></div> <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> <a href="###" class="ax-btn ax-primary" id="varInfo">获取变量</a> <div class="ax-break"></div> <div id="optList"> <ul list></ul> </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 search = document.querySelector('#search'), extend = document.querySelector('#extend'), filter = document.querySelector('#filter'), sort = document.querySelector('#sort'), page = document.querySelector('#page'), reset = document.querySelector('#reset'), last = document.querySelector('#last'), prev = document.querySelector('#prev'), next = document.querySelector('#next'), info = document.querySelector('#info'), varInfo = document.querySelector('#varInfo'), optIns = new axList('#optList', { pagination: { data: data, template: tpl, } }); search.onclick = function () { //search(names, value, source, operator, isSql) optIns.search(['title'], '本土'); } extend.onclick = function () { //extend(str, isSql) optIns.extend('item.title.includes("本土") && item.click > 100'); } filter.onclick = function () { //filter(data, source, operator, isSql) optIns.filter({ title: '本土', click: 841 }); } sort.onclick = function () { //sort(data, order, isSql) optIns.sort('click','desc'); } reset.onclick = function () { optIns.reset(); } reset.onclick = function () { optIns.reset(); } first.onclick = function () { optIns.pagination.first(function (current) { console.log('返回首页！，页码是' + current) }) } last.onclick = function () { optIns.pagination.last(function (current) { console.log('返回尾页！，页码是' + current) }) } prev.onclick = function () { optIns.pagination.prev(function (current) { console.log('返回上一页！，页码是' + current) }) } next.onclick = function () { optIns.pagination.next(function (current) { console.log('返回下一页！，页码是' + current) }) } info.onclick = function () { console.log(optIns.pagination.info().selectData); alert(`当前页码是：${optIns.pagination.info().current}；总页码是：${optIns.pagination.info().pagesNum}；每页项目数是：${optIns.pagination.info().count}；总项目数是：${optIns.pagination.info().itemsNum}；当页数据使用F12查看！`) } varInfo.onclick = function () { console.log('获取了preData和pagination变量'); console.log(optIns.preData); console.log(optIns.pagination); }
监听事件
本插件有若干监听方法，以on为关键字，实例后监听和在参数中监听效果相同。格式是：instance.on('event',function(){})；具体事件说明如下：
onInit插件初始化后执行，支持current和pagesNum参数onUpdated/updated列表分页更新后执行，支持current和pagesNum参数sorted列表重新排序后执行，支持current和pagesNum参数reset列表重置后执行，无参数rendered列表筛选(包括search/filter/extend等操作)后执行，支持current和pagesNum参数
演示实例显示结果使用了console.log方法，请按下F12按键打开开发者工具中的“控制台”查看监听效果。
-
<a href="###" class="ax-btn ax-primary" id="btnSearch">检索“本土”</a> <a href="###" class="ax-btn ax-primary" id="btnExtend">包含“本土”点击大于100</a> <a href="###" class="ax-btn ax-primary" id="btnFilter">包含“本土”点击等于841</a> <a href="###" class="ax-btn ax-primary" id="btnSort">按点击逆序</a> <a href="###" class="ax-btn ax-primary" id="btnPage">一页四条</a> <a href="###" class="ax-btn ax-primary" id="btnReset">重置</a> <div class="ax-break"></div> <div id="onList"> <ul list></ul> </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 btnSearch = document.querySelector('#btnSearch'), btnExtend = document.querySelector('#btnExtend'), btnFilter = document.querySelector('#btnFilter'), btnSort = document.querySelector('#btnSort'), btnPage = document.querySelector('#btnPage'), btnReset = document.querySelector('#btnReset'), onIns = new axList('#onList', { pagination: { data: data, template: tpl, }, onInit: () => { console.log('初始化完成'); } }); btnSearch.onclick = function () { //search(names, value, source, operator, isSql) onIns.search(['title'], '本土'); } btnExtend.onclick = function () { //extend(str, isSql) onIns.extend('item.title.includes("本土") && item.click > 100'); } btnFilter.onclick = function () { //filter(data, source, operator, isSql) onIns.filter({ title: '本土', click: 841 }); } btnSort.onclick = function () { //sort(data, order, isSql) onIns.sort('click', 'desc'); } btnPage.onclick = function () { //updatePages方法的参数需要填写axPagination的参数 onIns.updatePages({count:4}); } btnReset.onclick = function () { onIns.reset(); } onIns.on('updated', function () { console.log('更新了分页'); }).on('sorted', function () { console.log('完成排序'); }).on('rendered', function () { console.log('完成筛选'); }).on('reset', function () { console.log('重置了列表'); });
参数选项
document.addEventListener("DOMContentLoaded", function() {
var demo1 = new axList('#id',{
insName: '',//实例名称，字符串格式；如果填写了实例名称，那么该实例会被添加到实例合集当中，通过axInstance方法可获取本实例，详细请查看：ax-utils-instance.php
names: '',//列表排序筛选的字段名，多个用英文逗号隔开
inputDelay: 200,//键入关键字检索时的时间时间，避免快速录入导致系统负荷
clickDelay: 500,//点击按钮时的延时时间，避免快速连续多次点击导致系统负荷
paginationDom: null,//分页的节点，id、className、节点名称或node
maxCount: 10000,//一页的最大项目数量
order: 'asc',//默认排序为顺序，对于有sort属性的按钮，没有指明order值那么将按该参数排序
operator: 'or',//多条件的默认操作符，默认为and，可选择or
paginationShow: true,//是否显示分页，默认true显示，如果为false表示不启用分页
onUpdated: '',//渲染完list和pagination节点后回调，支持current和pagesNum参数
onInit: '',//初始化后回调，支持current和pagesNum参数
breakpoints: {},//使用断点以适配终端，详情查看ax-utils-other.php页面
//以下为分页所需参数
pagination: {
count: 10, //每页item数量
data: [], //用于创建列表Dom的数组，据此创建分页
template: null, //数组转Dom的模板
async: '',//异步方式，选择从json文件获取数组数据，或选择sql从数据库获得数据
ajaxType: 'post',//异步提交的方式，默认post，可填get
loadingMode: 'overlay',//使用异步分页的加载效果，默认是overlay即浮在原列表上，可选择replace即清除列表显示转圈
//更多分页参数请参考axPagination
}
});
});
以axMenu插件为例，如果在元素上通过ax*使用属性，需要使用类似json的写法，属性不需要使用引号，如果值是字符串需要使用引号包裹，如果值是数字、布尔值、null或undefined不需要引号；比如要设置active，那么在元素的ax*属性中应该这样书写：axMenu="active:2"