使用JQuery实现的分页插件分享

2024-03-26 01:52:03 360

一个简单的jQuery分页插件，兼容AMD规范和requireJS.

/**
*jQuery分页插件
**/
;(function(factory){
if(typeofdefine==="function"&&define.amd){
//AMD模式
define(["jquery"],factory);
}else{
//全局模式
factory(jQuery);
}
}(function($){

//定义MyPagePlugin的构造函数
MyPagePlugin=function(ele,option){
//this.viewHtml="<nav><ulclass='pagination'><li><aid='firstPageli'>&laquo;</a></li><li><aid='prevPageli'>&lsaquo;</a></li><liclass='active'><a>第<spanid='curPageNoSpan'></span>页,共<spanid='allPageCountSpan'></span>页</a></li><li><aid='nextPageli'>&rsaquo;</a></li><li><aid='lastPageli'>&raquo;</a></li></ul></nav>";
this.viewHtml="<divclass='pageplugin'><aclass='firstfirstPageli'>&laquo;</a><aclass='previousprevPageli'>&lsaquo;</a><aclass='present'>第<spanclass='curPageNoSpan'></span>页,共<spanclass='allPageCountSpan'></span>页</a><aclass='nextnextPageli'>&rsaquo;</a><aclass='lastlastPageli'>&raquo;</a></div>"

this.$element=ele;
/**参数：page:当前页,pageCount:总共页数,onPaged回调函数,回调函数会传入页数*/
this.defaults={
page:1,
pageCount:1,
onPaged:function(pageNo){}
};
this.options=$.extend({},this.defaults,option);

}
//定义MyPagePlugin的方法
MyPagePlugin.prototype={
initPlugin:function(){
this.$element.empty();
this.$element.append(this.viewHtml);
this.options.onPaged(this.options.page);//初始化
this.$element.find(".curPageNoSpan").text(this.options.page);
this.$element.find(".curPageNoSpan").data("options",this.options);
this.$element.find(".allPageCountSpan").text(this.options.pageCount);
this.$element.find(".firstPageli").on("click",function(e){

varcurNo=$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text();
curNo=parseInt(curNo);
if(curNo==1){
returnfalse;
}else{

$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").data("options").onPaged(1);
$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text(1);
}
returnfalse;
});
this.$element.find(".prevPageli").on("click",function(e){
varcurNo=$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text();
curNo=parseInt(curNo);
if(curNo==1){
returnfalse;
}else{
$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").data("options").onPaged(curNo-1);
$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text(curNo-1);
}
returnfalse;
});
this.$element.find(".nextPageli").on("click",function(e){
varcurNo=$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text();
curNo=parseInt(curNo);
varpageCount=$(e.currentTarget).parent("div.pageplugin").find(".allPageCountSpan").text();
pageCount=parseInt(pageCount);
if(curNo==pageCount){
returnfalse;
}else{
$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").data("options").onPaged(curNo+1);
$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text(curNo+1);
}
returnfalse;
});
this.$element.find(".lastPageli").on("click",function(e){
varcurNo=$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text();
curNo=parseInt(curNo);
varpageCount=$(e.currentTarget).parent("div.pageplugin").find(".allPageCountSpan").text();
pageCount=parseInt(pageCount);
if(curNo==pageCount){
returnfalse;
}else{
$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").data("options").onPaged(pageCount);
$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text(pageCount);
}
returnfalse;
});

}


}
$.fn.pagePlugin=function(option){
varpagePlugin=newMyPagePlugin(this,option);
pagePlugin.initPlugin();
};
}));

CSS

.pageplugin{
display:inline-block;
border:1pxsolid#CDCDCD;
border-radius:3px;}

.pageplugina{
cursor:pointer;
display:block;
float:left;
width:20px;
height:20px;
outline:none;
border-right:1pxsolid#CDCDCD;
border-left:1pxsolid#CDCDCD;
color:#767676;
vertical-align:middle;
text-align:center;
text-decoration:none;
font-weight:bold;
font-size:16px;
font-family:Times,'TimesNewRoman',Georgia,Palatino;
background-color:#f7f7f7;
/*ATTN:needabetterfontstack
background-color:#f7f7f7;
background-image:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0%,#f3f3f3),color-stop(100%,lightgrey));
background-image:-webkit-linear-gradient(#f3f3f3,lightgrey);
background-image:linear-gradient(#f3f3f3,lightgrey);*/}
.pageplugina:hover,.pageplugina:focus,.pageplugina:active{
color:#0099CC;
background-color:#cecece;
background-image:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0%,#e4e4e4),color-stop(100%,#cecece));
background-image:-webkit-linear-gradient(#e4e4e4,#cecece);
background-image:linear-gradient(#e4e4e4,#cecece);}
.pageplugina.disabled,.pageplugina.disabled:hover,.pageplugina.disabled:focus,.pageplugina.disabled:active{
background-color:#f3f3f3;
background-image:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0%,#f3f3f3),color-stop(100%,lightgrey));
background-image:-webkit-linear-gradient(#f3f3f3,lightgrey);
background-image:linear-gradient(#f3f3f3,lightgrey);
color:#A8A8A8;
cursor:default;}

.pageplugina:first-child{
border:none;
border-radius:2px002px;}

.pageplugina:last-child{
border:none;
border-radius:02px2px0;}

.pageplugin.present{
float:left;
margin:0;
padding:0;
width:120px;
height:20px;
outline:none;
border:none;
vertical-align:middle;
text-align:center;}

jquery分页插件cypager

cypager是网友分享到JquerySchool网站上的一款作品，非常实用，经过测试，插件兼容IE8+,Chrome,Firefox浏览器,核心文件仅5KB。。。

调用方式

由于是jquery插件，所以在引人cypager.min.js之前，要引人jquery.min.js本人使用的是1.7.2版本的，低版本的没试过。
引入css:<linkrel="stylesheet"href="css/cypager.min.css"/>
引人js :<scripttype="text/javascript"src="js/cypager.min.js"/>

$(function(){
$("#pagerArea").cypager({pg_size:10,pg_nav_count:8,pg_total_count:194,pg_call_fun:function(count){
alert("跳转至页面:"+count+"");
}});
});

参数说明
pgerId //插件的ID默认:cy_pager
pg_size //每页显示记录数默认：10条
pg_cur_count//当前页数（如果需要默认显示指定页面，则设置）
pg_total_count//总记录数
pg_nav_count //显示多少个导航数默认：7个
pg_prev_name //上一页按钮名称（默认：PREV）
pg_next_name //下一页按钮名称(默认：NEXT)
pg_call_fun(page_count) //回调函数，点击按钮执行

高效JQUERY分页插件源代码JQUERY.PAGER.JS

本文将给大家分享一个非常不错的分页插件、jQuery.pager.js、该插件的优点是可以内容索引、使用了jQuery、也同时调用了jquery.pager.js文件、分页都是基于Ajax的、当然、如果你不打算使用Ajax来实现分页的话、那么你最好不要使用本插件、若使用的话反而很麻烦、本插件主要是为使用Ajax技术交互的网站所准备、可以很方便的嵌入到网站系统中、实现Ajax分页功能、如果大家觉得这个效果不是很好看的话、可以自己重写分页按钮的样式哈

HTML代码很简单、只要准备一个用于分页代码的DIV就可以了

<divclass="tcdPageCode"></div>

通过jQuery的方式调用即可

$(".tcdPageCode").createPage({
pageCount:6,
current:1,
backFn:function(p){
console.log(p);
}
});

使用JQuery实现的分页插件分享

热门推荐

随机推荐