<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
来源:入门屋
入门屋著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。部分内容复制其他平台,如有侵权请联系删除。