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这三部分的代码创建好后先运 ...
随机推荐
- iar 问题
我的笔记本是win10 之前用的iar 430 版本是5.5 都没有问题.但,突然就
- Something about Wake-sleep
DBN可以看做是n个RBM串联组成,是一个多层神经网络. 多层的好处是可以用较少的参数表示复杂的函数. 而一些传统的training算法如BP算法,处理多层网络时,效果就不是很理想.
- jQuery插件开发的两种方法及$.fn.extend的详解
jQuery插件开发分为两种: 1 类级别 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQuery.ex ...
- (整理) Json语法规则
{ "staff":[ {"name":"haha1", "age":20}, {"name":&q ...
- PullToRefreshGridView刷新加载2
@XStreamAlias("result")public class Myresult { @XStreamImplicit(itemFieldName="item&q ...
- RestfulApi地址命名特点
get /orders 全部get /orders/{id} 根据id查找get /orders/{number} 根据编号查找get /orders/name/{name} 根据名称查找post / ...
- 我们还是太NAive
蛤鸡蛤鸡蛤鸡蛤鸡蛤鸡蛤鸡蛤鸡蛤鸡蛤鸡蛤鸡蛤鸡蛤鸡蛤鸡蛤鸡蛤鸡蛤鸡蛤鸡蛤鸡蛤鸡蛤鸡蛤鸡蛤鸡蛤鸡蛤鸡蛤鸡蛤鸡蛤鸡蛤鸡蛤鸡蛤鸡蛤鸡蛤鸡蛤鸡蛤鸡蛤鸡蛤鸡
- 关于Cookie的 工具类
import java.io.UnsupportedEncodingException; import java.net.URLDecoder; import java.net.URLEncoder; ...
- VS安装及单元测试
VS安装过程: 最大子数组算法已提交至coding.net: https://git.coding.net/CoCoBeer/Maxsubaray.git 用例编号 用例描述 输入数据 预期输出数据 ...
- MFC编程 | tab control控件的使用
因为课程需要,会用到MFC编程,所以讲一些经验总结下,以便日后使用查询. // tab control控件的使用 // 建立一个Cluster窗口,通过tab可以切换成C-Means和Fuzzy C- ...