JS教程jQuery分页插件jQuery.pager功能介绍
jQuery分页插件jQuery.pager功能介绍
功能
javascript分页功能，支持ajax，联动分页，也可以单纯作为一个静态的分页HTML来使用。
使用方法：pagerObj= newjQuery.pager([options])
依赖库：jQuery框架
参数
options
必选项，或者实例化以后再设置各个参数。
options.page
当前页码，默认第一页，页码索引从1开始，不填或小于1都会被自动设置为1
options.nums
每页显示的分页条数（必选）
options.count
总数据条数（必选）
options.numsOption
动态调整分页时，每页显示的条数下拉列表选项，默认[10,20,50,100]
options.numberOfButtons
显示的中间按钮个数，默认5个
options.styleType
样式类型，默认提供两种可选分页条样式，可以根据自己喜好自行调整。
options.ajax
参数数据同jQuery.ajax，但是里面还提供一个接口 options.ajax.start 方法，该方法在调用ajax之前被触发，如果该方法返回值为：false，将会阻止后续代码的执行。
options.pageContainer
分页条显示的容器，参数格式同 jQuery(searchQuery)。(必选)
例如：options.pageContainer = '#czyxPage';
options.ajaxContainer
ajax容器框，会将ajax返回的HTML直接赋值在ajaxContainer里面，参数格式同 jQuery(searchQuery)。
options.ongchange
分页页码或分页条数等发生改变时触发的事件，如果设置了该事件，会取代默认的触发事件，如果自动ajax向后台获取数据。此方法优先级较高。
样式
参数中styleType=0时，需要引入如下样式：
.pagination select{float:left;}
.pagination a{ height:18px; line-height:18px; float:left; padding:0px 5px; border: solid 1px #D6D6D6; margin-right: 8px;TEXT-DECORATION:none}
.pagination span{ height:18px; line-height:18px; float:left; padding:0px 5px; margin-right:5px; min-width:1em; text-align:center; }
.pagination .current{ background: #26B; color: #fff; border: solid 1px #D6D6D6; }
.pagination span.current.next{ color:#999; border-color:#999; background:#fff;}
.pagination span.current.prev{ color:#999; border-color:#999; background:#fff;}
.pagination a.next{ border:1px solid #999; background:#fff; margin-right:5px; padding:0 5px;}
参数中styleType=1时，需要引入如下样式：
padding:3px;
margin:3xp;
font-size:0.85em;
FONT-FAMILY: Tahoma,Helvetica,sans-serif;
TEXT-ALIGN: center
}
DIV.czyx_pager A {
BORDER: #ccdbe4 1px solid;
PADDING: 2px 8px;
COLOR: #0061de;
MARGIN-RIGHT: 3px;
TEXT-DECORATION: none;
BACKGROUND-POSITION: 50% bottom;
}
DIV.czyx_pager A:hover {
BORDER: #2b55af 1px solid;
COLOR: #fff;
BACKGROUND-IMAGE: none;
BACKGROUND-COLOR: #3666d4
}
DIV.czyx_pager A:active {
BORDER: #2b55af 1px solid;
BACKGROUND-IMAGE: none;
COLOR: #fff;
BACKGROUND-COLOR: #3666d4
}
DIV.czyx_pager SPAN.current {
PADDING: 2px 6px;
FONT-WEIGHT: bold;
COLOR: #000;
MARGIN-RIGHT: 3px;
}
DIV.czyx_pager SPAN.disabled {DISPLAY: none}
DIV.czyx_pager A.next {
BORDER: #ccdbe4 2px solid;
MARGIN: 0px 0px 0px 10px;
}
DIV.czyx_pager A.next:hover {
BORDER: #2b55af 2px solid
}
DIV.czyx_pager A.prev {
BORDER: #ccdbe4 2px solid;
MARGIN: 0px 10px 0px 0px;
}
DIV.czyx_pager A.prev:hover {
BORDER: #2b55af 2px solid;
}