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属性
<div axList>
<ul list>
    <li class="ax-info-block">
        <div class="ax-row">
            <div class="ax-col"><a href="##" class="ax-ell"><i>新加坡</i><i>Singapore</i>,南航与英航签署联营合作协议代码共享</a></div>
            <span class="ax-arrow"><i>26</i>次</span>
        </div>
    </li>
    <li class="ax-info-block">
        <div class="ax-row">
            <div class="ax-col"><a href="##" class="ax-ell"><i>英国</i><i>United Kingdom</i>,到英国大城小镇看“亮灯”</a></div>
            <span class="ax-arrow"><i>45</i>次</span>
        </div>
    </li>
    <li class="ax-info-block">
        <div class="ax-row">
            <div class="ax-col"><a href="##" class="ax-ell"><i>英国</i><i>United Kingdom</i>,英国人喝茶不再流行贵族范</a></div>
            <span class="ax-arrow"><i>234</i>次</span>
        </div>
    </li>
    <li class="ax-info-block">
        <div class="ax-row">
            <div class="ax-col"><a href="##" class="ax-ell"><i>西班牙</i><i>Spain</i>,西班牙斗牛与逗牛,精彩各不同</a></div>
            <span class="ax-arrow"><i>98</i>次</span>
        </div>
    </li>
    <li class="ax-info-block">
        <div class="ax-row">
            <div class="ax-col"><a href="##" class="ax-ell"><i>中国</i><i>China</i>,出了转广州拍照,朋友以为我去了澳洲旅游!</a></div>
            <span class="ax-arrow"><i>59</i>次</span>
        </div>
    </li>
    <li class="ax-info-block">
        <div class="ax-row">
            <div class="ax-col"><a href="##" class="ax-ell"><i>古巴</i><i>Cuba</i>,古巴自由行,在古巴旅游是一种怎样的体验?</a></div>
            <span class="ax-arrow"><i>217</i>次</span>
        </div>
    </li>
    <li class="ax-info-block">
        <div class="ax-row">
            <div class="ax-col"><a href="##" class="ax-ell"><i>中国</i><i>China</i>,道北,洛阳人熟悉又陌生的地方,如今新面貌</a></div>
            <span class="ax-arrow"><i>348</i>次</span>
        </div>
    </li>
    <li class="ax-info-block">
        <div class="ax-row">
            <div class="ax-col"><a href="##" class="ax-ell"><i>日本</i><i>Japan</i>,一边泡温泉一边看海景,来日本,体验独有的温泉文化 </a></div>
            <span class="ax-arrow"><i>148</i>次</span>
        </div>
    </li>
    <li class="ax-info-block">
        <div class="ax-row">
            <div class="ax-col"><a href="##" class="ax-ell"><i>韩国</i><i>Korea</i>,国际航线受阻,韩航空公司抢占国内航线 </a></div>
            <span class="ax-arrow"><i>219</i>次</span>
        </div>
    </li>
    <li class="ax-info-block">
        <div class="ax-row">
            <div class="ax-col"><a href="##" class="ax-ell"><i>印度</i><i>India</i>,巴厘岛“原始海滩”,海浪滔天,风景壮美,是绝佳的“冲浪秘境” </a></div>
            <span class="ax-arrow"><i>91</i>次</span>
        </div>
    </li>
    <li class="ax-info-block">
        <div class="ax-row">
            <div class="ax-col"><a href="##" class="ax-ell"><i>印尼</i><i>Indonesia</i>,印尼最活跃的活火山,导致一个王国毁灭,是最受欢迎旅游目的地 </a></div>
            <span class="ax-arrow"><i>118</i>次</span>
        </div>
    </li>
    <li class="ax-info-block">
        <div class="ax-row">
            <div class="ax-col"><a href="##" class="ax-ell"><i>马尔代夫</i><i>Maldives</i>,印尼最活跃的活火山,带上这篇旅游攻略,你才能知道马尔代夫有多美~ </a></div>
            <span class="ax-arrow"><i>315</i>次</span>
        </div>
    </li>
    <li class="ax-info-block">
        <div class="ax-row">
            <div class="ax-col"><a href="##" class="ax-ell"><i>泰国</i><i>Thailand</i>,泰国的清新小镇,被誉为泰国的小瑞士,风景优美闻名于世</a></div>
            <span class="ax-arrow"><i>124</i>次</span>
        </div>
    </li>
</ul>
<div class="ax-pagination"></div>
</div>
                            

