jquery分页插件

浏览数：29 / 时间：2015年06月09日

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>