属性配置
| 属性 | 类型 | 必填 | 描述 |
|---|---|---|---|
| data | Array | 否 | 静态分页数据(假分页)。静态分页必填如果是动态分页则不需要此参数。 |
| xhr | Object | 否 | 动态分页ajax请求配置,动态分页必填。 配置参数支持jq的ajax方法配置,但在这不能配success回调函数。success回调配置请看xhrSuccess。静态则不需要此参数。 中间需要修改此参数可以通过set方法修改 |
| xhrSuccess | Function | 否 | 动态分页ajax请求配置,动态分页必填。 说明下:这并不是直接处理分页列表的回调,这只是格式化数据,处理分页列表方法请看reloadPage。服务端必须返回一个count数和当前页的数据列表。 返回值:必须返回。格式{data : [],count : 100} |
| first | Boolean | 否 | 首页按钮开关,默认true(开) |
| last | Boolean | 否 | 末页按钮开关,默认true(开) |
| viewNumber | Boolean | 否 | 每页显示多少条选择器开关,默认true(开) |
| viewOpt | Array | 否 | 每页显示多少条选择器条数列表,默认[10,20,50,100] |
| limit | Number | 否 | 默认每页显示多少条,默认10 |
| current | Number | 否 | 当前页,默认1。第1页 |
| jump | Boolean | 否 | 快速跳转页面开关,默认true(开) |
| viewCount | Boolean | 否 | 总计页数开关,默认true(开) |
| operationReady | Function | 否 | 分页操作动作后,向后台发起请求前的钩子函数,在这里可以设置请求体这次发起请求的的参数等等动作。 |
| operationCallback | Function | 是 | 分页操作回调,在这里做关联列表的更新操作。 创建实例、set参数(打开reload时)以及每次操作分页都会执行一次。并回传当前分页的必要参数。function(msg,data) {
msg : {
evnt : name //事件名, 包括(jump、viewNum、reload)
type : type //事件类型, 包括(option、target、more、first、last、next、prev)
start : start //当前页开始值
end : end //当前页结束值
count : count
limit : limit
current : current
}
,data : [] //当前数据页面
}
事件说明:
jump : 页面跳转; viewNum : 显示项操作事件; reload : 数据重新加载
|
| classPrefix | String | 否 | class名前缀,默认值"Ch";自己定义Class名,避免重复。class名请查阅class元素表 |
| txtConfig | Object | 否 | 分页中所有要用到的文案配置表,可配参数以及默认配置如下: first '首页' -->首页按钮; last '尾页'-->尾页按钮; next '下一页'-->上一页按钮; prev '上一页'-->下一页按钮; jumpBtn 'go' -->自由跳转分页按钮; jumpTxt '跳转到{n}页'-->自由跳转分页描述文案; (注意{n}表示中间的系统数字或其他系统文案,不可更改) countPage "共{n}页"-->页数统计描述文案; countNumber '共{n}条'-->条数统计描述文案; viewNumber '每页显示{n}条'-->页数选择器描述文案; |
class元素表($classPrefix表示您设置的class前缀,默认Ch)
| 名称 | 描述 |
|---|---|
| $classPrefix_paging_first | 首页按钮 |
| $classPrefix_paging_last | 尾页按钮 |
| $classPrefix_paging_prev | 上一页 |
| $classPrefix_paging_next | 下一页 |
| $classPrefix_paging_btn | 数字分页按钮容器,每个小按钮是一个a标签 |
| $classPrefix_paging_view_number | 显示条数选择器 |
| $classPrefix_paging_jump | 自由跳转页工具 |
| $classPrefix_paging_count_page | 统计总页容器 |
| $classPrefix_paging_count_number | 统计总条数容器 |
方法
ChPaging(target,object)
-
参数
{target} HTMLElement,string || ＤＯＭ节点,也可以传jq选择器或者jq选择器字符串 {Object} object -
用法
var ChPaging = new ChPaging($target,{ data :["列表1","列表2",...], reloadPage : function(msg,data){...//页面更新操作以及其他操作} }); -
详细
ChPaging本身是一个构造函数,所以每使用一次即实例化一次ChPaging。参数必填,第一个则是分页的DOM容器,第二个为配置参数。参照属性介绍。
ChPaging.set(object,Boolean)
-
参数
{Object} object Boolean boolean -
用法
ChPaging.set({ limit : 30 ,false) -
详细
实例方法,数据更新需要重新计算分页条数则掉用此方法。
这是最重要的一个方法,如果外部条件需要重新加载表格数据。则调用此方法设置第二个参数为true即可,不用重新再NEW一个实例。
第二个参数为true时,立即使用新配置更新分页。在外部条件控制分页时使用,在operationCallback内使用立即更新功能会导致死循环。
ChPaging.get(key)
-
参数
{String} key -
用法
ChPaging.get('limit'); -
详细
实例方法,获取实例中的属性数据。