jquery分页组件(每页显示多少条)

/**
* 功能说明：jPager 分页插件
* 参数说明：pages:[] 分页的控件个数 @id:显示分页的div ID，@showSelectPage: 是否显示当前分页的条目过滤下拉框
* @currentpage 当前第几页
* @pagesize type：number 每页显示多少条目
* @total type：number 总条数
* @totalpage type：number 总页码数
* */(function ($) {
'use strict'; $.jPager = function (option) { if (!option || option.totalpage == 0) { for (var i = 0; i < option.pages.length; i++){
$('#'+ option.pages[i].id).empty();
}
return;
} var limitNumber = [20, 30, 50]; var defaultOption = {
pages: [{
id: '',
showSelectPage: true
}],
currentpage: 1, //当前页
pagesize: 20, //一页显示数量
total:1, //条数
totalpage: 1 //总页码
}; var pageObj = $.extend(defaultOption, option); if (pageObj.pages.length == 0) {
return;
} for (var i = 0; i < pageObj.pages.length; i++) {
var obj = pageObj.pages[i];
var _btnId = obj.id;
var _isShowSelect = obj.showSelectPage;
var tpl = '<div class="pager-left">总共&nbsp;'+ pageObj.total +'&nbsp;条</div></div><div class="pager-center"><span class="pager">';
if (_isShowSelect) {
tpl += '<span class="count" date-val="'+ pageObj.pagesize +'">'+ pageObj.pagesize +'</span>';
tpl += '<span class="pageCount">';
tpl += '<dl><dt class="open-dt" role-page="role-page" data-val="'+ pageObj.pagesize +'">';
tpl += '<i class="icon-yt-menu-list"></i></dt>';
tpl += '<dd style="display:none" data-val="'+limitNumber[0]+'">'+limitNumber[0]+'&nbsp;<i class="fa fa-check hide"></i></dd>';
tpl += '<dd style="display:none" data-val="'+limitNumber[1]+'">'+limitNumber[1]+'&nbsp;<i class="fa fa-check hide"></i></dd>';
tpl += '<dd style="display:none" data-val="'+limitNumber[2]+'">'+limitNumber[2]+'&nbsp;<i class="fa fa-check hide"></i></dd>';
tpl += '</dl></span>';
} tpl += '<span class="firstPage hide"><i class="fa fa-angle-double-left"></i></span><span class="pageContainer">'; var _pages = [];
if (pageObj.totalpage > 5) { if (pageObj.currentpage <= 3) {
_pages = [1, 2, 3, 4, 5];
} else if (pageObj.currentpage > 3 && (pageObj.totalpage - pageObj.currentpage >= 2)){
_pages[0] = pageObj.currentpage - 2;
_pages[1] = pageObj.currentpage - 1;
_pages[2] = pageObj.currentpage;
_pages[3] = pageObj.currentpage + 1;
_pages[4] = pageObj.currentpage + 2;
}else if (pageObj.currentpage > 3 && (pageObj.totalpage - pageObj.currentpage == 0)){
_pages[0] = pageObj.currentpage - 4;
_pages[1] = pageObj.currentpage - 3;
_pages[2] = pageObj.currentpage - 2;
_pages[3] = pageObj.currentpage - 1;
_pages[4] = pageObj.currentpage;
}else if (pageObj.currentpage > 3 && (pageObj.totalpage - pageObj.currentpage == 1)) {
_pages[0] = pageObj.currentpage - 3;
_pages[1] = pageObj.currentpage - 2;
_pages[2] = pageObj.currentpage - 1;
_pages[3] = pageObj.currentpage;
_pages[4] = pageObj.currentpage + 1;
} } else {
for (var j = 0; j < pageObj.totalpage; j++ ) {
_pages[j] = j + 1;
}
} for (var k = 0; k < _pages.length; k++ ) {
tpl += '<span class="page" data-page="page'+ _pages[k] +'">'+ _pages[k] +'</span>';
} tpl += '</span><span class="lastPage hide"><i class="fa fa-angle-double-right"></i></span></span></div>'; var _totalTpl = '<div class="pull-left">'+ pageObj.total +'&nbsp;<span>条数据</span></div>';
var _select = '<select id="goToPage">';
var _sOption = '';
for(var p = 0; p < pageObj.totalpage; p++) {
_sOption += '<option value="'+ (p + 1) +'">'+ (p + 1) +'</option>';
} _select += _sOption + '</select>';
var _gogoPage = '<div class="pager-right">跳转至'+ _select +'页</div>';
if (obj.showTotal) {
tpl = _totalTpl + tpl;
}
$('#'+_btnId).html(tpl+_gogoPage);
$('#goToPage').val(pageObj.currentpage); //设置上一页 、下一页 是否可见
if (pageObj.currentpage == 1) {
if (pageObj.totalpage >1) {
$('.lastPage').removeClass('hide');
}
}else if (pageObj.currentpage > 1) {
if (pageObj.currentpage == pageObj.totalpage) {
$('.firstPage').removeClass('hide');
}else{
$('.firstPage').removeClass('hide');
$('.lastPage').removeClass('hide');
}
} //切换页码
$('#goToPage').unbind().bind('change', function () {
var _val = $(this).val();
var page = {
// limit: $('.pager .count:eq(0)').text().trim(),
page: _val
} obj.callback(page);
}); //点击页码数量
$('.pageCount dd').click(function () { var _hasClass = $(this).children('i').hasClass('hide');
if (!_hasClass) {
return;
} var _text = $(this).text();
var _val = $(this).attr('data-val');
$('.pager .count').text(_text);
$(this).siblings('dd').children('i').addClass('hide');
$(this).children('i').removeClass('hide');
if($('#limit')){
$('#ipt_limit').val(_text);
} var page = {
limit: $('.pager .count:eq(0)').text().trim(),
page: 1
} $('.pageCount dd').slideUp(10, function () {
$(this).siblings('dt').attr('style', '').attr('data-val', _val);
$(this).siblings('dd').children('i').addClass('hide');
});
obj.callback(page);
}); //点击页码
$('span[data-page]').click(function () {
var _hasClass = $(this).hasClass('active'); if (_hasClass) {
return;
} var _page = $(this).attr('data-page');
$('span[data-page]').removeClass('active');
//$(this).addClass('active');
$('span[data-page="'+ _page +'"]').addClass('active');
if($('#ipt_page')){
$('#ipt_page').val(_page);
} var page = {
page: $('.pager:eq(0) .active').text().trim(),
limit: $('.pager .count:eq(0)').text().trim()
}
obj.callback(page);
}); //点击上一页
$('#'+_btnId +' span .firstPage i').bind('click', function () {
var currentPage = parseInt($('.pager:eq(0) .active').text().trim());
if (currentPage == 1) {
$('.firstPage').addClass('hide');
return;
}
var page = {
page: 1,
limit: $('.pager .count:eq(0)').text().trim()
}
obj.callback(page);
}); //点击下一页
$('#'+_btnId +' span .lastPage i').click(function () {
var currentPage = parseInt($('.pager:eq(0) .active').text().trim());
if (currentPage == pageObj.totalpage) {
$('.lastPage').addClass('hide');
return;
}
var page = {
page: pageObj.totalpage,
limit: $('.pager .count:eq(0)').text().trim()
}
obj.callback(page);
});
} //初始化，选中当前页码
$('span[data-page]').removeClass('active');
$('span[data-page="page'+ pageObj.currentpage +'"]').addClass('active'); /* 切换每页条数 */
$('.pageCount dt').click(function() { var _val = $(this).attr('data-val');
$(this).siblings('dd[data-val="'+_val+'"]').children('i').removeClass('hide'); $('dd').slideUp(10, function() {
$('.select-has-border').removeClass('select-has-border-open').children('dd').css('display', 'none');
$('.campaign-query').css('border-radius', '5px');
$('.cp-select').removeClass('cp_select_open');
});
var _isShow = $(this).siblings('dd').css('display') == 'none' ? false : true;
if (_isShow) {
$(this).siblings('dd').hide();//.removeClass('page-Open').addClass('page-Close')
var _css = {
'borderTop': '0px solid #ccc',
'border-top-right-radius': '0px',
'border-top-left-radius': '0px',
'backgroundColor': 'white',
'color': ''
};
$(this).css(_css);
} else {
$(this).siblings('dd').slideDown(10);//.removeClass('page-Close').addClass('page-Open')
var _css = {
'border-top-right-radius': '5px',
'border-top-left-radius': '5px',
'backgroundColor': '#414C59',
'color': 'white'
};
$(this).css(_css);
}
}); };
})(jQuery);

