css代码:

/*分页*/

            .pageList {
clear: both;
overflow: hidden;
} .pageList a,
.pageList span {
border: 1px solid #ccc;
margin-left: 10px;
float: left;
display: block;
overflow: hidden;
padding: 3px;
font-family: 微软雅黑;
font-size: 12px;
min-width: 15px;
text-align: center;
height: 20px;
line-height: 20px;
cursor: pointer;
}
.pageList a:hover,
.pageList_Current {
background-color: #278DE1;
color: white;
} .pageList .pageList_Hidden {
border: none;
cursor: default;
} .pageList .pageList_Hidden:hover {
background-color: transparent;
} .pageList input.jumpNum {
width: 30px;
border: 1px solid #8c8c8c;
float: left;
width: 20px;
height: 20px;
margin-left: 5px;
line-height: 20px;
padding: 3px;
text-align: center;
} .pageList a.jumpText {
border: none;
background: none;
outline: none;
margin-left:;
text-decoration: none;
color: #333;
} .pageList a.jumpText:hover {
color: #960;
}

js插件代码

(function($){
var defaults={
num:10, //页码个数
count:102, //总数
size:10, //每页展示条数
//hiddenPosition:7,
page:1, //当前页
clickEvent:function(page){ }
};
//重置html
function resetHtml(opts,obj,pageCount){
var middlePage=Math.ceil(pageCount/2);//中间页
//var currentPos=0;//当前位置()
var i=1,j=0;
var n=0; //另一端的页码数
var z=0;//当前页的前一页或后一页
var maxPage=0;
var getPageHtml=function(type,page){
var currentPage="";
if(type==1){//省略号
return "<span class='pageList_Hidden'>...</span>";
}else if(type==2){
if(page==opts.page){
currentPage="pageList_Current";
}
return "<a class='pageList_Num "+currentPage+"'>" + page + "</a>";
}
};
var html="<a class='pageList_FirstPage'><label>首页</label></a>";
html+="<a class='pageList_PrevPage'>上页</a>";
if(pageCount<=opts.num){//没有省略号
for(;i<pageCount;i++){
html+=getPageHtml(2,i);
}
}else{//有省略号
n=opts.num-4;//剩余页码的坑
if(opts.page<=middlePage){// x+1+3 1是省略号 3是后面几个页码
z=opts.page+1;//当前页的后一页,省略号的前一格
if(z<=n){//
for(i=1;i<=n;i++){
html+=getPageHtml(2,i);
}
}else{
for(i=(z-n+1);i<=z;i++){
html+=getPageHtml(2,i);
}
}
html += getPageHtml(1); for(i=pageCount-2;i<=pageCount;i++){
html+=getPageHtml(2,i);
} }else{// 3+1+x 1是省略号 3是前面几个页码
for(i=1;i<=3;i++){
html+=getPageHtml(2,i);
}
html += getPageHtml(1);
//debugger
z=opts.page-1;//当前页的前一页,省略号的后一格
maxPage=z+n-1;
//maxPage=maxPage>pageCount?pageCount:maxPage;
if(maxPage>pageCount){
maxPage=pageCount;
z=pageCount-n+1;
}
for(i=z;i<=maxPage;i++){
html += getPageHtml(2,i);
}
}
}
html+="<a class='pageList_NextPage'>下页</a>";
html+="<a class='pageList_LastPage'>末页</a>";
html+="<input class='jumpNum' type='text' value='' />";
html+="<a class='jumpText' href='javascript:void(0)'>跳转</a>";
obj.html(html);
//return html;
}
$.fn.pageList=function(opts){
opts=$.extend({},defaults,opts);
this.each(function(){
var obj=$(this).addClass("pageList");
var pageCount=Math.ceil(opts.count/opts.size);//总页数
resetHtml(opts,obj,pageCount);
obj.on("click","a.pageList_Num",function(){
var page=parseInt($(this).html());
if(page==opts.page){
return;
}
opts.page=page;
opts.clickEvent(page,function(){
resetHtml(opts,obj,pageCount);
});
});
//首页
obj.on("click",".pageList_FirstPage",function(){
var page=parseInt($(".pageList_Current",obj).html());
if(page==1){
return;
}
opts.page=1;
opts.clickEvent(page,function(){
resetHtml(opts,obj,pageCount);
});
});
//上页
obj.on("click",".pageList_PrevPage",function(){
var page=parseInt($(".pageList_Current",obj).html())-1;
if(page<=0){
return;
}
opts.page=page;
opts.clickEvent(page,function(){
resetHtml(opts,obj,pageCount);
});
});
//下一页
obj.on("click",".pageList_NextPage",function(){
var page=parseInt($(".pageList_Current",obj).html())+1;
if(page>pageCount){
return;
}
opts.page=page;
opts.clickEvent(page,function(){
resetHtml(opts,obj,pageCount);
});
});
//末页
obj.on("click",".pageList_LastPage",function(){
var page=parseInt($(".pageList_Current",obj).html());
if(page==pageCount){
return;
}
opts.page=pageCount;
opts.clickEvent(page,function(){
resetHtml(opts,obj,pageCount);
});
});
//文本框enter
obj.on("keyup",".jumpNum",function(e){
if(e.which!=13){
return;
}
var textPage=$(this).val();
if(isNaN(textPage)){
alert("输入的页码必须是数值型");
return;
}
textPage=parseInt(textPage);
var page=parseInt($(".pageList_Current",obj).html());
if(textPage>pageCount||textPage<=0){
alert("您输入的页码超出范围");
return;
}
if(page==textPage){
return;
}
opts.page=textPage;
opts.clickEvent(page,function(){
resetHtml(opts,obj,pageCount);
$(".jumpNum",obj).focus();
});
}); //单击跳转
obj.on("click",".jumpText",function(e){
var textPage=$(".jumpNum",obj).val();
if(isNaN(textPage)){
alert("输入的页码必须是数值型");
return;
}
textPage=parseInt(textPage);
var page=parseInt($(".pageList_Current",obj).html());
if(textPage>pageCount||textPage<=0){
alert("您输入的页码超出范围");
return;
}
if(page==textPage){
return;
}
opts.page=textPage;
opts.clickEvent(page,function(){
resetHtml(opts,obj,pageCount);
$(".jumpNum",obj).focus();
});
}); });
}
})(jQuery);

