jquery.mypagination.js 文件：

/* *

*?
* jquery分頁插件
* 1.0 ?zheng 2014-03-18?
* 1.1 ?兼容url包含#號地址，GoToPage可以指定錨點（特殊需求）2014-04-10 09:00:34
* 1.2 ?可以配置分頁條列出頁面數
* 1.3 ?增加了頁面碼跳轉功能
* ?$('#mypage').scPagination(555, {
* ? ? ? ? ? ? ?pageSize: 10,//每頁顯示的記錄條數
* ? ? ? ? ? myPagerCount:10,//分頁條顯示的頁面個數
* ? ? ? ? ? ? ?callback: function (page) {
* ? ? ? ? ? ? ? ? ?alert("選擇了頁碼"+page);
* ? ? ? ? ? ? ?}
* ? ? ? ? ?});
*/



$.fn.scPagination = function (totalProperty, opts) {
? ? opts = $.extend({
? ? ? ? pageSize: 10,
myPagerCount:10,
? ? ? ? callback: function () {
? ? ? ? }
? ? }, opts || {});
? ? return this.each(function () {
? ? ? ? function numPages() {
? ? ? ? ? ? return Math.ceil(totalProperty / opts.pageSize);
? ? ? ? }




? ? ? ? function selectPage(page) {
? ? ? ? ? ? return function () {
? ? ? ? ? ? ? ? currPage = page;
? ? ? ? ? ? ? ? if (page < 1) currPage = 1;
? ? ? ? ? ? ? ? if (page >= numPages()) currPage = numPages();
? ? ? ? ? ? ? ? render();
? ? ? ? ? ? ? ? opts.callback(currPage);
? ? ? ? ? ? }
? ? ? ? }


? ? ? ? function render() {
? ? ? ? ? ? var html = '<div class="Page">'
?+ '<div>[共<span class="Total">' + totalProperty + '</span>條]</div>'
?+ '<a id="page-first" href="javascript:void(0);">首頁</a>'
?+ '<a id="page-prev" href="javascript:void(0);">上頁</a>';
var fistPage=1;
var lastPage=numPages();
if(currPage>Math.ceil((opts.myPagerCount-1)/2))
{
fistPage=currPage-Math.ceil((opts.myPagerCount-1)/2);
}
if(fistPage>numPages()-opts.myPagerCount+1)
{
fistPage=numPages()-opts.myPagerCount+1;
}
if(fistPage<1)fistPage=1;
lastPage=opts.myPagerCount+fistPage-1;
if(lastPage>numPages())lastPage=numPages();


? ? ? ? ? ? for (i = fistPage; i <= lastPage; i++) {
? ? ? ? ? ? ? ? //if (currPage + i <= numPages() && currPage + i > 0) {
? ? ? ? ? ? ? ? ? ? html += '<a href="javascript:void(0);" class="NumPage">' + i + '</a>';
? ? ? ? ? ? ? ?// }
? ? ? ? ? ? }


? ? ? ? ? ? html += '<a id="page-next" href="javascript:void(0);">下頁</a>'
? ? ? ? ? ? ? ? ?+ '<a ?id="page-last" href="javascript:void(0);">尾頁</a>'
+ '<input id="txtGoTo" class="page-num"/><a id="btnGoTo" href="javascript:void(0);">GO</a>'
? ? ? ? ? ? ? ? ?+ '</div>';


? ? ? ? ? ? if (currPage > 0) {


? ? ? ? ? ? }
? ? ? ? ? ? if (currPage < numPages()) {


? ? ? ? ? ? }
? ? ? ? ? ? panel.empty();
? ? ? ? ? ? panel.append(html);
? ? ? ? ? ? $('#page-first', panel)
? ? ? ? ? ? ? ? .bind('click', selectPage(1));
? ? ? ? ? ? $('#page-prev', panel)
? ? ? ? ? ? ? ? .bind('click', selectPage(currPage - 1));
? ? ? ? ? ? $('#page-next', panel)
? ? ? ? ? ? ? ? .bind('click', selectPage(currPage + 1));
? ? ? ? ? ? $('#page-last', panel)
? ? ? ? ? ? ? ? .bind('click', selectPage(numPages()));?

? ? ? ? ? ? $('.NumPage').each(function () {
? ? ? ? ? ? ? ? $(this).bind('click', selectPage(parseInt($(this).text())));
? ? ? ? ? ? ? ? if (parseInt($(this).text()) == (currPage)) {


? ? ? ? ? ? ? ? ? ? $(this).attr('class', 'Selected');
? ? ? ? ? ? ? ? }
? ? ? ? ? ? });







? ? ? ? ? ? $('input.page-num', panel)
? ? ? ? ? ? ? ? .val(currPage)
? ? ? ? ? ? ? ? .change(function () {
? ? ? ? ? ? ? ? ? ? selectPage($(this).val())();
? ? ? ? ? ? ? ? });


$('#btnGoTo',panel)
.bind('click',?
function()
{
var goPage=parseInt($('#txtGoTo').val());
selectPage(goPage)();
}
);?






? ? ? ? ? ? if (request("pageIndex") != "") {
? ? ? ? ? ? ? ? $('.Selected').each(function () {


? ? ? ? ? ? ? ? ? ? $(this).attr('class', 'NumPage');


? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? $('.NumPage').each(function () {
? ? ? ? ? ? ? ? ? ? if (parseInt($(this).text()) == parseInt(request("pageIndex"))) {
? ? ? ? ? ? ? ? ? ? ? ? $(this).attr('class', 'Selected');
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? });
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? var currPage = 1;
? ? ? ? if (request("pageIndex") != "") {
? ? ? ? ? ? currPage = parseInt(request("pageIndex"));
? ? ? ? }
? ? ? ? var panel = $(this);
? ? ? ? render();


? ? ? ? function request(paras) {
? ? ? ? ? ? var url = location.href;
? ? ? ? ? ? var paraString = url.substring(url.indexOf("?") + 1, url.length).split("&");
? ? ? ? ? ? var paraObj = {}
? ? ? ? ? ? for (i = 0; j = paraString[i]; i++) {
? ? ? ? ? ? ? ? paraObj[j.substring(0, j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=") + 1, j.length);
? ? ? ? ? ? }
? ? ? ? ? ? var returnValue = paraObj[paras.toLowerCase()];
? ? ? ? ? ? if (typeof (returnValue) == "undefined") {
? ? ? ? ? ? ? ? return "";
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? return returnValue;
? ? ? ? ? ? }
? ? ? ? }


? ? });
}




//獲取url參數 request("ID")
function request(paras) {
? ? var url = location.href;
? ? var splitChar = /[&#]/;//設置分隔字符
? ? var paraString = url.substring(url.indexOf('?') + 1, url.length).split(splitChar);
? ? var paraObj = {}
? ? for (i = 0; j = paraString[i]; i++) {
? ? ? ? paraObj[j.substring(0, j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=") + 1, j.length);
? ? }
? ? var returnValue = paraObj[paras.toLowerCase()];
? ? if (typeof (returnValue) == "undefined") {
? ? ? ? return "";
? ? } else {
? ? ? ? return returnValue;
? ? }
}


function GoToPage(page, anchor) {


? ? var oUrl = this.location.href.toString();
? ? if (anchor && oUrl.indexOf("#" + anchor) > 0) {
? ? ? ? oUrl=oUrl.replace("#" + anchor, "");
? ? }
? ? var re = eval('/(pageIndex=)([^&|#]*)/gi');
? ? var nUrl = oUrl.replace(re, 'pageIndex=' + page);
? ? if (request("pageIndex") == "") {
? ? ? ? if (oUrl.indexOf("?") <= 0) {
? ? ? ? ? ? nUrl = nUrl + "?pageIndex=" + page;
? ? ? ? }
? ? ? ? else {
? ? ? ? ? ? nUrl = nUrl + "&pageIndex=" + page;
? ? ? ? }
? ? }
? ? if (anchor && oUrl.indexOf("#" + anchor) < 0) {//鏈接到錨點
? ? ? ? anchor = anchor.replace('#', '');
? ? ? ? nUrl = nUrl + "#" + anchor;
? ? }
? ? this.location = nUrl;
}




function replaceParamVal(paramName, replaceWith) {
? ? var oUrl = this.location.href.toString();
? ? var re = eval('/(' + paramName + '=)([^&|#]*)/gi');
? ? var nUrl = oUrl.replace(re, paramName + '=' + replaceWith);
? ? this.location = nUrl;
}




/***用到的樣式 為了方便直接寫在了此處**/
document.write(" <style type=\"text/css\">");
document.write("/*分頁開始*/");
document.write(".Page");
document.write("{");
document.write(" height: 26px;");
document.write("}");


document.write(" .Page div");
document.write(" {");
document.write(" display: inline-block;");
document.write(" zoom: 1;");
document.write(" font-size: 14px;");
document.write(" }");


document.write(" .Page .Total");
document.write(" {");
document.write(" color: #cc0000;");
document.write(" }");


document.write(" .Page a");
document.write(" {");
document.write(" padding: 4px 5px;");
document.write(" height: 14px;");
document.write(" line-height: 14px;");
document.write(" font-size: 14px;");
document.write(" border: 1px solid #d5d5d5;");
document.write(" margin: 0px 5px;");
document.write(" display: inline-block;");
document.write(" }");


document.write(" .Page a:hover");
document.write(" {");
document.write(" text-decoration: underline;");
document.write(" border-color: #cc0000;");
document.write(" }");


document.write(" .Page .Selected");
document.write(" {");
document.write(" background: #cc0000;");
document.write(" border-color: #cc0000;");
document.write(" color: #ffffff;");
document.write(" display: inline-block;");
document.write(" zoom: 1;");
document.write(" }");
document.write(" .Page input");
document.write(" {");
document.write(" width:40px;");
document.write(" overflow-x:visible;");
document.write(" padding: 4px 5px;");
document.write(" height: 14px;");
document.write(" line-height: 14px;");
document.write(" font-size: 14px;");
document.write(" border: 1px solid #d5d5d5;");
document.write(" margin: -3px 0px 0px 5px;");
document.write(" display: inline-block;");
document.write(" }");
document.write("/*分頁結束*/");

document.write(" </style>");

test.html 測試文件：

<head> ?
? ? <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> ?
? ? <script type="text/javascript" src="jquery.mypagination.js"></script> ?
</head> ?

?<div id="mypage" class="Pagination" style="margin-bottom: 0px;"></div>
?<script> ?
? ? ? ? $(document).ready(function(){ ?
? ? ? ? ? ? $('#mypage').scPagination(555,{
pageSize:20,
myPagerCount:10,
? ? ? ? ? ? ? ? callback:function(page){ ?
? ? ? ? ? ? ? ? ? ? alert(page); ?
? ? ? ? ? ? ? ? } ?
? ? ? ? ? ? }); ?
? ? ? ? }); ?
?</script> ?