公告:本站提供编程开发方面的技术交流与分享,打造最佳教程网,希望能为您排忧解难!

JS教程jQuery分页插件jQuery.pager功能介绍

jQuery分页插件jQuery.pager功能介绍

更新时间:2013-05-21 23:49:00|卓燚原创作品|

功能

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{margin:5px 5px 0 0;display:block;overflow:hidden;clear:both;}
.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时,需要引入如下样式:

DIV.czyx_pager {
    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;
}
 

参阅

在线演示DEMO下载jQuery.pager源码

最佳教程网

最大的技术交流平台 www.goodxyx.com© CopyRight 2011-2013, All Rights Reserved

浙ICP备11033019号