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

(0)
打赏 支付宝打赏 支付宝打赏 微信打赏 微信打赏
上一篇 2018-04-21 22:22
下一篇 2018-04-27 00:02

相关推荐

  • 看了《速度与激情8》,才发觉这是自动驾驶汽车史上被黑得最惨的一次

    《速8》为全球的科技极客们献上的大礼——无人车是如何变成丧尸大军的。

    2017-04-17
    6.2K11
  • 别让你的付费社群,变成普通微信群

    知识付费时代,不少人愿意用钱来快速的获取知识,于是出现了许多的付费社群。然而随之也衍生了不少割韭菜的现象,大家纷纷感慨:怎么进了付费群还是学不到东西呢?你有没有遇到这种困扰?来看看本文作者的分析吧。 今天来和各位聊聊,为什么你加入了社群总有一种后悔甚至是割韭菜的感觉。 一、纯粹割韭菜社群 其实付费社群本身就是一个产品,而产品就有高中低不同的档次之分,也有正品…

    2021-02-20
    5970
  • 抖音 VS 快手:品牌自播实用方法论

    2021年,直播电商的关键词,从“红人带货”秒变为“品牌自播”,这其中,有平台的推动,有品牌的自觉,有服务商等第三方机构的助力,也有标杆品牌的示范和引导作用。 当在新流量平台自播成为了品牌必考题,且通过自播实现月销千万甚至过亿的品牌案例不断增加,我们有必要再来做个简单复盘:在抖音、快手,玩儿得好的自播品牌,到底都掌握了什么样的运营秘笈? 一、抖音:精细化流量…

    2021-04-20
    9030
  • 视频号管理助手,批量管理多个账号,一键分发全平台

    视频号管理助手,批量管理多个账号,一键分发全平台 现在无论个人还是机构企业,为了获得更多流量,都会注册开通搜狐号、网易等10多个自媒体平台,如果你分发图文,15个平台保底1小时。如果你只分发视频,15个平台至少需要2个小时同时还得上传分发都成功,达到想要的后,会发现内容全网发布,除了麻烦就是麻烦,如果你招聘了员工,那么更头疼。下面小编教你轻松解决这些琐事。 …

    2022-07-19
    1240
  • 苹果不让微信公众号做打赏,其他公司比腾讯还慌

    苹果和腾讯这两个神仙只是闹别扭,其他的小鬼便遭了殃。

    2017-04-20
    3.2K0
  • 如何从 0 到 1 搭建私域流量

    最近几年私域流量非常火爆,不少企业开始运营自己的私域流量,私域流量是属于成本比较低,转化率还不错的一种方式;并且跟用户可以产生密切的联系,更加深入用户群体;本文作者分享了关于如何从 0 到 1 搭建私域流量的经验,我们一起来看一下。 这是一篇私域流量运营的入门文章,本文主要内容是在介绍电商该如何搭建自己的私域流量。 01 私域流量的本质是什么 百度百科说: …

    2021-03-03
    5010