使用js方法实现以上简单实例,使用了count=4和current=2参数。

  •                                         <div id="list">
                                                <ul list>
                                                    <li class="ax-info-block">
                                                        <div class="ax-row">
                                                            <div class="ax-col"><a href="##" class="ax-ell"><i>新加坡</i><i>Singapore</i>,南航与英航签署联营合作协议代码共享</a></div>
                                                            <span class="ax-arrow"><i>26</i>次</span>
                                                        </div>
                                                    </li>
                                                    <li class="ax-info-block">
                                                        <div class="ax-row">
                                                            <div class="ax-col"><a href="##" class="ax-ell"><i>英国</i><i>United Kingdom</i>,到英国大城小镇看“亮灯”</a></div>
                                                            <span class="ax-arrow"><i>45</i>次</span>
                                                        </div>
                                                    </li>
                                                    <li class="ax-info-block">
                                                        <div class="ax-row">
                                                            <div class="ax-col"><a href="##" class="ax-ell"><i>英国</i><i>United Kingdom</i>,英国人喝茶不再流行贵族范</a></div>
                                                            <span class="ax-arrow"><i>234</i>次</span>
                                                        </div>
                                                    </li>
                                                    <li class="ax-info-block">
                                                        <div class="ax-row">
                                                            <div class="ax-col"><a href="##" class="ax-ell"><i>西班牙</i><i>Spain</i>,西班牙斗牛与逗牛,精彩各不同</a></div>
                                                            <span class="ax-arrow"><i>98</i>次</span>
                                                        </div>
                                                    </li>
                                                    <li class="ax-info-block">
                                                        <div class="ax-row">
                                                            <div class="ax-col"><a href="##" class="ax-ell"><i>中国</i><i>China</i>,出了转广州拍照,朋友以为我去了澳洲旅游!</a></div>
                                                            <span class="ax-arrow"><i>59</i>次</span>
                                                        </div>
                                                    </li>
                                                    <li class="ax-info-block">
                                                        <div class="ax-row">
                                                            <div class="ax-col"><a href="##" class="ax-ell"><i>古巴</i><i>Cuba</i>,古巴自由行,在古巴旅游是一种怎样的体验?</a></div>
                                                            <span class="ax-arrow"><i>217</i>次</span>
                                                        </div>
                                                    </li>
                                                    <li class="ax-info-block">
                                                        <div class="ax-row">
                                                            <div class="ax-col"><a href="##" class="ax-ell"><i>中国</i><i>China</i>,道北,洛阳人熟悉又陌生的地方,如今新面貌</a></div>
                                                            <span class="ax-arrow"><i>348</i>次</span>
                                                        </div>
                                                    </li>
                                                    <li class="ax-info-block">
                                                        <div class="ax-row">
                                                            <div class="ax-col"><a href="##" class="ax-ell"><i>日本</i><i>Japan</i>,一边泡温泉一边看海景,来日本,体验独有的温泉文化 </a></div>
                                                            <span class="ax-arrow"><i>148</i>次</span>
                                                        </div>
                                                    </li>
                                                    <li class="ax-info-block">
                                                        <div class="ax-row">
                                                            <div class="ax-col"><a href="##" class="ax-ell"><i>韩国</i><i>Korea</i>,国际航线受阻,韩航空公司抢占国内航线 </a></div>
                                                            <span class="ax-arrow"><i>219</i>次</span>
                                                        </div>
                                                    </li>
                                                    <li class="ax-info-block">
                                                        <div class="ax-row">
                                                            <div class="ax-col"><a href="##" class="ax-ell"><i>印度</i><i>India</i>,巴厘岛“原始海滩”,海浪滔天,风景壮美,是绝佳的“冲浪秘境” </a></div>
                                                            <span class="ax-arrow"><i>91</i>次</span>
                                                        </div>
                                                    </li>
                                                    <li class="ax-info-block">
                                                        <div class="ax-row">
                                                            <div class="ax-col"><a href="##" class="ax-ell"><i>印尼</i><i>Indonesia</i>,印尼最活跃的活火山,导致一个王国毁灭,是最受欢迎旅游目的地 </a></div>
                                                            <span class="ax-arrow"><i>118</i>次</span>
                                                        </div>
                                                    </li>
                                                    <li class="ax-info-block">
                                                        <div class="ax-row">
                                                            <div class="ax-col"><a href="##" class="ax-ell"><i>马尔代夫</i><i>Maldives</i>,印尼最活跃的活火山,带上这篇旅游攻略,你才能知道马尔代夫有多美~ </a></div>
                                                            <span class="ax-arrow"><i>315</i>次</span>
                                                        </div>
                                                    </li>
                                                    <li class="ax-info-block">
                                                        <div class="ax-row">
                                                            <div class="ax-col"><a href="##" class="ax-ell"><i>泰国</i><i>Thailand</i>,泰国的清新小镇,被誉为泰国的小瑞士,风景优美闻名于世</a></div>
                                                            <span class="ax-arrow"><i>124</i>次</span>
                                                        </div>
                                                    </li>
                                                </ul>
                                                <div class="ax-pagination"></div>
                                                </div>
                                                
  •                                             let list = new axList('#list', {
                                                    count: 4,
                                                    current: 2,
                                                });
                                            

常规用法

除了常用的分页之外,常规使用功能包括:关键字检索、排序、选择某一类、显示全部等。使用上述方法的前提是使用names参数,也就是要指定排序和检索将基于什么属性名,该参数使用英文逗号隔开;另外要从列表中获得排序检索的数据需要给列表内的节点加上属性名字。

  • 1、如果需要进行关键字检索,请插入input并填入search属性。如果需要按指定属性检索,请填写for="key"属性,其中key是排序的字段名(来自names),举例:for="add,country"。
  • 2、如果需要按字段排序,对按钮可填入sort="key"属性。其中key是排序的字段名(来自names),举例sort="add";如果需要指定默认的排序方向可给按钮增加desc或asc属性。
  • 3、如果检索出指定内容,可对按钮填入filter="{key:text}"属性。其中key是字段名(来自names),text是检索的文字。
    • filter检索的属性可以是一个也可以是多个,如果是多个请使用js对象的写法,比如filter='{"country":"China","click":59}'
    • 如果检索多个属性,通过给input或按钮元素设置orand属性:'or'表示满足任意一条即可(默认),'and'表示必须同时满足。
  • 4、如果需要初始化列表,可对按钮填入reset属性,点击即可初始化。
                                <div axList data-valueNames='["add","country","click"]'>
                                    <div class="ax-grid ax-padding ax-space ax-split-2">
                                        <ul class="ax-grid-inner">
                                            <li class="ax-grid-block ax-col-9">
                                                <div class="ax-row ax-input-group">
                                                    <span class="ax-prefix">关键字</span>
                                                    <div class="ax-flex-block">
                                                        <input placeholder="自动筛选" type="text" search>
                                                        <span class="ax-pos-right"><a href="##" class="ax-iconfont ax-icon-close ax-val-none" reset></a></span>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="ax-grid-block ax-col-3">
                                                <a href="##" class="ax-btn ax-primary ax-full" data-sort="click">点击排列</a>
                                            </li>
                                            <li class="ax-grid-block ax-col-3">
                                                <a href="##" class="ax-btn ax-primary ax-full" data-sort="country">字母排列</a>
                                            </li>
                                            <li class="ax-grid-block ax-col-3">
                                                <a href="##" class="ax-btn ax-primary ax-full" data-sort="add">中文排列</a>
                                            </li>
                                            <li class="ax-grid-block ax-col-3">
                                                <a href="##" class="ax-btn ax-primary ax-full" filter="country:China">中国事件</a>
                                            </li>
                                            <li class="ax-grid-block ax-col-3">
                                                <a href="##" class="ax-btn ax-primary ax-full" reset>显示全部</a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div list>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i>新加坡</i><i>Singapore</i>,南航与英航签署联营合作协议代码共享</a></div>
                                                <span class="ax-arrow"><i>26</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i>英国</i><i>United Kingdom</i>,到英国大城小镇看“亮灯”</a></div>
                                                <span class="ax-arrow"><i>45</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i>英国</i><i>United Kingdom</i>,英国人喝茶不再流行贵族范</a></div>
                                                <span class="ax-arrow"><i>234</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i>西班牙</i><i>Spain</i>,西班牙斗牛与逗牛,精彩各不同</a></div>
                                                <span class="ax-arrow"><i>98</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i>中国</i><i>China</i>,出了转广州拍照,朋友以为我去了澳洲旅游!</a></div>
                                                <span class="ax-arrow"><i>59</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i>古巴</i><i>Cuba</i>,古巴自由行,在古巴旅游是一种怎样的体验?</a></div>
                                                <span class="ax-arrow"><i>217</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i>中国</i><i>China</i>,道北,洛阳人熟悉又陌生的地方,如今新面貌</a></div>
                                                <span class="ax-arrow"><i>348</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i>日本</i><i>Japan</i>,一边泡温泉一边看海景,来日本,体验独有的温泉文化 </a></div>
                                                <span class="ax-arrow"><i>148</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i>韩国</i><i>Korea</i>,国际航线受阻,韩航空公司抢占国内航线 </a></div>
                                                <span class="ax-arrow"><i>219</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i>印度</i><i>India</i>,巴厘岛“原始海滩”,海浪滔天,风景壮美,是绝佳的“冲浪秘境” </a></div>
                                                <span class="ax-arrow"><i>91</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i>印尼</i><i>Indonesia</i>,印尼最活跃的活火山,导致一个王国毁灭,是最受欢迎旅游目的地 </a></div>
                                                <span class="ax-arrow"><i>118</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i>马尔代夫</i><i>Maldives</i>,印尼最活跃的活火山,带上这篇旅游攻略,你才能知道马尔代夫有多美~ </a></div>
                                                <span class="ax-arrow"><i>315</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i>泰国</i><i>Thailand</i>,泰国的清新小镇,被誉为泰国的小瑞士,风景优美闻名于世</a></div>
                                                <span class="ax-arrow"><i>124</i>次</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ax-pagination"></div>
                                </div>
                            

