jQuery表格分页代码

<div class="main">

<h2>我的奖品</h2>

<table class="table-integral">

<thead>

<tr>

<td style="width:234px;">中奖编号</td>

<td style="width:200px;">奖品名称</td>

<td style="width:250px;">中奖时间</td>

<td style="width:145px;">状态</td>

<td style="width:140px;">操作</td>

</tr>

</thead>

<tbody id="content_page">

<tr>

<td>CJ2017121317205901</td>

<td>100元京东E卡</td>

<td>2017-12-13 18:55:05</td>

<td class="text-green">待领取</td>

<td><a href="javascript:;">领取</a></td>

</tr>

<tr>

<td>CJ2017121318550501</td>

<td>手机话费50元</td>

<td>2017-12-13 18:55:05</td>

<td class="text-green">待领取</td>

<td><a href="javascript:;">领取</a></td>

</tr>

<tr>

<td>CJ2017121314140701</td>

<td>手机流量1000M</td>

<td>2017-12-13 18:55:05</td>

<td class="text-red">审核中</td>

<td><a href="javascript:;">领取</a></td>

</tr>

<tr>

<td>CJ2017121314072301</td>

<td>100元京东E卡</td>

<td>2017-12-13 18:55:05</td>

<td class="text-green">已完成</td>

<td><a href="javascript:;">领取</a></td>

</tr>

<tr>

<td>CJ2017121314045801</td>

<td>手机话费50元</td>

<td>2017-12-13 18:55:05</td>

<td class="text-green">已完成</td>

<td><a href="javascript:;">领取</a></td>

</tr>

<tr>

<td>CJ2017121314033601</td>

<td>手机流量1000M</td>

<td>2017-12-13 18:55:05</td>

<td class="text-green">已完成</td>

<td><a href="javascript:;">领取</a></td>

</tr>

<tr>

<td>CJ2017121215480001</td>

<td>100元京东E卡</td>

<td>2017-12-13 18:55:05</td>

<td class="text-green">已完成</td>

<td><a href="javascript:;">领取</a></td>

</tr>

<tr>

<td>CJ2017121215155501</td>

<td>手机话费50元</td>

<td>2017-12-13 18:55:05</td>

<td class="text-red">审核中</td>

<td><a href="javascript:;">领取</a></td>

</tr>

<tr>

<td>CJ2017121215105401</td>

<td>100元京东E卡</td>

<td>2017-12-13 18:55:05</td>

<td class="text-green">待领取</td>

<td><a href="javascript:;">领取</a></td>

</tr>

<tr>

<td>CJ2017121215085301</td>

<td>手机流量1000M</td>

<td>2017-12-13 18:55:05</td>

<td class="text-green">已完成</td>

<td><a href="javascript:;">领取</a></td>

</tr>

</tbody>

</table>

<div id="wrap" class="page_btn clear"></div>

</div><!--main-->

<div id="info_modal" class="tips_info"></div>

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);

})

作者:小屋
链接:http://www.rumenwu.com/operate/627.html
来源:入门屋
入门屋著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。部分内容复制其他平台,如有侵权请联系删除。