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

相关推荐

  • HTML Tab选项卡源码

    HTML Tab选项卡效果如图所示: 代码如下:

    2018-02-08
    3.7K0
  • 网页meta标签怎么写?常用的meta标签

    元数据(metadata)是关于数据的信息。 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。 典型的情况是,meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。 标签始终位于 head 元素中。 元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。 …

    2018-07-26
    2.0K0
  • 便利店改变了什么?

    去标签化的便利店,早就成为了新的风口。

    2017-04-17
    3.1K0
  • 抖音表情包项目的运营逻辑

    趁着周末,本来想约大学的学妹出来吃个饭,顺便增进一下感情,想不到直接被学妹拒绝了,说没时间。 顿时,一股中年危机感涌上心头。难道,我不帅了吗?我的魅力已经消失了吗?我张郎帅尽了吗? 后来,学妹一解释才知道,原来她周末要在家赚钱。说到赚钱,我顿时就来劲了,经过我的软磨硬泡加打破砂锅问到底的精神,最终搞得明明白白、仔仔细细。学妹现在是在做抖音表情包项目,一个月可…

    2022-02-07
    6290
  • 短视频社区内容如何做好冷启动?

    短视频社区是由内容所主导的。各家产品间工具模块的差别并不显著,做到内容的差异化,才是形成社区调性的根本。而所谓调性,则可以理解为“社区群众,在特定场景下,对同好内容的集体偏爱”。   时间回到两年前的那个春天,抖音强势登顶App Store下载量榜单并多次蝉联。行业老大哥快手坐拥数亿用户,开始面对外界对其增长乏力的质疑。 仿佛一夜之间,大街小巷都是…

    2020-03-16
    2.3K0
  • 被吹爆的私域到底是什么?

    关于私域流量运营的文章大家应该看过了很多,但有一个基本点是我们所忽略的:很多人对私域原点的认知是不清晰的。到底什么才是私域?私域为什么会产生价值?网上有各种各样的私域定义,今天本文作者从以下五个方面来阐述,帮助大家深刻建议对私域的认知。 一、私域的本质是流量 这是首当其冲要解释的一点,最重要的是对微信私域的认知。 村长之前也解释过,为什么要把那么多人导流到微…

    2021-03-03
    5670