在实际项目开发中,通用的分页组件是必不可少的。下面描述的是关于JavaScript版的分页组件。该组件是基于jquery之上开发的。
该组件包括
jquery-1.3.2.min.js; (jquery 核心类库)
jquery.pager.js; (分页组件类库)
PagerDemo.js; (用于js与html分离)
Pager.css ;
PagerDemo.html
运行效果图如下:
图一、运行效果图
具体实现代码:
jquery.pager.js
(function($) {
$.fn.pager = function(options) {
var opts = $.extend({}, $.fn.pager.defaults, options);
return this.each(function() {
$(this).empty().append(renderpager(parseInt(options.pagenumber), parseInt(options.pagecount), options.buttonClickCallback));
$('.pages li').mouseover(function() { document.body.style.cursor = "pointer"; }).mouseout(function() { document.body.style.cursor = "auto";});
});
};
function renderpager(pagenumber, pagecount, buttonClickCallback) {
var $pager = $('<ul class="pages"></ul>');
$pager.append(renderButton('首页', pagenumber, pagecount, buttonClickCallback)).append(renderButton('上一页', pagenumber, pagecount, buttonClickCallback));
var startPoint = 1;
var endPoint = 9;
var thpoint="<li class='thpoint'>...</li>";
if (pagenumber > 4) {
startPoint = pagenumber - 4;
endPoint = pagenumber + 4;
}
if (endPoint > pagecount) {
startPoint = pagecount - 8;
endPoint = pagecount;
thpoint = "";
}
if (startPoint < 1) {
startPoint = 1;
}
for (var page = startPoint; page <= endPoint; page++) {
var currentButton = $('<li class="page-number">' + (page) + '</li>');
page == pagenumber ? currentButton.addClass('pgCurrent') : currentButton.click(function() {
buttonClickCallback(this.firstChild.data);
});
currentButton.appendTo($pager);
}
$pager.append(thpoint).append(renderButton('下一页', pagenumber, pagecount, buttonClickCallback)).append(renderButton('末页', pagenumber, pagecount, buttonClickCallback));
$pager.append("<li class='thpoint' style='margin-top:3px;'>共: "+pagecount+" 页</li>");
var strgoto = $("<li class='thpoint'>当前<input type='text' value='"+pagenumber+"'maxlength='6' id='gotoval' style='width:20px; height:16px;margin-top:-3px;padding-top:2px;padding-left:10px;'/>页</li>");
$pager.append(strgoto);
$pager.append(changepage('go',pagecount,buttonClickCallback));
return $pager;
}
function changepage(buttonLabel,pagecount,buttonClickCallback){
var $btngoto = $('<li class="pgNext">'+ buttonLabel+'</li>');
$btngoto.click(function() {
var gotoval = $('#gotoval').val();
var patrn = /^[1-9]{1,20}$/;
if (!patrn.exec(gotoval)){
alert("请输入非零的正整数!");
return false;
}
var intval = parseInt(gotoval);
if(intval > pagecount){
alert("您输入的页面超过总页数 "+pagecount);
return ;
}
buttonClickCallback(intval);
});
return $btngoto;
}
function renderButton(buttonLabel, pagenumber, pagecount, buttonClickCallback) {
var $Button = $('<li class="pgNext">' + buttonLabel + '</li>');
var destPage = 1;
switch (buttonLabel) {
case "首页":
destPage = 1;
break;
case "上一页":
destPage = pagenumber - 1;
break;
case "下一页":
destPage = pagenumber + 1;
break;
case "末页":
destPage = pagecount;
break;
}
if (buttonLabel == "首页" || buttonLabel == "上一页") {
pagenumber <= 1 ? $Button.addClass('pgEmpty') : $Button.click(function() { buttonClickCallback(destPage); });
}
else {
pagenumber >= pagecount ? $Button.addClass('pgEmpty') : $Button.click(function() { buttonClickCallback(destPage); });
}
return $Button;
}
$.fn.pager.defaults = {
pagenumber: 1,
pagecount: 1};
})(jQuery);
PagerDemo.js
$(document).ready(function() {
init(1);
});
//默认加载
function init(pagenumber){
//向服务器发送请求,查询满足条件的记录
//$.getJSON('',{},function(data){
//data 为返回json 对象 并包括(pagecount、totalcount)的key-value值;
var data = {'pagecount':15,'totalcount':150};
$("#pager").pager({ pagenumber: pagenumber, pagecount:data.pagecount,totalcount:data.totalcount, buttonClickCallback: PageClick});
//});
}
//回调函数
PageClick = function(pageclickednumber) {
init(pageclickednumber);
$("#result").html("Clicked Page " + pageclickednumber);
}
Pager.css
/* jquery.page.js css */
ul.pages {display:block;border:none;text-transform:uppercase;font-size:12px;margin:10px 0 50px;padding:0;}
ul.pages li {list-style:none;float:left;border:1px solid #b36d41;text-decoration:none;margin:0 5px 0 0;padding:5px;}
ul.pages li:hover {border:1px solid #afdfe4;background-color:#afdfe4;}
ul.pages li.pgEmpty {border:1px solid #f0f0f0;color:#d9d6c3;background-color:#f0f0f0;}
ul.pages li.thpoint {border:none;cursor:auto; color:#000;background-color:#fff;}
ul.pages li.pgCurrent {padding: 4px 4px;border: 3px double #fff; + border-color: #afdfe4;color:#FFF;font-weight:700;background-color:#afdfe4;}
PagerDemo.html
需要装载容器div
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery.pager.js Test</title>
<link href="Pager.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery.pager.js" type="text/javascript"></script>
<script src="PagerDemo.js" type="text/javascript"></script>
</head>
<body>
<h1 id="result">Click the pager below.</h1>
<div id="pager" ></div>
</body>
</html>
end...
- 大小: 3.2 KB
分享到:
相关推荐
简单好用的jQuery插件——Tdrag.js可以任意拖拽div内容.zip
jquery 分页——jqueryPage.js
图片文件上传回显jQuery插件
jquery插件,点击图片,弹出大图,方便查看
自己封装的实现无限级别延展功能的多级菜单,扩展源码简单,适合初学者学习。(不喜勿喷)
jquery插件 提示框 用法: 注意:因为没有使用css文件,而且在jquery.tooltip.js里通过对象的形式定义css,所以使用时,需要修改jquery.tooltip.js里的图片路径。
此插件可将所给字符串进行处理,是该字符串能够在鼠标以上时跳动起来,是一种文字特效的插件
原版效果:多种手风琴效果可供选择; 测试效果:立刻学会如何设置各种参数。 十分实用!
jQuery分页插件设置分页内容显示数量的分页代码 jQuery分页插件设置分页内容显示数量的分页代码
小巧的jquery文章分页插件,用得到就拿去吧!
jQueryPager(JQuery分页插件pagination实现Ajax分页) CSDN犀利助互群60168829
jquery pagination 分页组件 jquery pagination 分页组件 jquery pagination 分页组件 官网 https://pagination.js.org/index.html 文档 https://pagination.js.org/docs/index.html
此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢。 原插件CSS不太合理,使用浮动,故无法方便实现左右方向的定位,且未清除浮动,在中文修改...
效果描述: 在网页中我们经常要用到拖拽效果,无论是pc客户端还是手机页面 今天再次给大家推荐一个非常好用的插件 ...保证页面引入jQuery以及本插件的基础上,然后将你需要拖动的div的class如此一下
jquery分页插件带总数分页代码 jquery分页插件带总数分页代码
效果描述: 在网页中我们经常要用到拖拽效果,无论是pc客户端还是手机页面 今天再次给大家推荐一... 保证页面引入jQuery以及本插件的基础上,然后将你需要拖动的div的class如此一下 例如:$(".lanren").Tdrag();
里面有三个插件,附有说明文档,下载后解压使用,一个关于星星评分的,一个关于ui界面的,一个关于cookie的,一个类似于淘宝上看大图的那种功能
jquery分页组件,快速实现分页效果,使用该组件需导入jQuery,且jQuery须在该组件之前导入
jQuery游戏——小鸟飞行
jQuery的一个插件——验证码插件 @example: $.idcode.setCode();