jquery分页插件
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分页插件的更多相关文章
- 一个强大的jquery分页插件
点击这里查看效果 这个分页插件使用方便,引用keleyidivpager.js和keleyidivpager.css文件,然后在htm(或者php,aspx,jsp等)页面中对分页总数,参数名,前缀后 ...
- 21个很棒的jQuery分页插件下载
分页是指将一个大内容划分为各种不同的页面,因此网站的分页是一个很重要的部分,必须让内容有组织性和易于访问.分页有各两种不同的方式,手动跟自动.最受欢迎简单和广泛的方法是jQuery插件.下面我们收集了 ...
- jQuery 分页插件 jqPagination的使用
jqPagination 是一个简单易用的轻量级 jQuery分页插件,其使用了 HTML5 和 CSS3 技术来实现.此插件提供了几个参数设置选项,通过简单的配置即可生成分页控件.此外,它的外观样式 ...
- Jquery 分页插件 Jquery Pagination
Jquery 分页插件 Jquery Pagination 分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也 ...
- jquery分页插件的修改
前言 最近分页功能使用的比较多,所以从网上下载个jquery分页插件来使用, 之前用的都挺好的,直到昨天出现了逻辑问题,反复查看自己的代码,最后发现是点击页码后执行了多个点击事件.最后只有自己查看源码 ...
- jQuery分页插件(jquery.page.js)的使用
效果描述: 不用分页即可显示的jQuery插件 jQuery分页插件——jQuery.page.js用法很简单,效果很棒 1.前端 首先html的head中引入相关css与js <lin ...
- 20个jQuery分页插件和教程
1.客户端的jQuery 分页插件jPages jPages 是一个客户端的分页插件,但提供很多特性例如自动翻页.键盘和滚动浏览,延迟显示以及完全可定制的导航面板. Read More Demo 2. ...
- 分享一个Jquery 分页插件 Jquery Pagination
分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也挺简单明了的,也助于自己写个小插件. 不过我比较懒,一般直接 ...
- 自己diy一个jquery分页插件
js基础学习过程中,期间经历换工作的各种面试,很多面试官问过:有没有写过jquery插件?等类似问题. 就个人而言,关于jquery插件的文章确实看过不少,但是一直没有动手写一个,一是不想在目前学习j ...
- JQuery分页插件封装(源码来自百度,自己封装)
最近由于项目的需要,做了一个基于JQuery的表格分页插件封装,部分源码来源百度,经由自己封装完成. 下面是具体代码和说明,仅供参考.第一步可以先将我的HTML,CSS,JS这三部分的代码创建好后先运 ...
随机推荐
- SQL --Chater03 聚合与排序
数据说明: +-----------+------------+---------------+--------------+--------------+------------+ | shohin ...
- python 输出十六进制中文乱码
代码中红色字体为解决方案: #-*-coding:utf-8-* import csv filename='C:\Users\yaru\Desktop\Senti_Value(1).csv' data ...
- 【转】oracle in和exists、not in和not exists原理和性能探究
转自http://www.2cto.com/database/201310/251176.html 对于in和exists.not in和not exists还是有很多的人有疑惑,更有甚者禁用not ...
- Hadoop集群搭建安装过程(二)(图文详解---尽情点击!!!)
Hadoop集群搭建安装过程(二)(配置SSH免密登录)(图文详解---尽情点击!!!) 一.配置ssh无密码访问 ®生成公钥密钥对 1.在每个节点上分别执行: ssh-keygen -t rsa(一 ...
- 在AndroidStudio不能找到so文件问题:couldn't find libweibosdkcore.so
解决步骤已经写到我的公众号,二维码在下面. 欢迎观看我的CSDN学院课程,地址:http://edu.csdn.net/course/detail/2877 本人联系方式: 更多精彩分享,可关注我的微 ...
- linux 添加基于weblogic的nodemanager的服务
用nodemanager来添加weblogic服务启动. 1.新建一个server,命名为Server1,端口设置为7055,其他采用默认值. 2.新建一个Machine,命名为Machine1.配置 ...
- C++知识点
typedef typedef struct _COMSTAT { DWORD fCtsHold : ; //机构内位域的定义即变量fCtsHold占1个bit空间 DWORD fDsrHold : ...
- java项目调用kettleJob和Trans
1.调用本地Job和Trans 较简单不用多说没有遇到任何问题,以下是代码: import org.pentaho.di.core.KettleEnvironment; import org.pent ...
- 浅谈声明与定义的区别 分类: C/C++ 2015-06-01 15:08 157人阅读 评论(4) 收藏
以下代码使用平台是VS2012. 清楚明白声明与定义是一名合格的程序猿的基本要求. 本人认为,C++编码过程中谈及"声明"和"定义"是因为我们要使用一个变量.类 ...
- [课程设计]Scrum 1.6 多鱼点餐系统开发进度
[课程设计]Scrum 1.6 多鱼点餐系统开发进度(点餐页面按钮添加&修复) 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4. ...