jquery实现前端假分页伪分页效果代码-html代码-BFW代码库

jquery实现前端假分页伪分页效果代码

代码语言：html

代码描述：jquery实现前端假分页伪分页效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <style type="text/css">
        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;
        }
    </style>
</head>
<body>
<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<.........完整代码请登录后点击上方下载按钮下载查看