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方法实现以上简单实例,使用了pagination.count=4和pagination.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', {
                                                    pagination:{
                                                        count: 4,
                                                        current: 2,
                                                    }
                                                });
                                            

常规用法

除了常用的分页之外,其他功能包括:自动检索,手动检索,关键字检索、自定义条件检索、排序、显示全部等。使用上述方法的前提是使用names参数,也就是要指定排序和检索将基于什么属性名,该参数使用英文逗号隔开。

  • 1、input自动检索。对input键入关键字便可自动检索。注意事项如下:
    • input需要使用keyword属性和auto属性
    • 默认对所有字段检索,如果需要按指定指定筛选,请填写input的keyword属性,多个字段用英文逗号隔开,,例如keyword='country,click'
    • 多字段检索条件运算符默认or,即满足一个条件即可,通过给input追加operator属性来改变检索条件运算符,例如operator='and'
    • 域内可以有多个这种input
  • 2、input手动检索。该方法需要input和按钮配合使用,即input输入关键字,点击按钮进行手动检索。注意事项如下:
    • input需要使用keyword属性和name属性
    • 按钮需要使用search属性和filed属性,field值等于input的name值,以此进行关联操作
    • 默认对所有字段检索,如果需要按指定指定筛选,请填写input的keyword属性,多个字段用英文逗号隔开,,例如keyword='country,click'
    • 多字段检索条件运算符默认or,即满足一个条件即可,通过给input追加operator属性来改变检索条件运算符,例如operator='and'
    • 域内可以有多对这种input+按钮组合
  • 3、列表排序。支持顺序和逆序,域内按钮只支持一个字段。注意事项如下:
    • 对按钮使用sort属性并填写一个字段名
    • 列表默认无序,点击后将按插件的order参数(默认asc)进行排序,如果需要改变第一次点击后的默认顺序,可对按钮使用order属性使用值(asc或desc)或者改变插件的order参数
    • 按钮的sort属性只能填写一个字段名
  • 4、关键字检索。通过filter属性自定义检索按钮。
    • 对按钮使用filter属性并以json格式至少填写一个键值对
    • filter属性的写法是json写法,即键值对的形式,支持一个或多个键值对,例如filter="key:text"或filter='country:"China",click:59'
    • filter的key是字段名,必须来自参数names,否则检索不到内容
    • 多字段检索条件运算符默认or,即满足一个条件即可,通过给按钮追加operator属性来改变检索条件运算符,例如operator='and'
  • 5、自定义条件检索。不同于filter按钮,extend按钮是通过项目筛选语句来检索内容。
    • 对按钮使用extend属性并填写检索语句,例如按arr.filter(item=>item.name == 'china')检索,那么extend="item.name == 'china'"
    • 按钮extend值中项目变量名必须是item,不能使用其他的变量名
  • 6、初始化列表。如果需要初始化列表,可对按钮填入reset属性,点击即可初始化。

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

                            <div axList='names:"add,country,click"'>
                                <ul class="ax-row ax-split ax-padding">
                                    <li class="ax-col ax-col-3">
                                        <div class="ax-row ax-input-group">
                                            <div class="ax-flex-block">
                                                <input placeholder="自动筛选" type="text" keyword auto>
                                                <span class="ax-pos-right"><a href="##" class="ax-iconfont ax-icon-close ax-val-none" reset></a></span>
                                            </div>
                                        </div>
                                    </li>
                                    <span class="ax-gutter"></span>
                                    <li class="ax-col ax-col-5">
                                        <div class="ax-row ax-input-group">
                                            <div class="ax-flex-block ax-with-suffix">
                                                <input placeholder="手动筛选..." type="text" name="key" keyword="add,country,click">
                                                <span class="ax-pos-right"><a href="##" class="ax-iconfont ax-icon-close ax-val-none" reset></a></span>
                                            </div>
                                            <a href="###" class="ax-suffix ax-btn ax-primary" search field="key">搜索</a>
                                        </div>
                                    </li>
                        
                                    <span class="ax-gutter"></span>
                                    <li class="ax-col  ax-col-3">
                                        <a href="##" class="ax-btn ax-primary ax-full" sort="click" order="desc">点击排列</a>
                                    </li>
                                    <span class="ax-gutter"></span>
                                    <li class="ax-col ax-col-3">
                                        <a href="##" class="ax-btn ax-primary ax-full" sort="add">中文排列</a>
                                    </li>
                                    <span class="ax-gutter"></span>
                                    <li class="ax-col ax-col-3">
                                        <a href="##" class="ax-btn ax-primary ax-full" filter='country:"China"'>中国事件</a>
                                    </li>
                                    <span class="ax-gutter"></span>
                                    <li class="ax-col ax-col-3">
                                        <a href="##" class="ax-btn ax-primary ax-full" extend="item.click > 200">自定义</a>
                                    </li>
                                    <span class="ax-gutter"></span>
                                    <li class="ax-col ax-col-2">
                                        <a href="##" class="ax-btn ax-primary ax-full" reset>全部</a>
                                    </li>
                                </ul>
                                <ul list>
                                    <li class="ax-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>,一边泡温泉一边看海景,来日本,体验独有的温泉文化</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>,巴厘岛“原始海滩”,海浪滔天,风景壮美,是绝佳的“冲浪秘境”</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>
                            

