1.html
<link href="/stylesheets/Pager.css" rel="stylesheet" type="text/css"/>
<script src="/javascripts/web/jquery.pager.js" type="text/javascript"></script> <body>
<div id="pager">
<div id="countPage" style="display:none">{{maxPage}}</div>
<div id="title" style="display:none">{{title}}</div>
<div id="nowPage" style="display:none">{{page}}</div>
</div>
</body>
<script type="text/javascript">
var title =jQuery("#title").text() ;
var pageCount =parseInt(jQuery("#countPage").text()) ;
var nowPage=parseInt(jQuery("#nowPage").text());
jQuery(function(){
$("#pager").pager({ pagenumber: nowPage, pagecount: pageCount, buttonClickCallback: PageClick });//pagenumber:当前页，pagecount:总页数
});
PageClick = function(pageclickednumber) {
$("#pager").pager({
pagenumber: pageclickednumber, pagecount: pageCount, buttonClickCallback: PageClick
});
window.location.href = "/article/search/"+title+"/"+pageclickednumber;
}
</script>
2.Pager.css
#pager ul.pages{
display:block;
border:none;
text-transform:uppercase;
font-size:10px;margin:10px 50px;padding:;
}
#pager ul.pages li{
list-style:none;
float:left;
border:1px solid #ccc;
text-decoration:none;
margin:-20px 5px ;padding:5px;
}
#pager ul.pages li:hover{border:1px solid #003f7e; }
#pager ul.pages li.pgEmpty{
border:1px solid #eee;
color:#eee;
}
#pager ul.pages li.pgCurrent{
border:1px solid #3c90d9;
color: #fff;
font-weight:;
/*background-color:#eee;*/
background: #3c90d9 none repeat scroll ;
}
#pager{margin-left: 290px;}
3.jquery.pager.js
/*
* jQuery pager plugin
* Version 1.0 (12/22/2008)
* @requires jQuery v1.2.6 or later
*
* Example at: http://jonpauldavies.github.com/JQuery/Pager/PagerDemo.html
*
* Copyright (c) 2008-2009 Jon Paul Davies
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* Read the related blog post and contact the author at http://www.j-dee.com/2008/12/22/jquery-pager-plugin/
*
* This version is far from perfect and doesn't manage it's own state, therefore contributions are more than welcome!
*
* Usage: .pager({ pagenumber: 1, pagecount: 15, buttonClickCallback: PagerClickTest });
*
* Where pagenumber is the visible page number
* pagecount is the total number of pages to display
* buttonClickCallback is the method to fire when a pager button is clicked.
*
* buttonClickCallback signiture is PagerClickTest = function(pageclickednumber)
* Where pageclickednumber is the number of the page clicked in the control.
*
* The included Pager.CSS file is a dependancy but can obviously tweaked to your wishes
* Tested in IE6 IE7 Firefox & Safari. Any browser strangeness, please report.
*/
(function($) { $.fn.pager = function(options) { var opts = $.extend({}, $.fn.pager.defaults, options); return this.each(function() { // empty out the destination element and then render out the pager with the supplied options
$(this).empty().append(renderpager(parseInt(options.pagenumber), parseInt(options.pagecount), options.buttonClickCallback)); // specify correct cursor activity
$('.pages li').mouseover(function() { document.body.style.cursor = "pointer"; }).mouseout(function() { document.body.style.cursor = "auto"; });
});
}; // render and return the pager with the supplied options
function renderpager(pagenumber, pagecount, buttonClickCallback) { // setup $pager to hold render
var $pager = $('<ul class="pages"></ul>'); // add in the previous and next buttons
//$pager.append(renderButton('first', pagenumber, pagecount, buttonClickCallback)).append(renderButton('prev', pagenumber, pagecount, buttonClickCallback));
$pager.append(renderButton('上一页', pagenumber, pagecount, buttonClickCallback));
// pager currently only handles 10 viewable pages ( could be easily parameterized, maybe in next version ) so handle edge cases
var startPoint = ;
//var endPoint = 9;
var endPoint = ;
if (pagenumber > && pagenumber<pagecount-) {
startPoint = pagenumber - ;
endPoint = pagenumber + ;
}
if(pagenumber>pagecount-&& pagenumber<pagecount+){
startPoint = pagecount - ;
endPoint = pagecount;
}
if (endPoint > pagecount) {
startPoint = pagecount - ;
endPoint = pagecount;
} if (startPoint < ) {
startPoint = ;
} // loop thru visible pages and render buttons
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);
} // render in the next and last buttons before returning the whole rendered control back.
//$pager.append(renderButton('next', pagenumber, pagecount, buttonClickCallback)).append(renderButton('last', pagenumber, pagecount, buttonClickCallback));
$pager.append(renderButton('下一页', pagenumber, pagecount, buttonClickCallback));
return $pager;
} // renders and returns a 'specialized' button, ie 'next', 'previous' etc. rather than a page number button
function renderButton(buttonLabel, pagenumber, pagecount, buttonClickCallback) { var $Button = $('<li class="pgNext">' + buttonLabel + '</li>'); var destPage = ; // work out destination page for required button type
switch (buttonLabel) {
case "first":
destPage = ;
break;
case "上一页":
destPage = pagenumber - ;
break;
case "下一页":
destPage = pagenumber + ;
break;
case "last":
destPage = pagecount;
break;
} // disable and 'grey' out buttons if not needed.
if (buttonLabel == "first" || buttonLabel == "上一页") {
pagenumber <= ? $Button.addClass('pgEmpty') : $Button.click(function() { buttonClickCallback(destPage); });
}
else {
pagenumber >= pagecount ? $Button.addClass('pgEmpty') : $Button.click(function() { buttonClickCallback(destPage); });
} return $Button;
} // pager defaults. hardly worth bothering with in this case but used as placeholder for expansion in the next version
$.fn.pager.defaults = {
pagenumber: ,
pagecount:
}; })(jQuery);
4.结果:
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYYAAABCCAIAAADc7OakAAADfUlEQVR4nO3aPW7bQBRFYe1JbZbBpcxCAswSvAJ6Cy6VhmUMpEwjOEWQxkAKppBMChRpzs+z3yVzPrhL9GYoUseU5EMPADIO3hsAgBFJAiCEJAEQQpIACCFJAISQJABCSBIAISQJgBCSBEAISQIghCQBEEKSAAjZapK+uTLZzGTIl6/fC34+YidbH2Kl5LpEtQ0nSWfpgs3cP8QqSfU72fQQKyTJC0kyWJok6QyxQpK8kCSDpUmSzhArJMkLSTJYmiTpDLFCkryQJIOlSZLOECskyQtJMliaJOkMsUKSvJAkg6VJks4QKyTJC0kyWJok6QyxQpK8kCSDpUmSzhArJMnLLpPUhmNoc6a14bjoblLyK6eLzbGJ3eyKiUl6OL/98/lXcZK62CwcStbh9JfnqWLIzdM8N2V9yHAkc5ae6pnV108ySXJDku4fvPLYpJffJUcxVCXp8c/LzX94PpUlqY2XPXSxmdtNepLa0ITQVCXp3Wzk3SV1cX4rSVZPMklyQ5Ku5n8Bl/0yv9lIZZKeTmObSpM0bqbqcNrQxG6pAxtJUvpJJklu9pqk1Utuqoth+nJZuOg/L0nDz+m17/8+Pda9cVt4GpLfc4V2uQOZb9zmn5XsJKWf3eExqSeZJLnZa5Iml9n6hxDj1Tp0RCRJp9e+719+/Kz9eLsNsylIOZzhCa1LksFORtettGFInOVJJklu/pMkrbu9Wq8PFkjSw7lfuj/K/8Zt/ngSDmf6wXDKh8EFJ6j4jVsXm9xb4bWTTJLckKSr4WodH+ydpPHrtr7viz9Lun3xVd+bVN0lDTuxvEvKkn6SSZIbkjR54LGJ3dtdwfyQ7C+8024rPipJ4/sZg09w6t64vf/XCJ/1jVvSSSZJbnaTJJM/WZlcnteLd21p/lTSY0h2krJOMklys5skeS5NknSGWCFJXkiSwdIkSWeIFZLkhSQZLE2SdIZYIUleSJLB0iRJZ4gVkuSFJBksTZJ0hlghSV5IksHSJElniBWS5IUkGSxNknSGWCFJXjacJEcmm5kMsUqSyOE4DrFScl2i2laTBGCXSBIAISQJgBCSBEAISQIghCQBEEKSAAghSQCEkCQAQkgSACEkCYAQkgRACEkCIOTwGwBkkCQAQkgSACEkCYAQkgRACEkCIIQkARBCkgAIIUkAhJAkAEJIEgAhJAmAEJIEQMg/TUWnDtvMc/sAAAAASUVORK5CYII=" alt="" />