<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分页效果(face项目)</title>
<script src="src/jquery-1.11.1.js"></script>
<script src="src/jquery.pagebar.1.0.0.js"></script>
<link rel="stylesheet" href="css/pagebar.css">
</head>
<body>
<div class="pagebar" id="pagebar"></div>
<script>
initPageBar(5, 25,30,160);
function initPageBar(pageNo, totalPage,pageSize,rowCount) {
pageInstance = $.fn.jpagebar({
renderTo : $(".pagebar"),
totalpage : totalPage,
currentPage : pageNo,
pageSize : pageSize,
rowCount : rowCount,
pageNameCssName : 'pageName',
onClickPage : function(pageIndex,pageSize) {
$.fn.setCurrentPage(this, pageIndex,pageSize);
pageNo = pageIndex;
pageSize=pageSize;
}
});
}
</script>
</body>
</html>
(function($) {
$.extend($.fn, {
jpagebar : function(setting) {
var pb = $.extend({
renderTo : $(document.body),
totalpage : 0,
currentPage : 0,
pageSize:0,
rowCount:0,
pagebarCssName : 'pagebar',
pageNumberCssName : 'page_number',
pageNameCssName : 'pageName',
currentPageNameCssName : 'current_pageName',
currentPageNumberCssName : 'current_page_number',
totalpageNumberCssName : 'totalpage_number',
onClickPage : function(pageIndex,pageSize) {
}
}, setting);
pb.resetPagebar = function() {
var _this = this;
_this.renderTo = (typeof _this.renderTo == 'string' ? $(_this.renderTo) : _this.renderTo);
var pagebar = _this.renderTo;
pagebar.attr('class', _this.pagebarCssName);
pagebar.empty();
var front_block = parseInt(_this.currentPage) - 4;
var back_block = parseInt(_this.currentPage) + 4;
if (_this.currentPage == 1) {
$('<a>首页</a> ').attr('class', _this.pageNameCssName + ' ' + _this.currentPageNameCssName).appendTo(pagebar);
$('<a>上一页</a> ').attr('class', _this.pageNameCssName + ' ' + _this.currentPageNameCssName).appendTo(pagebar);
}
else {
$('<a>首页</a> ').attr('class', _this.pageNameCssName).bind("click", function() {
_this.onClickPage(1,pageSize);
}).appendTo(pagebar);
$('<a>上一页</a> ').attr('class', _this.pageNameCssName).bind("click", function() {
_this.onClickPage(_this.currentPage - 1,pageSize);
}).appendTo(pagebar);
}
if (_this.totalpage == 1) {
$('<a>1</a> ').attr('class', _this.currentPageNumberCssName).bind("click", function() {
_this.onClickPage(1,pageSize);
}).appendTo(_this.renderTo);
}
else {
var tempBack_block = _this.totalpage;
var tempFront_block = 1;
if (back_block < _this.totalpage)
tempBack_block = back_block;
if (front_block > 1)
tempFront_block = front_block;
for ( var i = tempFront_block; i <= tempBack_block; i++) {
if (_this.currentPage == i) {
$('<a>' + i + '</a> ').attr('class', _this.pageNumberCssName + ' ' + _this.currentPageNumberCssName).appendTo(pagebar);
}
else {
$('<a>' + i + '</a> ').attr('class', _this.pageNumberCssName).bind("click", function() {
_this.onClickPage(this.innerHTML,pageSize);
}).appendTo(pagebar);
}
}
}
if (_this.currentPage == _this.totalpage) {
$('<a>下一页</a> ').attr('class', _this.pageNameCssName + ' ' + _this.currentPageNameCssName).appendTo(pagebar);
$('<a>尾页</a> ').attr('class', _this.pageNameCssName + ' ' + _this.currentPageNameCssName).appendTo(pagebar);
}
else {
$('<a>下一页</a> ').attr('class', _this.pageNameCssName).bind("click", function() {
_this.onClickPage(parseInt(_this.currentPage) + 1,pageSize);
}).appendTo(pagebar);
$('<a>尾页</a> ').attr('class', _this.pageNameCssName).bind("click", function() {
_this.onClickPage(_this.totalpage,pageSize);
}).appendTo(pagebar);
}
var pager='';
var pageSize=_this.pageSize;
var rowCount=_this.rowCount;
pager += "<div class=\"pageTextBox\" id=\"selectRowCount\">共"+rowCount+"项,每页显示 <select id=\"pageSize\" name=\"pageSize\" class=\"input_ff\" onchange=\"$.fn.changeTotal()\">";
if(pageSize==10){
pager += " <option value=\"10\" selected=\"selected\" > 10 </option>";
}else{
pager += " <option value=\"10\" > 10 </option>";
}
if(pageSize==15){
pager += " <option value=\"15\" selected=\"selected\" > 15 </option>";
}else{
pager += " <option value=\"15\" > 15 </option>";
}
if(pageSize==20){
pager += " <option value=\"20\" selected=\"selected\" > 20 </option>";
}else{
pager += " <option value=\"20\" > 20 </option>";
}
if(pageSize==30){
pager += " <option value=\"30\" selected=\"selected\" > 30 </option>";
}else{
pager += " <option value=\"30\" > 30 </option>";
}
if(pageSize==50){
pager += " <option value=\"50\" selected=\"selected\" > 50 </option>";
}else{
pager += " <option value=\"50\" > 50 </option>";
}
if(pageSize==100){
pager += " <option value=\"100\" selected=\"selected\" > 100 </option>";
}else{
pager += " <option value=\"100\" > 100 </option>";
}
pager += " </select>条记录" ;
pager +="<div class=\"goPage\">";
pager +='到<input text id=\"pageNoText\" onkeyup="$.fn.limitSize('+_this.totalpage+')" placeholder="'+_this.totalpage+'" style="width:40px;">页';
pager +='<span class="oBtn goBtn" onclick="$.fn.jumpPage()" >跳转</span>';
pager +="</div>";
pager +="</div>";
$(pager).appendTo(pagebar);
if (totalpage = 0) {
return;
}
};
pb.resetPagebar();
return pb;
},
changeTotal : function() {
$('#searchBtn').click();
},
limitSize : function(renderTo) {
var text = $("#pageNoText").val();
text=text.replace(/\D/g,'');
if(text > renderTo){
$("#pageNoText").val(renderTo);
}else if(text <= 0 ){
$("#pageNoText").val(1);
}else{
$("#pageNoText").val(text);
}
},
jumpPage : function(_this){
var pageNoText = $("#pageNoText").val();
var pageSize= $("#pageSize option:selected").val();
if(pageNoText != ""){
search(pageNoText,pageSize,"next");
}
},
setCurrentPage : function(_this, currentPage,pageSize) {
_this.currentPage = currentPage;
_this.pageSize = pageSize;
_this.resetPagebar(_this);
},
getCurrentPage:function(_this) {
return _this.currentPage;
},
setTotalPage : function(_this,currentPage,totalpage,pageSize,rowCount) {
_this.currentPage = currentPage;
_this.totalpage = totalpage;
_this.pageSize = pageSize;
_this.rowCount = rowCount;
_this.resetPagebar(_this);
}
});
})(jQuery);
.pagebar {
width:100%;
margin:10px 0 0 0;
position:relative;
display:inline-block;
padding:10px;
background:#e5eee2;
border-top:2px solid #309a0a;
z-index:12;
}
#pagebar{position:fixed;bottom:0;left:0;}
#selectRowCount{line-height:27px;}
.pagebar a {
color: #5A9D0F;
border: 1px solid #5A9D0F;
cursor: pointer;
height: 25px;
text-align: center;
line-height: 25px;
display: inline-block;
margin-left: 5px;
float: left;
}
.pagebar a:hover,.pagebar a.on {
color: #FFF;
background-color: #5A9D0F;
}
.pageName {
width: 80px;
}
.page_number {
width: 25px;
}
.current_pageName {
cursor: default;
border: 1px solid #eee;
color: #ddd;
}
.current_page_number {
color: #FFF;
background-color: #a6a7ab;
width: 25px;
}
#jpagebar a.current_pageName,#jpagebar a.current_page_number {
color: #FF6600;
font-weight:bold;
border:none;
background: none;
}
.totalpage_number {
color: #2278db;
border: 1px solid #5A9D0F;
height: 25px;
line-height: 25px;
width: 60px;
text-align: center;
margin-left: 5px;
}
.pagebar a.current_pageName,#jpagebar a.current_pageName {color:#999999;
border: 1px solid #999999;}
.pagebar a.current_page_number,#jpagebar a.current_page_number{
color:#ffffff; background-color:#7cc064;}
.pagebar a:hover, .pagebar a.on,#jpagebar a:hover, #jpagebar a.on{
background: #7cc064; color:#ffffff; background-color: #7cc064; }
.pagebar a.current_pageName:hover{color:#999999;
border: 1px solid #999999; background:none;cursor: default;}
.input_ff{width:50px;height:25px;}
#pageNoText{text-align:center; margin:0 4px 0 5px;}
.pageTextBox,.goPage{display:inline-block; margin:0 0 0 20px;}
.pagebar .goBtn{margin:0 0 0 4px;padding:0 10px;color: #5A9D0F;height:25px;line-height:25px;
border: 1px solid #5A9D0F;background:none;border-radius:0;}
.pagebar .goBtn:hover{color:#ffffff;background:#7cc064}