Json异步数据

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

  • pagination.data:填写json文件地址
  • pagination.async:是指异步方式,此处填写"json"
  • pagination.template:是指列表模板,填写#id或模板变量(js中使用)
                            <div axList='names:"title,click",pagination:{data:"ajax/list.json",async:"json",template:"#tpl"}'>
                                <ul class="ax-row ax-split ax-padding">
                                    <li class="ax-col ax-col-3">
                                        <div class="ax-row ax-input-group">
                                            <div class="ax-flex-block">
                                                <input placeholder="自动筛选" type="text" keyword auto>
                                                <span class="ax-pos-right"><a href="##" class="ax-iconfont ax-icon-close ax-val-none" reset></a></span>
                                            </div>
                                        </div>
                                    </li>
                                    <span class="ax-gutter"></span>
                                    <li class="ax-col ax-col-5">
                                        <div class="ax-row ax-input-group">
                                            <div class="ax-flex-block ax-with-suffix">
                                                <input placeholder="手动筛选..." type="text" name="key" keyword="title,click">
                                                <span class="ax-pos-right"><a href="##" class="ax-iconfont ax-icon-close ax-val-none" reset></a></span>
                                            </div>
                                            <a href="###" class="ax-suffix ax-btn ax-primary" search field="key">搜索</a>
                                        </div>
                                    </li>
                        
                                    <span class="ax-gutter"></span>
                                    <li class="ax-col  ax-col-3">
                                        <a href="##" class="ax-btn ax-primary ax-full" sort="click" order="desc">点击排列</a>
                                    </li>
                                    <span class="ax-gutter"></span>
                                    <li class="ax-col ax-col-3">
                                        <a href="##" class="ax-btn ax-primary ax-full" sort="title">中文排列</a>
                                    </li>
                                    <span class="ax-gutter"></span>
                                    <li class="ax-col ax-col-3">
                                        <a href="##" class="ax-btn ax-primary ax-full" filter='title:"北京"'>北京事件</a>
                                    </li>
                                    <span class="ax-gutter"></span>
                                    <li class="ax-col ax-col-3">
                                        <a href="##" class="ax-btn ax-primary ax-full" extend="item.click > 200">自定义</a>
                                    </li>
                                    <span class="ax-gutter"></span>
                                    <li class="ax-col ax-col-2">
                                        <a href="##" class="ax-btn ax-primary ax-full" reset>全部</a>
                                    </li>
                                </ul>
                                <ul list></ul>
                            </div>
                            