Json异步数据

对于已存在页面的ul+li数据或者tbody+tr的数据能自动生成排序列表之外,也支持异步获取json数据创建排序列表。必须使用的参数有dataasynctemplate

  • data:填写json文件地址
  • async:是指异步方式,此处填写"json"
  • template:是指列表模板,填写#id或模板变量(js中使用)
                                <div axList data-valueNames='["add","country","click"]'>
                                    <div class="ax-grid ax-padding ax-space ax-split-2">
                                        <ul class="ax-grid-inner">
                                            <li class="ax-grid-block ax-col-9">
                                                <div class="ax-row ax-input-group">
                                                    <span class="ax-prefix">关键字</span>
                                                    <div class="ax-flex-block">
                                                        <input placeholder="自动筛选" type="text" search>
                                                        <span class="ax-pos-right"><a href="##" class="ax-iconfont ax-icon-close ax-val-none" reset></a></span>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="ax-grid-block ax-col-3">
                                                <a href="##" class="ax-btn ax-primary ax-full" data-sort="click">点击排列</a>
                                            </li>
                                            <li class="ax-grid-block ax-col-3">
                                                <a href="##" class="ax-btn ax-primary ax-full" data-sort="country">字母排列</a>
                                            </li>
                                            <li class="ax-grid-block ax-col-3">
                                                <a href="##" class="ax-btn ax-primary ax-full" data-sort="add">中文排列</a>
                                            </li>
                                            <li class="ax-grid-block ax-col-3">
                                                <a href="##" class="ax-btn ax-primary ax-full" filter="country:China">中国事件</a>
                                            </li>
                                            <li class="ax-grid-block ax-col-3">
                                                <a href="##" class="ax-btn ax-primary ax-full" reset>显示全部</a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div list>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i>新加坡</i><i>Singapore</i>,南航与英航签署联营合作协议代码共享</a></div>
                                                <span class="ax-arrow"><i>26</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i>英国</i><i>United Kingdom</i>,到英国大城小镇看“亮灯”</a></div>
                                                <span class="ax-arrow"><i>45</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i>英国</i><i>United Kingdom</i>,英国人喝茶不再流行贵族范</a></div>
                                                <span class="ax-arrow"><i>234</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i>西班牙</i><i>Spain</i>,西班牙斗牛与逗牛,精彩各不同</a></div>
                                                <span class="ax-arrow"><i>98</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i>中国</i><i>China</i>,出了转广州拍照,朋友以为我去了澳洲旅游!</a></div>
                                                <span class="ax-arrow"><i>59</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i>古巴</i><i>Cuba</i>,古巴自由行,在古巴旅游是一种怎样的体验?</a></div>
                                                <span class="ax-arrow"><i>217</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i>中国</i><i>China</i>,道北,洛阳人熟悉又陌生的地方,如今新面貌</a></div>
                                                <span class="ax-arrow"><i>348</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i>日本</i><i>Japan</i>,一边泡温泉一边看海景,来日本,体验独有的温泉文化 </a></div>
                                                <span class="ax-arrow"><i>148</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i>韩国</i><i>Korea</i>,国际航线受阻,韩航空公司抢占国内航线 </a></div>
                                                <span class="ax-arrow"><i>219</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i>印度</i><i>India</i>,巴厘岛“原始海滩”,海浪滔天,风景壮美,是绝佳的“冲浪秘境” </a></div>
                                                <span class="ax-arrow"><i>91</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i>印尼</i><i>Indonesia</i>,印尼最活跃的活火山,导致一个王国毁灭,是最受欢迎旅游目的地 </a></div>
                                                <span class="ax-arrow"><i>118</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i>马尔代夫</i><i>Maldives</i>,印尼最活跃的活火山,带上这篇旅游攻略,你才能知道马尔代夫有多美~ </a></div>
                                                <span class="ax-arrow"><i>315</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i>泰国</i><i>Thailand</i>,泰国的清新小镇,被誉为泰国的小瑞士,风景优美闻名于世</a></div>
                                                <span class="ax-arrow"><i>124</i>次</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ax-pagination"></div>
                                </div>
                            

