Jquyer table 中的数据分页

直接上代码，复制出来就可以使用

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>点标记</title>
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>

    <script>
        $(function () {
            var $table = $('table');
            var currentPage = 0;//当前页默认值为0
            var pageSize = 5;//每一页显示的数目
            $table.bind('paging', function () {
                $table.find('tbody tr').hide().slice(currentPage * pageSize, (currentPage + 1) * pageSize).show();
            });
            var sumRows = $table.find('tbody tr').length;
            var sumPages = Math.ceil(sumRows / pageSize);//总页数

            var $pager = $('<div class="page"></div>');  //新建div，放入a标签,显示底部分页码
            for (var pageIndex = 0 ; pageIndex < sumPages ; pageIndex++) {
                $('<a href="#" id="pageStyle" onclick="changCss(this)"><span>' + (pageIndex + 1) + '</span></a>').bind("click", { "newPage": pageIndex }, function (event) {
                    currentPage = event.data["newPage"];
                    $table.trigger("paging");
                    //触发分页函数
                }).appendTo($pager);
                $pager.append(" ");
            }
            $pager.insertAfter($table);
            $table.trigger("paging");

            //默认第一页的a标签效果
            var $pagess = $('#pageStyle');
            $pagess[0].style.backgroundColor = "#006B00";
            $pagess[0].style.color = "#ffffff";
        });

        //a链接点击变色，再点其他回复原色
        function changCss(obj) {
            var arr = document.getElementsByTagName("a");
            for (var i = 0; i < arr.length; i++) {
                if (obj == arr[i]) {       //当前页样式
                    obj.style.backgroundColor = "#006B00";
                    obj.style.color = "#ffffff";
                }
                else {
                    arr[i].style.color = "";
                    arr[i].style.backgroundColor = "";
                }
            }
        }
    </script>




    <style type="text/css">
        table {
            width: 600px;
            text-align: center;
        }

            table tr th, td {
                height: 30px;
                line-height: 30px;
                border: 1px solid #ccc;
            }

        #pageStyle {
            display: inline-block;
            width: 32px;
            height: 32px;
            border: 1px solid #CCC;
            line-height: 32px;
            text-align: center;
            color: #999;
            margin-top: 20px;
            text-decoration: none;
        }

            #pageStyle:hover {
                background-color: #CCC;
            }

            #pageStyle .active {
                background-color: #0CF;
                color: #ffffff;
            }
    </style>
</head>
<body>
    <table cellspacing="0">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>张飞</td>
                <td>男</td>
            </tr>
            <tr>
                <td>2</td>
                <td>刘备</td>
                <td>男</td>
            </tr>
            <tr>
                <td>3</td>
                <td>关羽</td>
                <td>男</td>
            </tr>
            <tr>
                <td>4</td>
                <td>妲己</td>
                <td>女</td>
            </tr>
            <tr>
                <td>5</td>
                <td>后羿</td>
                <td>男</td>
            </tr>
            <tr>
                <td>6</td>
                <td>大乔</td>
                <td>女</td>
            </tr>
            <tr>
                <td>7</td>
                <td>露娜</td>
                <td>女</td>
            </tr>
            <tr>
                <td>8</td>
                <td>E.Z</td>
                <td>男</td>
            </tr>
            <tr>
                <td>9</td>
                <td>琴女</td>
                <td>女</td>
            </tr>
            <tr>
                <td>10</td>
                <td>貂蝉</td>
                <td>女</td>
            </tr>
        </tbody>

    </table>

</body>
</html>

 

posted @ 2018-09-06 13:52  风琴~云淡  阅读(157)  评论(0)  编辑  收藏  举报