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

相关推荐

  • 被过度夸大的私域流量

    一边有李佳琦、薇娅的带货奇迹,一边也有王祖蓝、李湘、叶璇等明星的带货滑铁卢。 一边有董明珠一晚 6 大平台连动销售 65.4 亿,也有御泥坊全年 8000 多场直播平均每场收入不过 1.2 万元。 一边有商家纷纷重金上线各种小程序构建私域流量池,一边也有宜家逆潮流入驻天猫吃公域流量的红利。 私域流量,并不是看上去那么美。从去年开始升温的这一概念,在今年初然突…

    2020-06-06
    1.8K0
  • 你是不是忽视了这个老牌高权重流量平台?

      没有哪个平台能比得上百度给予自身产品的高权重。 看以下这组数据,敢问有多少网站的流量能与「百度知道」相提并论? 看以下这组数据,敢问有多少网站的流量能与「百度知道」相提并论? 尽管大家都清楚,利用「百度知道」这块风水宝地引流,对于精准营销能起到绝佳效果。 但许多人却因为这块流量之地需养号及挖掘工作投入精力较大,望而止步。 01、百度知道有哪些推…

    2020-11-12
    6270
  • 一支视频全网播放量超1亿,知识类创作成为流量香饽饽?

    2020年,对知识区的布局成为各大视频平台内容战略的一大重点。 抖音、快手凭借短视频持续收割流量,并利用自己庞大的用户基础,积极开拓知识内容领域,获得不俗成绩。但这篇文章,卡思数据(ID:caasdata6)主要研究的是以B站、西瓜视频和知乎为代表的平台,这些平台视频时长多在1分钟-30分钟之间,他们为何要扎堆布局知识科普类内容领域?有何发展重点?在内容创作…

    2020-11-12
    7930
  • 一个中老年 App 里的情欲、玄学和“砍一刀”

    继“抓住 00 后”之后,各大 App 抢占“不惑后”——40 岁以上的中老年群体。 2021 年 9 月,微信上线“关怀模式”,与正常模式相比,微信关怀模式对老年群体更友好:文字更大更清晰,色彩更强更好辨认,按钮更大更易用。去年年底,小红书还申请注册了商标“老红书”,想要抓住这一群体。 不是每个中老年人都有钱,但比起正打工的社畜年轻人,至少他们更有时间。 …

    2022-09-17
    2310
  • 详解Javascript原生瀑布流源码示例演示

    浏览网页的时候经常会遇到瀑布流布局的网站。也许有些读者不了解瀑布流。瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。比如下面图片的效果(百度图片),就是一个典型的瀑布流。 js瀑布流加载 网上有很多JQ的瀑布流插件,而且都写好了兼容,都可以尝试去使用,这…

    2018-04-08
    2.6K0