Sql异步数据

如果数据比较庞大,不管是使用页面现有节点还是json异步都将明显感到性能下降。此时便需要使用sql异步数据方法。基本原理是:前端页面向后端页面发送数据请求(发送current和count),后端页面根据请求组装好数据发回前端。后端发回前端的数据只有一页而不是全部,通过页码或数据检索实现列表数据变化。

由于从数据库获取数据有些特殊,而且该方法一般用于管理系统之中。如果只是显示一个有分页的列表,那么用法跟json异步方法一致。使用方法如下:

  • data参数填写动态页面地址
  • async参数填写sql字符串
  • template参数数据模板Id
  • delay为可选参数,填了之后会显示缓冲加载效果

如果要使用操作方法,则需要填写更多参数,其核心原理是通过修改插件中dataExtend参数以改变向后台发送的数据指令,这些指令与sql语法息息相关,比如单纯的sql异步数据列表发送的current和count相当于拼接sql语句中的limit片段,而dataExtend将让sql语句进一步扩展以实现更复杂的检索。以axList使用方法为例:

  • 排序:基本语法是sort="order by click desc",多个排序规则可以是sort="order by click desc,enname asc";如果只有一种排序规则,那么可实现toggle效果。
  • 筛选:基本语法是filter="cnname like '%中国%'",多个筛选条件可以是filter="cnname like '%中国%' or enname like '%na%'"
  • 搜索:至少需要一个input和一个button结合使用,button格式是<a search="cnname,title" for="key"></a>,属性search的值是字段名,多个用英文逗号隔开;input格式是<input keyword="key">,两者key名需要一致。
  • 自定义:如果常规方法不能满足要求,可使用extend属性自定义sql检索条件,比如extend="enname like '%o%' order by click desc"
  • 重置:使用筛选或关键字搜索后会改变数据列表,可通过重置方法恢复列表初始状态。对按钮增加reset属性即可。

以上的按钮和input可以出现在axList中任意地方,也可以使用多个。

                                    <script type="text/template" id="sql">
                                        <li>
                                            <div class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="<% this.href %>" class="ax-ell"><% this.newstime %>,<% this.cnname %>,<% this.enname %>,<% this.title %></a></div>
                                                    <span class="ax-arrow"><% this.click %>次</span>
                                                </div>
                                            </div>
                                            <div class="ax-break-line"></div>
                                        </li>
                                    </script>
                                    <div axList data-data="ajax/sqlData.php" data-async="sql" data-template="#sql">
                                        <div class="ax-grid ax-padding ax-space ax-split-2">
                                            <ul class="ax-grid-inner">
                                                <li class="ax-grid-block ax-col-6">
                                                    <div class="ax-row ax-input-group">
                                                        <div class="ax-flex-block ax-with-suffix">
                                                            <input placeholder="输入关键字..." type="text" keyword="key">
                                                            <span class="ax-pos-right"><a href="##" class="ax-iconfont ax-icon-close ax-val-none" reset></a></span>
                                                        </div>
                                                        <a href="###" class="ax-suffix ax-btn ax-primary" search="cnname,enname,title" for="key">搜索</a>
                                                    </div>
                                                </li>
                                                <li class="ax-grid-block ax-col-3">
                                                    <a href="##" class="ax-btn ax-primary ax-full" sort="order by click desc">点击排序</a>
                                                </li>
                                                <li class="ax-grid-block ax-col-3">
                                                    <a href="##" class="ax-btn ax-primary ax-full" sort="order by newstime desc">日期排序</a>
                                                </li>
                                                <li class="ax-grid-block ax-col-3">
                                                    <a href="##" class="ax-btn ax-primary ax-full" sort="order by cnname desc">中文排序</a>
                                                </li>
                                                <li class="ax-grid-block ax-col-3">
                                                    <a href="##" class="ax-btn ax-primary ax-full" filter="cnname like '%中国%'">中国事件</a>
                                                </li>
                                                <li class="ax-grid-block ax-col-3">
                                                    <a href="##" class="ax-btn ax-primary ax-full" extend="enname like '%o%' order by click desc">自定义</a>
                                                </li>
                                                <li class="ax-grid-block ax-col-3">
                                                    <a href="##" class="ax-btn ax-primary ax-full" reset>初始化</a>
                                                </li>
                                            </ul>
                                        </div>
                                        <ul list></ul>
                                    </div>
                            

