jQuery表格分页代码

body,html{font-family: "microsoft yahei"}

.main {

width: 971px;

zoom: 1;

margin: 100px auto;

}

.main h2{

text-align: center;

font-size:28px;

color:#666;

text-align: center;

}

.page_btn {

padding-top: 40px;

text-align: center;

}

.page_btn a {

cursor: pointer;

padding: 10px 17px;

border: solid 1px #dbdbdb;

font-size: 14px;

}

.num {

padding: 0 10px;

}

.page_btn a:hover,.page-item:hover{

color: #fff;

background: #e84c3d;

border: 1px solid #e84c3d;

}

.page-item {

padding: 10px 17px;

text-decoration: none;

background-color: #ffffff;

border: 1px solid #dbdbdb;

color: #666666;

margin: 0 3px;

font-size: 14px;

cursor: pointer;

}

.page-item.current {

color: #fff;

background: #e84c3d;

cursor: pointer;

border: 1px solid #e84c3d;

}

table {

border-spacing: 0;

border-collapse: collapse;

}

.table-integral thead {

background: #f7f7f7;

height: 35px;

text-align: center;

line-height: 35px;

font-size: 14px;

color: #333;

}

.table-integral td {

border: 1px solid #e5e5e5;

border-collapse: collapse;

}

.table-integral tbody {

height: 45px;

line-height: 45px;

font-size: 14px;

color: #666;

text-align: center;

line-height: 45px;

}

.table-integral td {

border: 1px solid #e5e5e5;

border-collapse: collapse;

}

.text-green {

color: #00a65a !important;

}

.text-red {

color: #dd4b39 !important;

}

.table-integral td a, .table-integral td a:hover, .table-integral td a:active, .table-integral td a:visited, .table-integral td a:focus {

color: #0099cc;

cursor: pointer;

text-decoration: none;

}

.tips_info {

border-radius: 10px;

background: rgba(0,0,0,0.5);

font-size: 18px;

color: #fff;

text-align: center;

line-height: 60px;

display: none;

padding: 0 30px;

z-index: 9999;

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

max-width: 250px;

height: 60px;

}

function Pagination($content, $wrap, options) {

this.$wrap = $wrap;

this.$content = $content;

this.options = $.extend({}, Pagination.defaultOptions, options);

this.init();

}

Pagination.defaultOptions = {

size: 4

};

Pagination.prototype.init = function () {

var totalItemNum = this.$content.children().length;

var totalPageNum = this.totalPageNum = Math.ceil(totalItemNum / this.options.size);

this.currentPage = 1;

this.$wrap.empty();

this.$content.children(':gt(' + (this.options.size - 1) + ')').hide();

this.$wrap.append([

'<span class="page_box">',

'<a class="prev">上一页</a>',

'<span class="num">',

'</span>',

'<a class="next">下一页</a>',

'</span>'

].join(''));

for (var i = 0; i < totalPageNum; i++) {

var $btn = $('<span class="page-item">' + (i + 1) + '</span>');

$btn.data('page', i + 1);

this.$wrap.find('.num').append($btn);

}

this.$wrap.find('.num').children().eq(0).addClass('current');

this.initEvents();

};

Pagination.prototype.initEvents = function () {

var _this = this;

var $prev = this.$wrap.find('.prev');

var $next = this.$wrap.find('.next');

var $num = this.$wrap.find('.num');

$prev.on('click', function () {

_this.prev();

});

$next.on('click', function () {

_this.next();

});

$num.on('click', '.page-item', function () {

var page = $(this).data('page');

_this.goTo(page);

});

};

Pagination.prototype.prev = function () {

this.goTo(this.currentPage - 1);

};

Pagination.prototype.next = function () {

this.goTo(this.currentPage + 1);

};

Pagination.prototype.goTo = function (num) {

if (typeof num !== 'number') {

throw new Error('e');

}

if(num > this.totalPageNum || num <= 0) {

return false;

}

this.currentPage = num;

this.$wrap.find('.num')

.children().eq(this.currentPage - 1)

.addClass('current').siblings('.current')

.removeClass('current');

var left = (this.currentPage - 1) * this.options.size;

var right = left + this.options.size;

var $shouldShow = this.$content.children().filter(function (index) {

return left <= index && index < right;

});

this.$content.children().hide();

$shouldShow.show();

};

var pagi = new Pagination($('#content_page'), $('#wrap'));

$(".table-integral td a").click(function(){

$("#info_modal").html("领取成功哦~开心吧").fadeIn().delay(2000).fadeOut(300);

})