插件调用:

<div class="a"></div>
$(function(){
$(".a").pageList({
num:12, //页码个数
count:1020, //总数
size:10, //每页展示条数
page:52, //当前页
clickEvent:function(page,callback){
//alert(page);
callback();
}
});
});

最终效果:

jquery分页插件的更多相关文章

  1. 一个强大的jquery分页插件

    点击这里查看效果 这个分页插件使用方便,引用keleyidivpager.js和keleyidivpager.css文件,然后在htm(或者php,aspx,jsp等)页面中对分页总数,参数名,前缀后 ...

  2. 21个很棒的jQuery分页插件下载

    分页是指将一个大内容划分为各种不同的页面,因此网站的分页是一个很重要的部分,必须让内容有组织性和易于访问.分页有各两种不同的方式,手动跟自动.最受欢迎简单和广泛的方法是jQuery插件.下面我们收集了 ...

  3. jQuery 分页插件 jqPagination的使用

    jqPagination 是一个简单易用的轻量级 jQuery分页插件,其使用了 HTML5 和 CSS3 技术来实现.此插件提供了几个参数设置选项,通过简单的配置即可生成分页控件.此外,它的外观样式 ...

  4. Jquery 分页插件 Jquery Pagination

    Jquery 分页插件 Jquery Pagination 分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也 ...

  5. jquery分页插件的修改

    前言 最近分页功能使用的比较多,所以从网上下载个jquery分页插件来使用, 之前用的都挺好的,直到昨天出现了逻辑问题,反复查看自己的代码,最后发现是点击页码后执行了多个点击事件.最后只有自己查看源码 ...

  6. jQuery分页插件(jquery.page.js)的使用

    效果描述: 不用分页即可显示的jQuery插件 jQuery分页插件——jQuery.page.js用法很简单,效果很棒   1.前端   首先html的head中引入相关css与js <lin ...

  7. 20个jQuery分页插件和教程

    1.客户端的jQuery 分页插件jPages jPages 是一个客户端的分页插件,但提供很多特性例如自动翻页.键盘和滚动浏览,延迟显示以及完全可定制的导航面板. Read More Demo 2. ...

  8. 分享一个Jquery 分页插件 Jquery Pagination

    分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也挺简单明了的,也助于自己写个小插件. 不过我比较懒,一般直接 ...

  9. 自己diy一个jquery分页插件

    js基础学习过程中,期间经历换工作的各种面试,很多面试官问过:有没有写过jquery插件?等类似问题. 就个人而言,关于jquery插件的文章确实看过不少,但是一直没有动手写一个,一是不想在目前学习j ...

  10. JQuery分页插件封装(源码来自百度,自己封装)

    最近由于项目的需要,做了一个基于JQuery的表格分页插件封装,部分源码来源百度,经由自己封装完成. 下面是具体代码和说明,仅供参考.第一步可以先将我的HTML,CSS,JS这三部分的代码创建好后先运 ...