以上事例用js方法实现,并将button和input放在其他地方,如下:

  •                                     <div class="ax-grid ax-padding ax-space ax-split-2">
                                            <ul class="ax-grid-inner">
                                                <li class="ax-grid-block ax-col-6">
                                                    <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 ax-val-none" id="keyClear"></a></span>
                                                        </div>
                                                        <a href="###" class="ax-suffix ax-btn ax-primary" id="keySearch">搜索</a>
                                                    </div>
                                                </li>
                                                <li class="ax-grid-block ax-col-3">
                                                    <a href="##" class="ax-btn ax-primary ax-full" id="keySortClick">点击排序</a>
                                                </li>
                                                <li class="ax-grid-block ax-col-3">
                                                    <a href="##" class="ax-btn ax-primary ax-full" id="keySortDate">日期排序</a>
                                                </li>
                                                <li class="ax-grid-block ax-col-3">
                                                    <a href="##" class="ax-btn ax-primary ax-full" id="keySortName">中文排序</a>
                                                </li>
                                                <li class="ax-grid-block ax-col-3">
                                                    <a href="##" class="ax-btn ax-primary ax-full" id="keyFilter">中国事件</a>
                                                </li>
                                                <li class="ax-grid-block ax-col-3">
                                                    <a href="##" class="ax-btn ax-primary ax-full" id="keyExtend">自定义</a>
                                                </li>
                                                <li class="ax-grid-block ax-col-3">
                                                    <a href="##" class="ax-btn ax-primary ax-full" id="keyReset">初始化</a>
                                                </li>
                                            </ul>
                                        </div>
                                        <div id="keyIns">
                                            <ul list></ul>
                                        </div>
                                            
  •                                 let sqlTemplate = `
                                                <li>
                                                <div class="ax-info-block">
                                                    <div class="ax-row">
                                                        <div class="ax-col"><a href="<% this.href %>" class="ax-ell"><% this.newstime %>,<% this.cnname %>,<% this.enname %><% this.title %></a></div>
                                                        <span class="ax-arrow"><% this.click %>次</span>
                                                    </div>
                                                </div>
                                                <div class="ax-break-line"></div>
                                            </li>
                                
                                    `,
                                        keyInput = document.querySelector('#keyInput'),
                                        keyClear = document.querySelector('#keyClear'),
                                        keySearch = document.querySelector('#keySearch'),
                                        keySortClick = document.querySelector('#keySortClick'),
                                        keySortDate = document.querySelector('#keySortDate'),
                                        keySortName = document.querySelector('#keySortName'),
                                        keyFilter = document.querySelector('#keyFilter'),
                                        keyReset = document.querySelector('#keyReset'),
                                        keyIns = new axList('#keyIns', {
                                            data: 'ajax/sqlData.php',
                                            async: "sql",
                                            template: sqlTemplate,
                                        });
                                    keySortClick.onclick = function () {
                                        keyIns.updateSql({
                                            dataExtend: { sort: 'order by click desc' }
                                        }, function () {
                                            console.log('按点击数量降序!');
                                        });
                                    }
                                    keySortDate.onclick = function () {
                                        keyIns.updateSql({
                                            dataExtend: { sort: 'order by newstime desc' }
                                        }, function () {
                                            console.log('按日期降序!');
                                        });
                                    }
                                    keySortName.onclick = function () {
                                        keyIns.updateSql({
                                            dataExtend: { sort: 'order by cnname desc' }
                                        }, function () {
                                            console.log('按中文降序!');
                                        });
                                    }
                                    keyFilter.onclick = function () {
                                        keyIns.updateSql({
                                            dataExtend: { filter: "cnname like '%中国%'" }
                                        }, function () {
                                            console.log('检索“中国”的事件!');
                                        });
                                    }
                                    keyExtend.onclick = function () {
                                        keyIns.updateSql({
                                            dataExtend: { extend: "where enname like '%o%' order by click desc" }
                                        }, function () {
                                            console.log('自定义检索条件!');
                                        });
                                    }
                                    keyReset.onclick = function () {
                                        keyIns.updateSql({
                                            dataExtend: { reset: true }
                                        }, function () {
                                            console.log('重置列表!');
                                        });
                                    }
                                    keySearch.onclick = function () {
                                        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 () {
                                        keyInput.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插件默认分页,可以通过设置pagination:false来取消分页,也可以通过设置type参数展示不同风格的分页,关于分页的用法请参见axPagination

  • regular:默认展示方式,包含按钮导航和页码
  • group:regular基础上使用ax-group包裹
  • simple:最简单的展示方式,只有上一页和下一页
  • full:最全的展示方式,包含分页的全部功能
  • pagesRight:最全的展示方式,但是对统计跳转功能和页码分开放置,页码放在右侧
  • pagesLeft:最全的展示方式,但是对统计跳转功能和页码分开放置,页码放在左侧
  • pure:简约的纯页码展示方式
                                    <div axList data-type="regular">
                                        <ul list>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>新加坡</i><i>Singapore</i>,南航与英航签署联营合作协议代码共享</a></div>
                                                    <span class="ax-arrow"><i>26</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>英国</i><i>United Kingdom</i>,到英国大城小镇看“亮灯”</a></div>
                                                    <span class="ax-arrow"><i>45</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>英国</i><i>United Kingdom</i>,英国人喝茶不再流行贵族范</a></div>
                                                    <span class="ax-arrow"><i>234</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>西班牙</i><i>Spain</i>,西班牙斗牛与逗牛,精彩各不同</a></div>
                                                    <span class="ax-arrow"><i>98</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>中国</i><i>China</i>,出了转广州拍照,朋友以为我去了澳洲旅游!</a></div>
                                                    <span class="ax-arrow"><i>59</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>古巴</i><i>Cuba</i>,古巴自由行,在古巴旅游是一种怎样的体验?</a></div>
                                                    <span class="ax-arrow"><i>217</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>中国</i><i>China</i>,道北,洛阳人熟悉又陌生的地方,如今新面貌</a></div>
                                                    <span class="ax-arrow"><i>348</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>日本</i><i>Japan</i>,一边泡温泉一边看海景,来日本,体验独有的温泉文化 </a></div>
                                                    <span class="ax-arrow"><i>148</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>韩国</i><i>Korea</i>,国际航线受阻,韩航空公司抢占国内航线 </a></div>
                                                    <span class="ax-arrow"><i>219</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>印度</i><i>India</i>,巴厘岛“原始海滩”,海浪滔天,风景壮美,是绝佳的“冲浪秘境” </a></div>
                                                    <span class="ax-arrow"><i>91</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>印尼</i><i>Indonesia</i>,印尼最活跃的活火山,导致一个王国毁灭,是最受欢迎旅游目的地 </a></div>
                                                    <span class="ax-arrow"><i>118</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>马尔代夫</i><i>Maldives</i>,印尼最活跃的活火山,带上这篇旅游攻略,你才能知道马尔代夫有多美~ </a></div>
                                                    <span class="ax-arrow"><i>315</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>泰国</i><i>Thailand</i>,泰国的清新小镇,被誉为泰国的小瑞士,风景优美闻名于世</a></div>
                                                    <span class="ax-arrow"><i>124</i>次</span>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="ax-break-xl"></div>
                                    <div class="ax-break-line"></div>
                                    <div axList data-type="full">
                                        <ul list>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>新加坡</i><i>Singapore</i>,南航与英航签署联营合作协议代码共享</a></div>
                                                    <span class="ax-arrow"><i>26</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>英国</i><i>United Kingdom</i>,到英国大城小镇看“亮灯”</a></div>
                                                    <span class="ax-arrow"><i>45</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>英国</i><i>United Kingdom</i>,英国人喝茶不再流行贵族范</a></div>
                                                    <span class="ax-arrow"><i>234</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>西班牙</i><i>Spain</i>,西班牙斗牛与逗牛,精彩各不同</a></div>
                                                    <span class="ax-arrow"><i>98</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>中国</i><i>China</i>,出了转广州拍照,朋友以为我去了澳洲旅游!</a></div>
                                                    <span class="ax-arrow"><i>59</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>古巴</i><i>Cuba</i>,古巴自由行,在古巴旅游是一种怎样的体验?</a></div>
                                                    <span class="ax-arrow"><i>217</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>中国</i><i>China</i>,道北,洛阳人熟悉又陌生的地方,如今新面貌</a></div>
                                                    <span class="ax-arrow"><i>348</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>日本</i><i>Japan</i>,一边泡温泉一边看海景,来日本,体验独有的温泉文化 </a></div>
                                                    <span class="ax-arrow"><i>148</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>韩国</i><i>Korea</i>,国际航线受阻,韩航空公司抢占国内航线 </a></div>
                                                    <span class="ax-arrow"><i>219</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>印度</i><i>India</i>,巴厘岛“原始海滩”,海浪滔天,风景壮美,是绝佳的“冲浪秘境” </a></div>
                                                    <span class="ax-arrow"><i>91</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>印尼</i><i>Indonesia</i>,印尼最活跃的活火山,导致一个王国毁灭,是最受欢迎旅游目的地 </a></div>
                                                    <span class="ax-arrow"><i>118</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>马尔代夫</i><i>Maldives</i>,印尼最活跃的活火山,带上这篇旅游攻略,你才能知道马尔代夫有多美~ </a></div>
                                                    <span class="ax-arrow"><i>315</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>泰国</i><i>Thailand</i>,泰国的清新小镇,被誉为泰国的小瑞士,风景优美闻名于世</a></div>
                                                    <span class="ax-arrow"><i>124</i>次</span>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="ax-break-xl"></div>
                                    <div class="ax-break-line"></div>
                                    <div axList data-type="simple">
                                        <ul list>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>新加坡</i><i>Singapore</i>,南航与英航签署联营合作协议代码共享</a></div>
                                                    <span class="ax-arrow"><i>26</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>英国</i><i>United Kingdom</i>,到英国大城小镇看“亮灯”</a></div>
                                                    <span class="ax-arrow"><i>45</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>英国</i><i>United Kingdom</i>,英国人喝茶不再流行贵族范</a></div>
                                                    <span class="ax-arrow"><i>234</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>西班牙</i><i>Spain</i>,西班牙斗牛与逗牛,精彩各不同</a></div>
                                                    <span class="ax-arrow"><i>98</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>中国</i><i>China</i>,出了转广州拍照,朋友以为我去了澳洲旅游!</a></div>
                                                    <span class="ax-arrow"><i>59</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>古巴</i><i>Cuba</i>,古巴自由行,在古巴旅游是一种怎样的体验?</a></div>
                                                    <span class="ax-arrow"><i>217</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>中国</i><i>China</i>,道北,洛阳人熟悉又陌生的地方,如今新面貌</a></div>
                                                    <span class="ax-arrow"><i>348</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>日本</i><i>Japan</i>,一边泡温泉一边看海景,来日本,体验独有的温泉文化 </a></div>
                                                    <span class="ax-arrow"><i>148</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>韩国</i><i>Korea</i>,国际航线受阻,韩航空公司抢占国内航线 </a></div>
                                                    <span class="ax-arrow"><i>219</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>印度</i><i>India</i>,巴厘岛“原始海滩”,海浪滔天,风景壮美,是绝佳的“冲浪秘境” </a></div>
                                                    <span class="ax-arrow"><i>91</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>印尼</i><i>Indonesia</i>,印尼最活跃的活火山,导致一个王国毁灭,是最受欢迎旅游目的地 </a></div>
                                                    <span class="ax-arrow"><i>118</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>马尔代夫</i><i>Maldives</i>,印尼最活跃的活火山,带上这篇旅游攻略,你才能知道马尔代夫有多美~ </a></div>
                                                    <span class="ax-arrow"><i>315</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>泰国</i><i>Thailand</i>,泰国的清新小镇,被誉为泰国的小瑞士,风景优美闻名于世</a></div>
                                                    <span class="ax-arrow"><i>124</i>次</span>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="ax-break-xl"></div>
                                    <div class="ax-break-line"></div>
                                    <div axList data-type="pure">
                                        <ul list>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>新加坡</i><i>Singapore</i>,南航与英航签署联营合作协议代码共享</a></div>
                                                    <span class="ax-arrow"><i>26</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>英国</i><i>United Kingdom</i>,到英国大城小镇看“亮灯”</a></div>
                                                    <span class="ax-arrow"><i>45</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>英国</i><i>United Kingdom</i>,英国人喝茶不再流行贵族范</a></div>
                                                    <span class="ax-arrow"><i>234</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>西班牙</i><i>Spain</i>,西班牙斗牛与逗牛,精彩各不同</a></div>
                                                    <span class="ax-arrow"><i>98</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>中国</i><i>China</i>,出了转广州拍照,朋友以为我去了澳洲旅游!</a></div>
                                                    <span class="ax-arrow"><i>59</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>古巴</i><i>Cuba</i>,古巴自由行,在古巴旅游是一种怎样的体验?</a></div>
                                                    <span class="ax-arrow"><i>217</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>中国</i><i>China</i>,道北,洛阳人熟悉又陌生的地方,如今新面貌</a></div>
                                                    <span class="ax-arrow"><i>348</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>日本</i><i>Japan</i>,一边泡温泉一边看海景,来日本,体验独有的温泉文化 </a></div>
                                                    <span class="ax-arrow"><i>148</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>韩国</i><i>Korea</i>,国际航线受阻,韩航空公司抢占国内航线 </a></div>
                                                    <span class="ax-arrow"><i>219</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>印度</i><i>India</i>,巴厘岛“原始海滩”,海浪滔天,风景壮美,是绝佳的“冲浪秘境” </a></div>
                                                    <span class="ax-arrow"><i>91</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>印尼</i><i>Indonesia</i>,印尼最活跃的活火山,导致一个王国毁灭,是最受欢迎旅游目的地 </a></div>
                                                    <span class="ax-arrow"><i>118</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>马尔代夫</i><i>Maldives</i>,印尼最活跃的活火山,带上这篇旅游攻略,你才能知道马尔代夫有多美~ </a></div>
                                                    <span class="ax-arrow"><i>315</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>泰国</i><i>Thailand</i>,泰国的清新小镇,被誉为泰国的小瑞士,风景优美闻名于世</a></div>
                                                    <span class="ax-arrow"><i>124</i>次</span>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="ax-break-xl"></div>
                                    <div class="ax-break-line"></div>
                                    <div axList data-type="pagesLeft">
                                        <ul list>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>新加坡</i><i>Singapore</i>,南航与英航签署联营合作协议代码共享</a></div>
                                                    <span class="ax-arrow"><i>26</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>英国</i><i>United Kingdom</i>,到英国大城小镇看“亮灯”</a></div>
                                                    <span class="ax-arrow"><i>45</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>英国</i><i>United Kingdom</i>,英国人喝茶不再流行贵族范</a></div>
                                                    <span class="ax-arrow"><i>234</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>西班牙</i><i>Spain</i>,西班牙斗牛与逗牛,精彩各不同</a></div>
                                                    <span class="ax-arrow"><i>98</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>中国</i><i>China</i>,出了转广州拍照,朋友以为我去了澳洲旅游!</a></div>
                                                    <span class="ax-arrow"><i>59</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>古巴</i><i>Cuba</i>,古巴自由行,在古巴旅游是一种怎样的体验?</a></div>
                                                    <span class="ax-arrow"><i>217</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>中国</i><i>China</i>,道北,洛阳人熟悉又陌生的地方,如今新面貌</a></div>
                                                    <span class="ax-arrow"><i>348</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>日本</i><i>Japan</i>,一边泡温泉一边看海景,来日本,体验独有的温泉文化 </a></div>
                                                    <span class="ax-arrow"><i>148</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>韩国</i><i>Korea</i>,国际航线受阻,韩航空公司抢占国内航线 </a></div>
                                                    <span class="ax-arrow"><i>219</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>印度</i><i>India</i>,巴厘岛“原始海滩”,海浪滔天,风景壮美,是绝佳的“冲浪秘境” </a></div>
                                                    <span class="ax-arrow"><i>91</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>印尼</i><i>Indonesia</i>,印尼最活跃的活火山,导致一个王国毁灭,是最受欢迎旅游目的地 </a></div>
                                                    <span class="ax-arrow"><i>118</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>马尔代夫</i><i>Maldives</i>,印尼最活跃的活火山,带上这篇旅游攻略,你才能知道马尔代夫有多美~ </a></div>
                                                    <span class="ax-arrow"><i>315</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>泰国</i><i>Thailand</i>,泰国的清新小镇,被誉为泰国的小瑞士,风景优美闻名于世</a></div>
                                                    <span class="ax-arrow"><i>124</i>次</span>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="ax-break-xl"></div>
                                    <div class="ax-break-line"></div>
                                    <div axList data-type="pagesRight">
                                        <ul list>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>新加坡</i><i>Singapore</i>,南航与英航签署联营合作协议代码共享</a></div>
                                                    <span class="ax-arrow"><i>26</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>英国</i><i>United Kingdom</i>,到英国大城小镇看“亮灯”</a></div>
                                                    <span class="ax-arrow"><i>45</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>英国</i><i>United Kingdom</i>,英国人喝茶不再流行贵族范</a></div>
                                                    <span class="ax-arrow"><i>234</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>西班牙</i><i>Spain</i>,西班牙斗牛与逗牛,精彩各不同</a></div>
                                                    <span class="ax-arrow"><i>98</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>中国</i><i>China</i>,出了转广州拍照,朋友以为我去了澳洲旅游!</a></div>
                                                    <span class="ax-arrow"><i>59</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>古巴</i><i>Cuba</i>,古巴自由行,在古巴旅游是一种怎样的体验?</a></div>
                                                    <span class="ax-arrow"><i>217</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>中国</i><i>China</i>,道北,洛阳人熟悉又陌生的地方,如今新面貌</a></div>
                                                    <span class="ax-arrow"><i>348</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>日本</i><i>Japan</i>,一边泡温泉一边看海景,来日本,体验独有的温泉文化 </a></div>
                                                    <span class="ax-arrow"><i>148</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>韩国</i><i>Korea</i>,国际航线受阻,韩航空公司抢占国内航线 </a></div>
                                                    <span class="ax-arrow"><i>219</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>印度</i><i>India</i>,巴厘岛“原始海滩”,海浪滔天,风景壮美,是绝佳的“冲浪秘境” </a></div>
                                                    <span class="ax-arrow"><i>91</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>印尼</i><i>Indonesia</i>,印尼最活跃的活火山,导致一个王国毁灭,是最受欢迎旅游目的地 </a></div>
                                                    <span class="ax-arrow"><i>118</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>马尔代夫</i><i>Maldives</i>,印尼最活跃的活火山,带上这篇旅游攻略,你才能知道马尔代夫有多美~ </a></div>
                                                    <span class="ax-arrow"><i>315</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i>泰国</i><i>Thailand</i>,泰国的清新小镇,被誉为泰国的小瑞士,风景优美闻名于世</a></div>
                                                    <span class="ax-arrow"><i>124</i>次</span>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                

指定分页Dom

分页的节点默认是放在list下方,可通过设置paginationDom参数将分页放在任意的位置。该Dom需要使用ax-pagination样式进行美化

                                    <div axList data-paginationDom="#pages">
                                        <ul list>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i add>新加坡</i><i country>Singapore</i>,南航与英航签署联营合作协议代码共享</a></div>
                                                    <span class="ax-arrow"><i click>26</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i add>英国</i><i country>United Kingdom</i>,到英国大城小镇看“亮灯”</a></div>
                                                    <span class="ax-arrow"><i click>45</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i add>英国</i><i country>United Kingdom</i>,英国人喝茶不再流行贵族范</a></div>
                                                    <span class="ax-arrow"><i click>234</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i add>西班牙</i><i country>Spain</i>,西班牙斗牛与逗牛,精彩各不同</a></div>
                                                    <span class="ax-arrow"><i click>98</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i add>中国</i><i country>China</i>,出了转广州拍照,朋友以为我去了澳洲旅游!</a></div>
                                                    <span class="ax-arrow"><i click>59</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i add>古巴</i><i country>Cuba</i>,古巴自由行,在古巴旅游是一种怎样的体验?</a></div>
                                                    <span class="ax-arrow"><i click>217</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i add>中国</i><i country>China</i>,道北,洛阳人熟悉又陌生的地方,如今新面貌</a></div>
                                                    <span class="ax-arrow"><i click>348</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i add>日本</i><i country>Japan</i>,一边泡温泉一边看海景,来日本,体验独有的温泉文化 </a></div>
                                                    <span class="ax-arrow"><i click>148</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i add>韩国</i><i country>Korea</i>,国际航线受阻,韩航空公司抢占国内航线 </a></div>
                                                    <span class="ax-arrow"><i click>219</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i add>印度</i><i country>India</i>,巴厘岛“原始海滩”,海浪滔天,风景壮美,是绝佳的“冲浪秘境” </a></div>
                                                    <span class="ax-arrow"><i click>91</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i add>印尼</i><i country>Indonesia</i>,印尼最活跃的活火山,导致一个王国毁灭,是最受欢迎旅游目的地 </a></div>
                                                    <span class="ax-arrow"><i click>118</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i add>马尔代夫</i><i country>Maldives</i>,印尼最活跃的活火山,带上这篇旅游攻略,你才能知道马尔代夫有多美~ </a></div>
                                                    <span class="ax-arrow"><i click>315</i>次</span>
                                                </div>
                                            </li>
                                            <li class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><a href="##" class="ax-ell"><i add>泰国</i><i country>Thailand</i>,泰国的清新小镇,被誉为泰国的小瑞士,风景优美闻名于世</a></div>
                                                    <span class="ax-arrow"><i click>124</i>次</span>
                                                </div>
                                            </li>
                                        </ul>
                                        <div id="pages" class="ax-pagination"></div>
                                    </div>
                                                        

操作方法

创建分页实例后可使用内置方法控制分页。因为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
  •                                             <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">
                                                    <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-info-block">
                                    <div class="ax-row">
                                        <div class="ax-col"><a href="<% this.href %>" class="ax-ell"><% this.title %></a></div>
                                        <span class="ax-arrow"><% this.click %>次</span>
                                    </div>
                                </div>
                                <div class="ax-break-line"></div>
                            </li>
                                `
    
                            let first = document.querySelector('#first'),
                                last = document.querySelector('#last'),
                                prev = document.querySelector('#prev'),
                                next = document.querySelector('#next'),
                                info = document.querySelector('#info'),
                                optIns = new axList('#optList', {
                                    data: data,
                                    template: tpl,
                                });
                            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查看!`)
                            }
                                            

