JQuery分页组件

 

代码

// 每次只显示5个页码
( function ($) {
// 设定页码方法，初始化
$.fn.setPager = function (options) {
var opts = $.extend({}, pagerDefaults, options);
return this .each( function () {
$( this ).empty().append(setPagerHtml(parseInt(options.RecordCount), parseInt(options.PageIndex), options.buttonClick));

});
};
// 设定页数及html
function setPagerHtml(RecordCount, PageIndex, pagerClick) {

var $content = $( " <ul class=\ " pages\ " ></ul> " );
var startPageIndex = 1 ;
// 若页码超出
if (RecordCount <= 0 ) RecordCount = pagerDefaults.PageSize;
// 末页
var endPageIndex = parseInt(RecordCount % parseInt(pagerDefaults.PageSize)) > 0 ? parseInt(RecordCount / parseInt(pagerDefaults.PageSize)) + 1 : RecordCount / parseInt(pagerDefaults.PageSize)

if (PageIndex > endPageIndex) PageIndex = endPageIndex;
if (PageIndex <= 0 ) PageIndex = startPageIndex;
var nextPageIndex = PageIndex + 1 ;
var prevPageIndex = PageIndex - 1 ;
if (PageIndex == startPageIndex) {
$content.append($( " <li><span class=\ " beginEnd\ " >首页</span></li> " ));
$content.append($( " <li><span class=\ " beginEnd\ " >上一页</span></li> " ));
} else {

$content.append(renderButton(RecordCount, 1 , pagerClick, " 首页 " ));
$content.append(renderButton(RecordCount, prevPageIndex, pagerClick, " 上一页 " ));
}
// 这里判断是否显示页码
if (pagerDefaults.ShowPageNumber) {
// var html = "";
// 页码部分隐藏 只显示中间区域
if (endPageIndex <= 5 && PageIndex <= 5 ) {
for ( var i = 1 ; i <= endPageIndex; i ++ ) {
if (i == PageIndex) {
$content.append($( " <li><span class=\ " current\ " > " + i + " </span></li> " ));
} else {
$content.append(renderButton(RecordCount, i, pagerClick, i));
}

}

} else if (endPageIndex > 5 && endPageIndex - PageIndex <= 2 ) {

$content.append($( " <li class=\ " dotted\ " >...</li> " ));
for ( var i = endPageIndex - 4 ; i <= endPageIndex; i ++ ) {
if (i == PageIndex) {
$content.append($( " <li><span class=\ " current\ " > " + i + " </span></li> " ));
} else {
$content.append(renderButton(RecordCount, i, pagerClick, i));
}

}
} else if (endPageIndex > 5 && PageIndex > 3 ) {

$content.append($( " <li class=\ " dotted\ " >...</li> " ));
for ( var i = PageIndex - 2 ; i <= PageIndex + 2 ; i ++ ) {
if (i == PageIndex) {
$content.append($( " <li><span class=\ " current\ " > " + i + " </span></li> " ));
} else {
$content.append(renderButton(RecordCount, i, pagerClick, i));
}

}
$content.append($( " <li class=\ " dotted\ " >...</li> " ));

} else if (endPageIndex > 5 && PageIndex <= 3 ) {

for ( var i = 1 ; i <= 5 ; i ++ ) {
if (i == PageIndex) {
$content.append($( " <li><span class=\ " current\ " > " + i + " </span></li> " ));
} else {
$content.append(renderButton(RecordCount, i, pagerClick, i));
}

}
$content.append($( " <li class=\ " dotted\ " >...</li> " ));
}
}
if (PageIndex == endPageIndex) {
$content.append($( " <li><span class=\ " beginEnd\ " >下一页</span></li> " ));
$content.append($( " <li><span class=\ " beginEnd\ " >末页</span></li> " ));
} else {
$content.append(renderButton(RecordCount, nextPageIndex, pagerClick, " 下一页 " ));
$content.append(renderButton(RecordCount, endPageIndex, pagerClick, " 末页 " ));
}


return $content;
}
function renderButton(recordCount, goPageIndex, EventHander, text) {
var $goto = $( " <li><a title=\ " 第 " + goPageIndex + " 页\ " > " + text + " </a></li>\ "" );
$goto.click(function() {

EventHander(recordCount, goPageIndex);
});
return $goto;
}
var pagerDefaults = {
DefaultPageCount: 1,
DefaultPageIndex: 1,
PageSize: 20,
ShowPageNumber: true //是否显示页码
};
})(jQuery);

 

 

     自己模仿别人写的一个JQ分页插件，代码简单易懂，欢迎下载使用。下面为效果

 

 

下载地址：jquery-pager-1.0分页下载

转载于:https://www.cnblogs.com/EA_YOYO/archive/2010/12/23/jquery-pager.html