随机推荐

  1. ORA-00942:table or view does not exist

    好好的表都建成功了,在PL/SQL中编辑数据时给我来这个提示,起的我没办法了.查到如下: oracle建表时有一个严重的问题,在此写出来,提醒大家注意: 先简单写一下错误内容,如各位已经发现过此问题并 ...

  2. CEPH经常出现slow request的排查解决

    现象: 通过ceph -w日志经常发现有request blocked的问题(如果虚拟机系统跑在ceph上时,就会发现严重的卡顿现象) 排查: 1.通过dstat未发现有明显的瓶颈 (dstat -t ...

  3. 原生js实现滚动条

    var SimulateScroll = (function(){ var oParent = document.getElementById('wrap-scroll-bar'), oBox = d ...

  4. Java控制台中输入中文输出乱码的解决办法

    Run---Run Configurations---Common---Encoding---Other---GBK Run Configurations里的Common中将编码方式改成GBK就正常了

  5. Swift—下标脚本(Subscripts)

    下标脚本可以定义在类(Class).结构体(Struct).枚举(enumeration)这些目标中,可以认为是访问集合,列表或序列的快捷方式,使用下标脚本的索引设置和获取值,不需要再调用实例的特定的 ...

  6. 帝国时代II 高清版 steam 4.4 字体替换 微软雅黑

    其实默认的中文字体算是中规中矩吧,但是我并不喜欢 从昨天开始就想着换 于是我就开始搜索帝国时代2的游戏目录的资源,马上就锁定到了\Steam\steamapps\common\Age2HD\resou ...

  7. hdu1087 dp

    题意:给定一串数字,要求选取一个严格递增的子序列,使序列和最大. dp[i] 表示以 i 为结尾的子序列的最大和,dp[i] = max{dp[j]+a[i]}(j 从 0 到 i-1),dp[0]是 ...

  8. 王爽<<汇编语言>> 实验十四

    ;以"年/月/日 时:分:秒"的格式, 显示当前的日期, 时间 assume cs:code code segment main: out 70h,al ;告诉CMOS RAM将要 ...

  9. LINUX测试环境部署nginx(五)

    安装配置nginx 安装编译环境:yum -y install pcre-devel openssl openssl-devel 拷贝nginx压缩文件到目标目录后,解压tar -zxvf nginx ...

  10. 转:各种Adapter的用法

    各种Adapter的用法   同样是一个ListView,可以用不同的Adapter让它显示出来,比如说最常用的ArrayAdapter,SimpleAdapter,SimpleCursorAdapt ...