可根据需求定制的jquery分页
可根据需求定制的jquery分页
本文讲述作者自己用jquery实现的,便于以后使用的分页框架。该分页框架兼容IE,FF,Chrome等主流浏览器,便于移植,可根据需求定制,不需要引入css样式,样式是使用json传入。
1,使用方法:
在需要设置分页的html文件里引入两个文件.一个是jquery.js,另外一个就是jquery.pager.update-1.0.js(这个是核心代码)。
<script src="jquery.js" type="text/javascript"></script> <script src="jquery.pager.update-1.0.js" type="text/javascript"></script>
html中body部分的内容如下:
<h1 id="result">Click the pager below.</h1> <div id="pager" class="jqpager"></div>
需要自己写的js如下;
<script type="text/javascript" language="javascript">
var RECORD_COUNT = 200;// 记录数
var PAGE_SIZE = 10;// 每页显示的条数
var LI_NUM = 5;// 显示的数字按钮个数
// 设置一些样式
var textButtonCss = {// 设置显示文本按钮的样式,根据自己需要定制
width:'40px',
height:'28px'
};
var TEXT_0 = {
firsttext:'<<',// 首页按钮的显示内容
prevtext:'<',// 上一页按钮的显示内容
nexttext:'>',// 下一页按钮显示的内容
lasttext:'>>'// 末页按钮显示的内容
};
//pagenumber 为当前页码
//pagecount 为显示页数
//PageClick 为回调函数
//pageclickednumber 为点击页码
$(function() {
$("#pager").pager({ pagenumber: 1, recordcount: RECORD_COUNT,pagesize:PAGE_SIZE,css_textButton:textButtonCss,text:TEXT_0, liNum:LI_NUM,buttonClickCallback: PageClick });
$("#result").html("Clicked Page " + 1);
});
PageClick = function(pageclickednumber) {
$("#pager").pager({ pagenumber: pageclickednumber, recordcount: RECORD_COUNT,pagesize:PAGE_SIZE,css_textButton:textButtonCss,text:TEXT_0,liNum:LI_NUM, buttonClickCallback: PageClick });
$("#result").html("Clicked Page " + pageclickednumber);
}
</script>
当然,能定制的不仅仅是这些,在jquery.pager.update-1.0.js找到可以定制的内容.
如下(我把其中的按钮分成两种:1,文本按钮,2,数字按钮):
$.fn.pager.defaults = {
pagenumber: 1,// 当前页码
recordcount: 20,// 记录总数
pagesize: 10,// 每页显示记录数
liNum:5,// 显示数字的个数
text:{// 页面上需要显示的文本,除数字外
firsttext: '<<',//显示的第一页文本
prevtext: '<',//显示的前一页文本
nexttext: '>',//显示的下一页文本
lasttext: '>>'//显示的最后一页文本
},
css_textButton:{// 文本按钮样式
width:'80px',
height:'28px'
},
css_classPages:{// 按钮外面的ul的样式
display:'block',
border:'none',
textTransform:'uppercase',
margin:'2px 0 15px 2px',
padding:'0',
cursor:'pointer'
},
css_classPagesLi:{// 所有按钮的样式
width:'30px',
height:'28px',
lineHeight:'28px',
listStyle:'none',
float:'left',
border:'1px solid #ccc',
borderRadius:'4px',
textDecoration:'none',
margin:'0 5px 0 0',
textAlign:'center',
fontSize:'12px',
fontFamily:'微软雅黑'
},
css_classPgEmpty:{// 文本按钮不能点击时的样式
border:'1px solid #aaa',
color:'#aaa',
cursor:'default'
},
css_classPgCurrent:{// 当前页码的样式
border:'1px solid #aaa',
color:'#000',
fontWeight:'700',
backgroundColor:'#eee'
},
css_classPagesLiHover:{// 鼠标经过时显示的样式
border:'1px solid #003f7e'
}
};
现在分享一下核心的jquery.pager.update-1.0.js代码吧。
(function($) {
$.fn.pager = function(options) {
var opts = $.extend({}, $.fn.pager.defaults, options);
return this.each(function() {
$(this).empty().append(renderpager(opts));
$(' li', this).mouseover(function() { document.body.style.cursor = "pointer"; }).mouseout(function() { document.body.style.cursor = "auto"; });
});
};
function getPageCount(totalCount, pageSize) {
var pageCount = 0;
pageCount = parseInt(totalCount / pageSize);
if (totalCount % pageSize > 0) {
pageCount++;
}
return pageCount;
}
var textButtonStyle,classPagesCss,classPagesLiCss,classPgEmptyCss,classPgCurrentCss,classPagesLiHoverCss;
function renderpager(opts) {
var pagecount = getPageCount(opts.recordcount, opts.pagesize);
var firsttext = opts.text.firsttext;
var prevtext = opts.text.prevtext;
var nexttext = opts.text.nexttext;
var lasttext = opts.text.lasttext;
var pagenumber = parseInt(opts.pagenumber);
var recordcount = opts.recordcoun;
var buttonClickCallback = opts.buttonClickCallback;
var liNum = opts.liNum;
textButtonStyle = opts.css_textButton;
classPagesCss = opts.css_classPages;
classPagesLiCss = opts.css_classPagesLi;
classPgEmptyCss = opts.css_classPgEmpty;
classPgCurrentCss = opts.css_classPgCurrent;
classPagesLiHoverCss = opts.css_classPagesLiHover;
var $pager = $('<ul class="pages"></ul>');
$pager.css(classPagesCss);
$pager.append(renderButton('first', firsttext, pagenumber, pagecount, buttonClickCallback)).append(renderButton('prev', prevtext, pagenumber, pagecount, buttonClickCallback));
var startPoint = 1;
var endPoint = liNum;
var space = (endPoint-1)/2;
if (pagenumber > pagecount) {
pagenumber = pagecount;
}
if (pagenumber > space) {
startPoint = pagenumber - space;
endPoint = pagenumber + space;
}
if (endPoint > pagecount) {
startPoint = pagecount - space*2;
endPoint = pagecount;
}
if (startPoint < 1) {
startPoint = 1;
}
for (var page = startPoint; page <= endPoint; page++) {
var currentButton = $('<li class="page-number">' + (page) + '</li>');
currentButton.css(classPagesLiCss).hover(function(){$(this).css(classPagesLiHoverCss);},function(){$(this).css(classPagesLiCss);});
page == pagenumber ? currentButton.css(classPgCurrentCss): currentButton.click(function() { buttonClickCallback(this.firstChild.data); });
currentButton.appendTo($pager);
}
$pager.append(renderButton('next', nexttext, pagenumber, pagecount, buttonClickCallback)).append(renderButton('last', lasttext, pagenumber, pagecount, buttonClickCallback));
return $pager;
}
// 渲染按钮
function renderButton(buttonLabel, buttonText, pagenumber, pagecount, buttonClickCallback) {
var $Button = $('<li class="pgNext">' + buttonText + '</li>');
var destPage = 1;
switch (buttonLabel) {
case "first":
destPage = 1;
break;
case "prev":
destPage = pagenumber - 1;
break;
case "next":
destPage = pagenumber + 1;
break;
case "last":
destPage = pagecount;
break;
}
if (buttonLabel == "first" || buttonLabel == "prev") {
pagenumber <= 1 ? $Button.css(classPgEmptyCss) : $Button.click(function() { buttonClickCallback(destPage); });
}else {
pagenumber >= pagecount ? $Button.css(classPgEmptyCss) : $Button.click(function() { buttonClickCallback(destPage); });
}
$Button.css(classPagesLiCss).hover(function(){$(this).css(classPagesLiHoverCss);},function(){$(this).css(classPagesLiCss).css(textButtonStyle);}).css(textButtonStyle);
return $Button;
}
$.fn.pager.defaults = {
pagenumber: 1,// 当前页码
recordcount: 20,// 记录总数
pagesize: 10,// 每页显示记录数
liNum:5,// 显示数字的个数
text:{// 页面上需要显示的文本,除数字外
firsttext: '<<',//显示的第一页文本
prevtext: '<',//显示的前一页文本
nexttext: '>',//显示的下一页文本
lasttext: '>>'//显示的最后一页文本
},
css_textButton:{
width:'80px',
height:'28px'
},
css_classPages:{
display:'block',
border:'none',
textTransform:'uppercase',
margin:'2px 0 15px 2px',
padding:'0',
cursor:'pointer'
},
css_classPagesLi:{
width:'30px',
height:'28px',
lineHeight:'28px',
listStyle:'none',
float:'left',
border:'1px solid #ccc',
borderRadius:'4px',
textDecoration:'none',
margin:'0 5px 0 0',
textAlign:'center',
fontSize:'12px',
fontFamily:'微软雅黑'
},
css_classPgEmpty:{
border:'1px solid #aaa',
color:'#aaa',
cursor:'default'
},
css_classPgCurrent:{
border:'1px solid #aaa',
color:'#000',
fontWeight:'700',
backgroundColor:'#eee'
},
css_classPagesLiHover:{
border:'1px solid #003f7e'
}
};
})(jQuery);
2,效果图:
如有错误,欢迎指出。