Skip to content

seajs tablePage(表格分页插件)

awei.yu edited this page May 17, 2016 · 2 revisions

说明:用于为表格提供ajax数据源分页功能,并自动创建分页按钮

HTML部分:

 <table id="example1" class="table table-bordered table-striped">
    <thead>
        <tr>
            <th>th1</th>
            <th>th2</th>
         </tr>
    </thead>
    <tbody>
                                    
    </tbody>
</table>

API:

    int(config):
        说明:用于对分页参数进行初始化配置,并在配置完毕后立即执行数据获取并绘制分页
        参数说明:
            config(object):
                {
                    "table":"", //表格Id
                    "url":"", //数据源地址(可带参)
                    "dataKey":"", //分页数据源在服务器返回的json中对应的键名(支持多级 如:data.result)。可为空则获取数据基于最外层rs
                    "pageTotalKey":"", //总页数在服务器返回的json中对应的键名(支持多级 如:params.total_num)
                    "pageNow":"pageNo=1",  //目标页键值对配置。键对应服务器提交参数中的目标页键名,值用于设置起始页码
                    "pageSize":"pageSize=10", //每页数据条数键值对配置。键对应服务器提交参数中的每页条数键名,值用于设置每页的数据条数
                    "data":[*fucs //目标表格从左至右单元格的解析方法],
                    //所有行绘制完毕的回调 效果同 tablePage.onFinish=function(data){}
                    "onfinish":function(data,addition){
                        //data:该分页所有返回数据
                        //addition:其它数据({
                                baseJson:完整返回数据
                                rows:当前行
                                columns:当前列
                          })
                    }
                }
    setConfig(key,value):
        说明:用于动态修改分页配置(初始化时候的config参数),如:分页大小,筛选条件等
        参数说明:
            key:config中欲修改的键名(支持多级)
            value:欲修改的值
    run([page]):
        说明:用于立即执行数据获取并绘制分页,一般是在setConfig之后调用
        参数说明:
                page:可选参数。目标页 默认值:1
    nowPage:属性值。用于获取当前页
    //所有行绘制完毕的回调
    tablePage.onFinish=function(rs){
        //rs:该分页所有返回数据
    }

关于config.data中的fucs:

自增型数据(string)

说明:一般用于表格首列的序号
关键字:"$"
示例:"$1" 表示生成从1开始的递增序号

引用型变量(string)

说明:很多时候单元格的内容是服务器返回的json数据来填充的,它的作用就是引用该数据
关键字:"{}"
示例:

data:["{uid}"]
表示该行从左至右第一个单元格的内容=服务器返回的json中,分页数据源中键名为uid的json值

混合用法:

data:["<div class='xxx' onclick='alert({date})'>{uid}</div>"]
表示该行从左至右第一个单元格的内容为div标签,该div的内容=服务器返回的json中,分页数据源中键名为uid的json值,点击该div会弹出服务器返回的json中,分页数据源中键名为date的json值

自定义函数(function)

说明:如果单元格的内容过于复杂,可通过自定义函数来实现内容填充
注意:函数的返回值类型为string或标签元素(object)
示例:
(1) 返回类型为Node

data:[function(dataJson,addition){
    //addition:其它数据({
        baseJson:完整返回数据
        rows:当前行
        columns:当前列
    })
    var div=document.createElement("div");
    div.innerHTML=dataJson.countId;
    div.onclick=function(){
        alert(dataJson.date);
    }
    div.style.color="red";
    return div; 
}]
表示该行从左至右第一个单元格的内容为上述函数返回的Div标签

(2) 返回类型为String

function(dataJson){
    return dataJson.money+"元";
}
表示该行从左至右第一个单元格的内容为上述函数返回的文本

小贴士:

该插件可直接配合bootstrap.min.css使用,也可根据生成的标签类自定义样式
You can’t perform that action at this time.