/* 分页 */
.pager{
height: 30px;
line-height: 30px;
padding: 0;
margin-top: 0;
margin-left: 70px;
display: inline-block;
}.pager{
float:left;
}.pager .pageCount{
float:left;
width:60px;
height: 30;
line-height: 30px;
text-align: left;
margin-left: -5px;
text-indent: 5px;
}.pager .count{
padding-top:3px;
float:left;
cursor:default;
}.pager .pageCount dl{
margin: 0;
padding: 0;
width: 60px;
}.pager .pageCount dt>i:first-child{
vertical-align:bottom;
margin-top: 3px;
}.pager .pageCount dd{
background-color: #414C59;
height: 24px;
width:60px;
line-height: 24px;
text-align: left;
text-indent: 5px;
color: white;
border:none;
}.pager .pageCount dd:last-child{
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}.pager .pageCount dd:hover{
background-color: #333E4D;
}.pager-left{
float:left;
width: 100px;
}.pager-center{
float:left;
width: 340px;
}.pager-right{
float: left;
width: 160px;
}#goToPage{
width:50px;
margin-left: 5px;
margin-right: 5px;
}.pager dt:hover{
color:#2AC3FA;
}.pager .firstPage{
margin-left: 20px;
}.pager .firstPage>i{
margin-top: 5px;
}.pager .page{
margin-left: 5px;
}.pager .lastPage{
margin-left: 10px;
}.pager .lastPage>i{
margin-top: 5px;
}.pager i.little{
font-size:10px;
vertical-align: top;
margin-top: 5px;
margin-left: 2px
}.pager span{
cursor: pointer;
border:1px solid transparent;
}.pager .page{
padding-left: 3px;
padding-right: 5px;
padding-top: 2px;
padding-bottom: 2px;
border-radius: 5px;
}.pager span.active{
background-color: #2AC3FA;
color:white;
padding-left: 5px;
padding-right: 5px;
padding-top: 1px;
padding-bottom: 2px;
border-radius: 5px;
}.pager span.page:hover{
background-color: white;
border:1px solid #2AC3FA;
color:#2AC3FA;
}.pager .lastPage:hover, .pager .firstPage:hover{
color:#2AC3FA;
}.pager .open{
color:#ffffff;
background-color: #414C59;
}.pager span{
display:inline-block;
height: 24px;
line-height: 20px;
margin-left: 2px;
float: left;
}.pager .pageContainer{
display: inline-block;
min-width: 26px;
width: auto;
height: 30px;
line-height: 30px;
overflow:hidden;
}

//分页控件
var option = {
pages: [{
id: 'pageIndex',
showSelectPage: false,
callback: function (option) {
//点击页码回调函数
//goPage(option);
var param = {
'grade_id': $('#addGrade').val(),
'class_id': $('#addClass').val(),
'start_date': $('#startTime').val(),
'end_date': $('#endTime').val(),
'status': $('#foodStatus').val()
}; param = $.extend(param, option);
renderSyllabusIndex(param); //点击页码的回调函数
}
}],
pagesize: _data.pagesize,
total: _data.total,
currentpage: _data.currentpage,
totalpage: _data.totalpage
}; $.jPager(option);