可根據需求定制的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部分的內容如下:
<h2 id="result">Click the pager below.</h2> <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,效果圖:
如有錯誤,歡迎指出。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