排序表格

借助axList插件可实现简单的排序表格,使用方法如下。

  • 1、table追加axList属性
  • 2、table追加排序字段属性names
  • 3、th使用sort="*"属性
  • 4、td使用排序属性
顺序 朝代 存在时间
A 唐朝 274年
B 宋朝 319年
C 元朝 97年
D 明朝 276年
                            <table class="ax-table ax-stripe" axList data-names="no,dynasty,life">
                                <thead>
                                <tr>
                                    <th class="sort" sort="no"><span>顺序</span></th>
                                    <th class="sort" sort="dynasty"><span>朝代</span></th>
                                    <th class="sort" sort="life"><span>存在时间</span></th>
                                </tr>
                                </thead>
                                <tbody list>
                                <tr>
                                    <td no>A</td>
                                    <td dynasty>唐朝</td>
                                    <td life>274年</td>
                                </tr>
                                <tr>
                                    <td no>B</td>
                                    <td dynasty>宋朝</td>
                                    <td life>319年</td>
                                </tr>
                                <tr>
                                    <td no>C</td>
                                    <td dynasty>元朝</td>
                                    <td life>97年</td>
                                </tr>
                                <tr>
                                    <td no>D</td>
                                    <td dynasty>明朝</td>
                                    <td life>276年</td>
                                </tr>

                                </tbody>
                            </table>
                