Sql异步数据

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

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

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

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

  • 1、input自动检索。对input键入关键字便可自动检索。注意事项如下:
    • input需要使用keyword属性和auto属性
    • 默认对所有字段检索,如果需要按指定指定筛选,请填写input的keyword属性,多个字段用英文逗号隔开,,例如keyword='country,click'
    • 多字段检索条件运算符默认or,即满足一个条件即可,通过给input追加operator属性来改变检索条件运算符,例如operator='and'
    • 域内可以有多个这种input
  • 2、input手动检索。该方法需要input和按钮配合使用,即input输入关键字,点击按钮进行手动检索。注意事项如下:
    • input需要使用keyword属性和name属性
    • 按钮需要使用search属性和filed属性,field值等于input的name值,以此进行关联操作
    • 默认对所有字段检索,如果需要按指定指定筛选,请填写input的keyword属性,多个字段用英文逗号隔开,,例如keyword='country,click'
    • 多字段检索条件运算符默认or,即满足一个条件即可,通过给input追加operator属性来改变检索条件运算符,例如operator='and'
    • 域内可以有多对这种input+按钮组合
  • 3、Sql排序。注意事项如下:
    • 对按钮使用sort属性
    • 基本语法是一条排序语句,例如sort="order by click desc",多个排序规则可以是sort="order by click desc,enname asc"
    • 如果只有一种排序规则,那么可实现toggle效果
  • 4、Sql筛选。注意事项如下:。
    • 对按钮使用filter属性
    • 基本语法是一条where语句,例如filter="cnname like '%中国%'",多个筛选条件可以是filter="cnname like '%中国%' or enname like '%na%'"
  • 5、Sql自定义检索。如果常规方法不能满足要求,可使用extend属性自定义sql检索条件,注意事项如下:
    • 对按钮使用extendd属性
    • 基本语法是一条select之后的sql语句,例如extend="enname like '%o%' order by click desc"
  • 6、初始化列表。如果需要初始化列表,可对按钮填入reset属性,点击即可初始化。

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

                                    <script type="text/template" id="sql">
                                        <li>
                                            <div class="ax-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='pagination:{data:"ajax/sqlData.php",async:"sql",template:"#sql"}'>
                                        <ul class="ax-row ax-split ax-padding">
                                            <li class="ax-col ax-col-3">
                                                <div class="ax-row ax-input-group">
                                                    <div class="ax-flex-block">
                                                        <input placeholder="自动筛选" type="text" keyword="cnname,enname,title" auto>
                                                        <span class="ax-pos-right"><a href="##" class="ax-iconfont ax-icon-close ax-val-none" reset></a></span>
                                                    </div>
                                                </div>
                                            </li>
                                            <span class="ax-gutter"></span>
                                            <li class="ax-col ax-col-5">
                                                <div class="ax-row ax-input-group">
                                                    <div class="ax-flex-block ax-with-suffix">
                                                        <input placeholder="手动筛选..." type="text" name="key" keyword="cnname,enname,title">
                                                        <span class="ax-pos-right"><a href="##" class="ax-iconfont ax-icon-close ax-val-none" reset></a></span>
                                                    </div>
                                                    <a href="###" class="ax-suffix ax-btn ax-primary" search field="key">搜索</a>
                                                </div>
                                            </li>
                                
                                            <span class="ax-gutter"></span>
                                            <li class="ax-col  ax-col-3">
                                                <a href="##" class="ax-btn ax-primary ax-full" sort="order by click desc">点击排序</a>
                                            </li>
                                            <span class="ax-gutter"></span>
                                            <li class="ax-col ax-col-3">
                                                <a href="##" class="ax-btn ax-primary ax-full" sort="order by cnname desc">中文排序</a>
                                            </li>
                                            <span class="ax-gutter"></span>
                                            <li class="ax-col ax-col-3">
                                                <a href="##" class="ax-btn ax-primary ax-full" filter="cnname like '%中国%'">中国事件</a>
                                            </li>
                                            <span class="ax-gutter"></span>
                                            <li class="ax-col ax-col-3">
                                                <a href="##" class="ax-btn ax-primary ax-full" extend="where enname like '%o%' order by click desc">自定义</a>
                                            </li>
                                            <span class="ax-gutter"></span>
                                            <li class="ax-col ax-col-2">
                                                <a href="##" class="ax-btn ax-primary ax-full" reset>全部</a>
                                            </li>
                                        </ul>
                                        <ul list></ul>
                                    </div>
                            

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

  •                                         <ul class="ax-row ax-split ax-padding">
                                                <li class="ax-col ax-col-3">
                                                    <div class="ax-row ax-input-group">
                                                        <div class="ax-flex-block">
                                                            <input placeholder="自动筛选" type="text" id="autoSearch">
                                                            <span class="ax-pos-right"><a href="##" class="ax-iconfont ax-icon-close ax-val-none" id="autoClear"></a></span>
                                                        </div>
                                                    </div>
                                                </li>
                                                <span class="ax-gutter"></span>
                                                <li class="ax-col ax-col-5">
                                                    <div class="ax-row ax-input-group">
                                                        <div class="ax-flex-block ax-with-suffix">
                                                            <input placeholder="手动筛选..." type="text" id="keyInput">
                                                            <span class="ax-pos-right"><a href="##" class="ax-iconfont ax-icon-close ax-val-none" id="keyClear"></a></span>
                                                        </div>
                                                        <a href="###" class="ax-suffix ax-btn ax-primary" id="keySearch">搜索</a>
                                                    </div>
                                                </li>
        
                                                <span class="ax-gutter"></span>
                                                <li class="ax-col ax-col-3">
                                                    <a href="##" class="ax-btn ax-primary ax-full" id="keySortClick">点击排序</a>
                                                </li>
                                                <span class="ax-gutter"></span>
                                                <li class="ax-col ax-col-3">
                                                    <a href="##" class="ax-btn ax-primary ax-full" id="keySortName">中文排序</a>
                                                </li>
                                                <span class="ax-gutter"></span>
                                                <li class="ax-col ax-col-3">
                                                    <a href="##" class="ax-btn ax-primary ax-full" id="keyFilter">中国事件</a>
                                                </li>
                                                <span class="ax-gutter"></span>
                                                <li class="ax-col ax-col-3">
                                                    <a href="##" class="ax-btn ax-primary ax-full" id="keyExtend">自定义</a>
                                                </li>
                                                <span class="ax-gutter"></span>
                                                <li class="ax-col ax-col-2">
                                                    <a href="##" class="ax-btn ax-primary ax-full" id="keyReset">全部</a>
                                                </li>
                                            </ul>
                                            <div id="keyIns">
                                                <ul list></ul>
                                            </div>
                                            
  •                                             let sqlTemplate = `
                                                <li>
                                                    <div class="ax-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>
                                                `,
                                                autoSearch = document.querySelector('#autoSearch'),
                                                autoClear = document.querySelector('#autoClear'),
                                                keyInput = document.querySelector('#keyInput'),
                                                keyClear = document.querySelector('#keyClear'),
                                                keySearch = document.querySelector('#keySearch'),
                                                keySortClick = document.querySelector('#keySortClick'),
                                                keySortName = document.querySelector('#keySortName'),
                                                keyFilter = document.querySelector('#keyFilter'),
                                                keyReset = document.querySelector('#keyReset'),
                                                keyIns = new axList('#keyIns', {
                                                    pagination: {
                                                        data: 'ajax/sqlData.php',
                                                        async: "sql",
                                                        template: sqlTemplate,
                                                    }
                                                });
                                            keySortClick.onclick = function () {
                                                //可使用axThrottle节流函数,避免频繁检索数据库
                                                keyIns.updateSql({
                                                    dataExtend: { sort: 'order by click desc' }
                                                }, function () {
                                                    console.log('按点击数量降序!');
                                                });
                                            }
                                            keySortName.onclick = function () {
                                                //可使用axThrottle节流函数,避免频繁检索数据库
                                                keyIns.updateSql({
                                                    dataExtend: { sort: 'order by cnname desc' }
                                                }, function () {
                                                    console.log('按中文降序!');
                                                });
                                            }
                                            keyFilter.onclick = function () {
                                                //可使用axThrottle节流函数,避免频繁检索数据库
                                                keyIns.updateSql({
                                                    dataExtend: { filter: "cnname like '%中国%'" }
                                                }, function () {
                                                    console.log('检索“中国”的事件!');
                                                });
                                            }
                                            keyExtend.onclick = function () {
                                                //可使用axThrottle节流函数,避免频繁检索数据库
                                                keyIns.updateSql({
                                                    dataExtend: { extend: "where enname like '%o%' order by click desc" }
                                                }, function () {
                                                    console.log('自定义检索条件!');
                                                });
                                            }
                                            keyReset.onclick = function () {
                                                //可使用axThrottle节流函数,避免频繁检索数据库
                                                keyIns.updateSql({
                                                    dataExtend: { reset: true }
                                                }, function () {
                                                    console.log('重置列表!');
                                                });
                                            }
                                            keySearch.onclick = function () {
                                                //可使用axThrottle节流函数,避免频繁检索数据库
                                                keyIns.updateSql({
                                                    dataExtend: { search: "cnname like '%" + keyInput.value + "%' or enname like '%" + keyInput.value + "%' or title like '%" + keyInput.value + "%'" }
                                                }, function () {
                                                    console.log('关键字搜索完成!');
                                                });
                                            }
                                            keyInput.onkeyup = function (e) {
                                                //回车键代码是13
                                                if (e.keyCode === 13) {
                                                    keySearch.click();
                                                }
                                            }
                                            keyClear.onclick = function () {
                                                //可使用axThrottle节流函数,避免频繁检索数据库
                                                keyInput.value = '';
                                                keyIns.updateSql({
                                                    dataExtend: { reset: true }
                                                }, function () {
                                                    console.log('重置列表!');
                                                });
                                            }
                                            autoSearch.oninput = function (e) {
                                                //可使用axDebounce防抖函数,避免频繁检索数据库
                                                keyIns.updateSql({
                                                    dataExtend: { search: "cnname like '%" + this.value + "%' or enname like '%" + this.value + "%' or title like '%" + this.value + "%'" }
                                                }, function () {
                                                    console.log('关键字搜索完成!');
                                                });
                                            }
                                            autoClear.onclick = function () {
                                                autoSearch.value = '';
                                                keyIns.updateSql({
                                                    dataExtend: { reset: true }
                                                }, function () {
                                                    console.log('重置列表!');
                                                });
                                            }
                                            
  • <?php
    header("Content-Type:text/plain;charset=utf-8");
    //连接数据库,数据库用户自己定义
    $server="localhost";
    $username="admin";
    $password="123456";
    $database="axui";
    $table = 'news';
    $connect = mysql_connect($server,$username,$password) or die("数据库链接错误");
    mysql_select_db($database,$connect);
    mysql_query("set names 'utf8'");
    
    //解析post过来的data
    $extend = isset($_POST[extend])?$_POST[extend]:'';
    $sort = isset($_POST[sort])?$_POST[sort]:'';
    $filter = isset($_POST[filter])?$_POST[filter]:'';
    $search = isset($_POST[search])?$_POST[search]:'';
    if($extend){
    	$where = $extend;
    }else if($filter || $search){
    	$where = 'where '.$search.' '.$filter;
    }else{
    	$where ='';
    }
    
    //修正current,并获取pagesNum和itemsNum
    $getNum = mysql_query("select * from {$table} {$where}");
    $itemsNum = mysql_num_rows($getNum);
    $divisor = $itemsNum / $_POST[count];
    $pagesNum =  (strpos($divisor, '.') == false) ? $divisor : (floor($divisor) + 1);
    $current =  '';
    if($_POST[current] < 1){
    	$current = 1;
    }else if($_POST[current]  > $pagesNum){
    	$current= $pagesNum;
    }else{
    	$current = $_POST[current];
    }
    //如果检索结果行数为0,那么itemsNum,pagesNum和current都为0
    $start = $current?$_POST[count] * ($current - 1):0;
    
    //检索最终数据
    $sqlString="select * from {$table} {$where} {$sort} limit {$start},{$_POST[count]}";
    $sql=mysql_query($sqlString);
    
    //根据数据生成对象数组
    $result = array();
    while ($row = mysql_fetch_object($sql)){
        array_push($result,$row);
    }
    //输出,将current、pagesNum和itemsNum拼接进对象,最终返回类似{dom:[{},{}...],current:1,pagesNum:10,itemsNum:100}
    $object = array('data' => $result,'current' => $current, 'pagesNum' => $pagesNum, 'itemsNum' => $itemsNum);
    $success = json_encode($object);
    echo $success;
    
    ?>
                                                

分页

使用List插件默认分页,可以通过设置paginationShow:false来取消分页,也可以通过设置type参数展示不同风格的分页,关于分页的用法请参见axPagination

  • regular:默认展示方式,包含按钮导航和页码
  • group:regular基础上使用ax-group包裹
  • simple:最简单的展示方式,只有上一页和下一页
  • full:最全的展示方式,包含分页的全部功能
  • pagesRight:最全的展示方式,但是对统计跳转功能和页码分开放置,页码放在右侧
  • pagesLeft:最全的展示方式,但是对统计跳转功能和页码分开放置,页码放在左侧
  • pure:简约的纯页码展示方式
                                    <div axList='pagination:{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='pagination:{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='pagination:{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='pagination:{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='pagination:{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='pagination:{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='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插件可实现简单的排序表格,使用方法如下。

  • 1、table追加axList属性
  • 2、table追加排序字段属性names
  • 3、th使用sort=*属性,sort的值应该存在于names里,如果需要默认排序使用order=asc/desc
  • 4、td使用排序属性
顺序 朝代 存在时间
A 唐朝 274
B 宋朝 319
C 元朝 97
D 明朝 276
                                <table class="ax-table" axList='names:"no,dynasty,life"'>
                                    <thead>
                                    <tr>
                                        <th class="sort" sort="no">顺序<i class="ax-sort-arrow"></i></th>
                                        <th class="sort" sort="dynasty">朝代<i class="ax-sort-arrow"></i></th>
                                        <th class="sort" sort="life">存在时间<i class="ax-sort-arrow"></i></th>
                                    </tr>
                                    </thead>
                                    <tbody list>
                                    <tr>
                                        <td no>A</td>
                                        <td dynasty>唐朝</td>
                                        <td><i life>274</i>年</td>
                                    </tr>
                                    <tr>
                                        <td no>B</td>
                                        <td dynasty>宋朝</td>
                                        <td><i life>319</i>年</td>
                                    </tr>
                                    <tr>
                                        <td no>C</td>
                                        <td dynasty>元朝</td>
                                        <td><i life>97</i>年</td>
                                    </tr>
                                    <tr>
                                        <td no>D</td>
                                        <td dynasty>明朝</td>
                                        <td><i life>276</i>年</td>
                                    </tr>
                                    </tbody>
                                </table>
                

完全表格

借助axList插件可实现带工具栏而且带冻结的表格。以下示例在表格排序基础上增加冻结(左右冻结和头冻结),关键字自动检索和操作按钮。注意事项如下:

  • ax-table-tools、toolsleft、toolsright、ax-table-search、ax-table-button、ax-table-wrapper、ax-table、ax-pagination这些属性或类名是固化的,也就是说为了达到该效果请保持这个dom结构
  • 如果需要在th上显示排序状态,需要追加<i class="ax-sort-arrow"></i>节点
  • 表格本身也是一个列表,所以在用法上与ul+li列表一致
日期 hour 城市 AQI PM2.5 PM2.5_24h PM10 PM10_24h SO2 SO2_24h NO2 NO2_24h O3 O3_24h O3_8h O3_8h_24h CO CO_24h
2014-04-13 28 张家界 103 77 67 105 87 8 13 15 14 81 114 86 109 1.637 1.372
2014-05-09 12 湘潭 84 62 53 104 92 44 52 49 42 76 129 93 139 1.127 1.198
2014-05-13 19 沧州 84 46 50 75 81 22 28 22 24 127 159 140 145 0.768 0.734
2014-06-10 10 淄博 83 48 48 114 126 54 100 47 51 138 150 137 137 1.324 1.632
2014-05-08 18 杭州 95 71 59 132 111 47 30 69 61 99 129 95 152 0.918 0.913
2014-05-06 14 赤峰 113 19 37 174 135 12 27 11 29 66 79 72 83 0.657 1.316
2014-05-13 18 福州 60 27 23 68 52 8 7 30 26 75 107 87 88 1.182 1.199
2014-05-17 23 舟山 74 31 51 38 66 8 12 33 38 116 178 128 146 1.141 1.351
2014-04-14 15 日照 121 76 65 169 155 30 48 43 66 240 240 180 180 0.871 1.376
2014-05-13 19 宝鸡 63 37 57 75 117 20 14 33 44 59 96 36 75 1.784 1.963
2014-03-23 19 韶关 78 57 42 73 57 45 25 44 29 34 42 31 49 2.705 2.188
2014-05-06 18 河源 22 13 35 22 55 9 15 33 34 35 59 37 39 1.225 1.356
                                    <div axList="names:'date,hour,city,aqi,pm25,pm25d,pm10,pm10d,so2,so2d,no2,no2d,o3,o3d,o38,o38d,co,cod',pagination:{type:'pagesRight'}">
                                        <div class="ax-table-tools">
                                            <div toolsleft>
                                                <div class="ax-table-search">
                                                    <input placeholder="请输入关键字..." type="text" keyword auto><i reset></i>
                                                </div>
                                            </div>
                                            <div toolsright>
                                                <div class="ax-table-button">
                                                    <span class="ax-btn-group"><a href="###" class="ax-btn" extend='item.aqi > 80 && item.so2 > 30'>aqi大于80且SO2大于30</a><a href="###" class="ax-btn" sort='date' order="asc">按日期排序</a><a href="###" class="ax-btn" filter='city:"州"'>显示“州”</a><a href="###" class="ax-btn" reset>重置</a></span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="ax-break"></div>
                                        <div class="ax-table-wrapper" display="grid" style="height:30rem;" fixedheader fixedleft fixedright>
                                            <table class="ax-table" nowrap>
                                                <thead>
                                                    <tr>
                                                        <th sort="date">日期<i class="ax-sort-arrow"></i></th>
                                                        <th sort="hour">hour<i class="ax-sort-arrow"></i></th>
                                                        <th sort="city">城市<i class="ax-sort-arrow"></i></th>
                                                        <th sort="aqi">AQI<i class="ax-sort-arrow"></i></th>
                                                        <th sort="pm25">PM2.5<i class="ax-sort-arrow"></i></th>
                                                        <th sort="pm25d">PM2.5_24h<i class="ax-sort-arrow"></i></th>
                                                        <th sort="pm10">PM10<i class="ax-sort-arrow"></i></th>
                                                        <th sort="pm10d">PM10_24h<i class="ax-sort-arrow"></i></th>
                                                        <th sort="so2">SO2<i class="ax-sort-arrow"></i></th>
                                                        <th sort="so2d">SO2_24h<i class="ax-sort-arrow"></i></th>
                                                        <th sort="no2">NO2<i class="ax-sort-arrow"></i></th>
                                                        <th sort="no2d">NO2_24h<i class="ax-sort-arrow"></i></th>
                                                        <th sort="o3">O3<i class="ax-sort-arrow"></i></th>
                                                        <th sort="o3d">O3_24h<i class="ax-sort-arrow"></i></th>
                                                        <th sort="o38">O3_8h<i class="ax-sort-arrow"></i></th>
                                                        <th sort="o38d">O3_8h_24h<i class="ax-sort-arrow"></i></th>
                                                        <th sort="co">CO<i class="ax-sort-arrow"></i></th>
                                                        <th sort="cod">CO_24h<i class="ax-sort-arrow"></i></th>
                                                    </tr>
                                                </thead>
                                                <tbody list>
                                                    <tr>
                                                        <td date>2014-04-13</td>
                                                        <td hour>28</td>
                                                        <td city>张家界</td>
                                                        <td aqi>103</td>
                                                        <td pm25>77</td>
                                                        <td pm25d>67</td>
                                                        <td pm10>105</td>
                                                        <td pm10d>87</td>
                                                        <td so2>8</td>
                                                        <td so2d>13</td>
                                                        <td no2>15</td>
                                                        <td no2d>14</td>
                                                        <td o3>81</td>
                                                        <td o3d>114</td>
                                                        <td o38>86</td>
                                                        <td o38d>109</td>
                                                        <td co>1.637</td>
                                                        <td cod>1.372</td>
                                                    </tr>
                                                    <tr>
                                                        <td date>2014-05-09</td>
                                                        <td hour>12</td>
                                                        <td city>湘潭</td>
                                                        <td aqi>84</td>
                                                        <td pm25>62</td>
                                                        <td pm25d>53</td>
                                                        <td pm10>104</td>
                                                        <td pm10d>92</td>
                                                        <td so2>44</td>
                                                        <td so2d>52</td>
                                                        <td no2>49</td>
                                                        <td no2d>42</td>
                                                        <td o3>76</td>
                                                        <td o3d>129</td>
                                                        <td o38>93</td>
                                                        <td o38d>139</td>
                                                        <td co>1.127</td>
                                                        <td cod>1.198</td>
                                                    </tr>
                                                    <tr>
                                                        <td date>2014-05-13</td>
                                                        <td hour>19</td>
                                                        <td city>沧州</td>
                                                        <td aqi>84</td>
                                                        <td pm25>46</td>
                                                        <td pm25d>50</td>
                                                        <td pm10>75</td>
                                                        <td pm10d>81</td>
                                                        <td so2>22</td>
                                                        <td so2d>28</td>
                                                        <td no2>22</td>
                                                        <td no2d>24</td>
                                                        <td o3>127</td>
                                                        <td o3d>159</td>
                                                        <td o38>140</td>
                                                        <td o38d>145</td>
                                                        <td co>0.768</td>
                                                        <td cod>0.734</td>
                                                    </tr>
                                                    <tr>
                                                        <td date>2014-06-10</td>
                                                        <td hour>10</td>
                                                        <td city>淄博</td>
                                                        <td aqi>83</td>
                                                        <td pm25>48</td>
                                                        <td pm25d>48</td>
                                                        <td pm10>114</td>
                                                        <td pm10d>126</td>
                                                        <td so2>54</td>
                                                        <td so2d>100</td>
                                                        <td no2>47</td>
                                                        <td no2d>51</td>
                                                        <td o3>138</td>
                                                        <td o3d>150</td>
                                                        <td o38>137</td>
                                                        <td o38d>137</td>
                                                        <td co>1.324</td>
                                                        <td cod>1.632</td>
                                                    </tr>
                                                    <tr>
                                                        <td date>2014-05-08</td>
                                                        <td hour>18</td>
                                                        <td city>杭州</td>
                                                        <td aqi>95</td>
                                                        <td pm25>71</td>
                                                        <td pm25d>59</td>
                                                        <td pm10>132</td>
                                                        <td pm10d>111</td>
                                                        <td so2>47</td>
                                                        <td so2d>30</td>
                                                        <td no2>69</td>
                                                        <td no2d>61</td>
                                                        <td o3>99</td>
                                                        <td o3d>129</td>
                                                        <td o38>95</td>
                                                        <td o38d>152</td>
                                                        <td co>0.918</td>
                                                        <td cod>0.913</td>
                                                    </tr>
                                                    <tr>
                                                        <td date>2014-05-06</td>
                                                        <td hour>14</td>
                                                        <td city>赤峰</td>
                                                        <td aqi>113</td>
                                                        <td pm25>19</td>
                                                        <td pm25d>37</td>
                                                        <td pm10>174</td>
                                                        <td pm10d>135</td>
                                                        <td so2>12</td>
                                                        <td so2d>27</td>
                                                        <td no2>11</td>
                                                        <td no2d>29</td>
                                                        <td o3>66</td>
                                                        <td o3d>79</td>
                                                        <td o38>72</td>
                                                        <td o38d>83</td>
                                                        <td co>0.657</td>
                                                        <td cod>1.316</td>
                                                    </tr>
                                                    <tr>
                                                        <td date>2014-05-13</td>
                                                        <td hour>18</td>
                                                        <td city>福州</td>
                                                        <td aqi>60</td>
                                                        <td pm25>27</td>
                                                        <td pm25d>23</td>
                                                        <td pm10>68</td>
                                                        <td pm10d>52</td>
                                                        <td so2>8</td>
                                                        <td so2d>7</td>
                                                        <td no2>30</td>
                                                        <td no2d>26</td>
                                                        <td o3>75</td>
                                                        <td o3d>107</td>
                                                        <td o38>87</td>
                                                        <td o38d>88</td>
                                                        <td co>1.182</td>
                                                        <td cod>1.199</td>
                                                    </tr>
                                                    <tr>
                                                        <td date>2014-05-17</td>
                                                        <td hour>23</td>
                                                        <td city>舟山</td>
                                                        <td aqi>74</td>
                                                        <td pm25>31</td>
                                                        <td pm25d>51</td>
                                                        <td pm10>38</td>
                                                        <td pm10d>66</td>
                                                        <td so2>8</td>
                                                        <td so2d>12</td>
                                                        <td no2>33</td>
                                                        <td no2d>38</td>
                                                        <td o3>116</td>
                                                        <td o3d>178</td>
                                                        <td o38>128</td>
                                                        <td o38d>146</td>
                                                        <td co>1.141</td>
                                                        <td cod>1.351</td>
                                                    </tr>
                                                    <tr>
                                                        <td date>2014-04-14</td>
                                                        <td hour>15</td>
                                                        <td city>日照</td>
                                                        <td aqi>121</td>
                                                        <td pm25>76</td>
                                                        <td pm25d>65</td>
                                                        <td pm10>169</td>
                                                        <td pm10d>155</td>
                                                        <td so2>30</td>
                                                        <td so2d>48</td>
                                                        <td no2>43</td>
                                                        <td no2d>66</td>
                                                        <td o3>240</td>
                                                        <td o3d>240</td>
                                                        <td o38>180</td>
                                                        <td o38d>180</td>
                                                        <td co>0.871</td>
                                                        <td cod>1.376</td>
                                                    </tr>
                                                    <tr>
                                                        <td date>2014-05-13</td>
                                                        <td hour>19</td>
                                                        <td city>宝鸡</td>
                                                        <td aqi>63</td>
                                                        <td pm25>37</td>
                                                        <td pm25d>57</td>
                                                        <td pm10>75</td>
                                                        <td pm10d>117</td>
                                                        <td so2>20</td>
                                                        <td so2d>14</td>
                                                        <td no2>33</td>
                                                        <td no2d>44</td>
                                                        <td o3>59</td>
                                                        <td o3d>96</td>
                                                        <td o38>36</td>
                                                        <td o38d>75</td>
                                                        <td co>1.784</td>
                                                        <td cod>1.963</td>
                                                    </tr>
                                                    <tr>
                                                        <td date>2014-03-23</td>
                                                        <td hour>19</td>
                                                        <td city>韶关</td>
                                                        <td aqi>78</td>
                                                        <td pm25>57</td>
                                                        <td pm25d>42</td>
                                                        <td pm10>73</td>
                                                        <td pm10d>57</td>
                                                        <td so2>45</td>
                                                        <td so2d>25</td>
                                                        <td no2>44</td>
                                                        <td no2d>29</td>
                                                        <td o3>34</td>
                                                        <td o3d>42</td>
                                                        <td o38>31</td>
                                                        <td o38d>49</td>
                                                        <td co>2.705</td>
                                                        <td cod>2.188</td>
                                                    </tr>
                                                    <tr>
                                                        <td date>2014-05-06</td>
                                                        <td hour>18</td>
                                                        <td city>河源</td>
                                                        <td aqi>22</td>
                                                        <td pm25>13</td>
                                                        <td pm25d>35</td>
                                                        <td pm10>22</td>
                                                        <td pm10d>55</td>
                                                        <td so2>9</td>
                                                        <td so2d>15</td>
                                                        <td no2>33</td>
                                                        <td no2d>34</td>
                                                        <td o3>35</td>
                                                        <td o3d>59</td>
                                                        <td o38>37</td>
                                                        <td o38d>39</td>
                                                        <td co>1.225</td>
                                                        <td cod>1.356</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="ax-pagination"></div>
                                    </div>
                

操作方法

插件内置多个操作方法,包括排序、筛选、搜索等。

  • search关键字搜索,完整用法search(names, value, source, operator, isSql),支持五个参数:
    • names:检索的字段名,数组类型,例如:['title','click']
    • value:关键字,字符串类型
    • source:数据源,数组类型,可为空,默认为加载后列表的preData
    • operator:运算符,字符串类型,可为空,默认为插件的operator参数值,可填or或and
    • isSql:是否为sql检索方式,布尔值,默认为false,如果非sql方式可不填,如果是sql检索方式请填true
      • 注意:如果isSql为true,source可直接为空,因为将从数据库直接获取数据
  • filter条件筛选,完整用法filter(data, source, operator, isSql),支持四个参数:
    • data:筛选的条件,json对象类型,例如:{title:'china',click:56}
    • source:数据源,数组类型,可为空,默认为加载后列表的preData
    • operator:运算符,字符串类型,可为空,默认为插件的operator参数值,可填or或and
    • isSql:是否为sql检索方式,布尔值,默认为false,如果非sql方式可不填,如果是sql检索方式请填true
      • 注意:如果isSql为true,source和可operator直接为空,因为将从数据库直接获取数据,此时的data为sql语句,比如"title like %china%"
  • sort排序,完整用法sort(data, order, isSql),支持三个参数:
    • data:排序字段,字符串类型,只能填写一个字段名
    • order:排序方式,字符串类型,可填asc或desc,默认为插件的order参数值,
    • isSql:是否为sql检索方式,布尔值,默认为false,如果非sql方式可不填,如果是sql检索方式请填true
      • 注意:如果isSql为true,order直接为空,此时的data为sql语句,比如"order by click desc"
  • extend自定义筛选,完整用法extend(str, isSql),支持两个参数:
    • str:筛选语句,字符串类型,是js中filter方法的检索条件写法,例如"item.title.includes('china') && item.click == 45",语句中的项目名必须为item
    • isSql:是否为sql检索方式,布尔值,默认为false,如果非sql方式可不填,如果是sql检索方式请填true
      • 注意:如果isSql为true,此时的str为sql语句,比如"title like %china% order by click desc"
  • updateSql用sql语句异步更新列表分页,完整用法updateSql(extend, callback),支持两个参数:
    • extend:更新sql的语句,格式为{extend:'title like %china% order by click desc'}
    • callback:更新后的回调函数,支持两个参数current和pagesNum
  • updatePages用参数同步更新列表分页,完整用法updatePages(setting, callback),支持两个参数:
    • setting:分页的参数,是对象类型,例如{count:10,current:2}
    • callback:更新后的回调函数,支持两个参数current和pagesNum
  • reset重置,完整用法reset(isSql),支持一个参数:
    • isSql:是否为sql检索方式,布尔值,默认为false,如果非sql方式可不填,如果是sql检索方式请填true

创建分页实例后可使用内置方法控制分页。因为axList内核是以axPagination为基础,所以在分页上操作与axPagination是一致的。

  • pagination.first(callback):返回首页,支持callback回调函数,回调函数参数为:当前页码current和总页码pagesNum
  • pagination.last(callback):返回尾页,支持callback回调函数,回调函数参数为:当前页码current和总页码pagesNum
  • pagination.prev(callback):返回上一页,支持callback回调函数,回调函数参数为:当前页码current和总页码pagesNum
  • pagination.next(callback):返回下一页,支持callback回调函数,回调函数参数为:当前页码current和总页码pagesNum
  • pagination.go(page, callback):返回指定页码,page是指将要跳转的页码,支持callback回调函数,回调函数参数为:当前页码current和总页码pagesNum
  • pagination.info(callback):获得分页实例信息,返回一个对象:{ current: '当前页码', pagesNum: '总页码', itemsNum: '每页数量', selectData: '当前页的节点数组' },支持callback回调函数,回调函数参数为:当前页码current和总页码pagesNum

另外,插件中内置了若干变量,在插件运行中会因为操作引起修改和重置。

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

监听事件

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

  • onInit 插件初始化后执行,支持current和pagesNum参数
  • onUpdated/updated 列表分页更新后执行,支持current和pagesNum参数
  • sorted 列表重新排序后执行,支持current和pagesNum参数
  • reset 列表重置后执行,无参数
  • rendered 列表筛选(包括search/filter/extend等操作)后执行,支持current和pagesNum参数

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

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

参数选项

document.addEventListener("DOMContentLoaded", function() {
  var demo1 = new axList('#id',{
                    names: '',//列表排序筛选的字段名,多个用英文逗号隔开
                    keyDelay: 200,//键入关键字检索时的时间时间,避免快速录入导致系统负荷
                    clickDelay: 500,//点击按钮时的延时时间,避免快速连续多次点击导致系统负荷
                    paginationDom: null,//分页的节点,id、className、节点名称或node
                    maxCount: 10000,//一页的最大项目数量
                    order: 'asc',//默认排序为顺序,对于有sort属性的按钮,没有指明order值那么将按该参数排序
                    operator: 'or',//多条件的默认操作符,默认为and,可选择or
                    paginationShow: true,//是否显示分页,默认true显示,如果为false表示不启用分页
                    onUpdated: '',//渲染完list和pagination节点后回调,支持current和pagesNum参数
                    onInit: '',//初始化后回调,支持current和pagesNum参数
                    //以下为分页所需参数
                    pagination: {
                        count: 10, //每页item数量
                        data: [], //用于创建列表Dom的数组,据此创建分页
                        template: null, //数组转Dom的模板
                        async: '',//异步方式,选择从json文件获取数组数据,或选择sql从数据库获得数据
                        ajaxType: 'post',//异步提交的方式,默认post,可填get
                        loadingMode: 'overlay',//使用异步分页的加载效果,默认是overlay即浮在原列表上,可选择replace即清除列表显示转圈
                        //更多分页参数请参考axPagination
                    }
  });
});