参数选项

document.addEventListener("DOMContentLoaded", function() {
  var demo1 = new axList('#id',{
    names: '',//列表排序筛选的字段名,多个用英文逗号隔开
    keyDelay: 200,//键入关键字检索时的演示,避免快速录入导致系统负荷
    paginationDom: null,//分页的节点,id、className、节点名称或node
    maxCount: 10000,//一页的最大项目数量
    pagination: true,//是否显示分页,默认true显示,如果为false表示不启用分页
    updated: function (current, pagesNum) {
        //渲染完list和pagination节点后回调,支持current和pagesNum参数
    },
    //以下为分页所需参数
    count: 10, //每页item数量
    current: 1, //当前页码
    firstText: '首页', //首页展示文字
    prevText: '上一页', //上一页展示文字
    nextText: '下一页', //下一页展示文字
    lastText: '尾页', //尾页展示文字
    allPages: false,//是否显示所有页码,默认否,可选择true显示全部页码
    data: [], //用于创建列表Dom的数组,据此创建分页
    template: null, //数组转Dom的模板
    type: 'regular', //分页导航风格,可选填regular,simple,full,pagesRight,pagesLeft,pure
    className: '',//给分页Dom追加class样式,比如:className: 'ax-align-right'
    lastDel: '', //删除当页最后一条某个节点,可以是className,id或node
    async: '',//异步方式,选择从json文件获取数组数据,或选择sql从数据库获得数据
    loadingMode: 'overlay',//使用异步分页的加载效果,默认是overlay即浮在原列表上,可选择replace即清除列表显示转圈
    delay: 0,//异步分页内容时延时加载
    dataExtend: '',//异步传递的数据对象扩展,除了current和count可以传递更多参数
    rendered: function (current, pagesNum) {
        //渲染完list和pagination节点后回调,支持current和pagesNum参数
    }
  });
});