简单table分页

html

<table id="pagingTable">
        <thead>
            <tr>
                <td>
                    第一列
                </td>
                <td>
                    第二列
                </td>
                <td>
                    第三列
                </td>
                <td>
                    第四列
                </td>
                <td>
                    第五列
                </td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    1
                </td>
                <td>
                    1
                </td>
                <td>
                    1
                </td>
                <td>
                    1
                </td>
                <td>
                    1
                </td>
            </tr>
            <tr>
                <td>
                    2
                </td>
                <td>
                    2
                </td>
                <td>
                    2
                </td>
                <td>
                    2
                </td>
                <td>
                    2
                </td>
            </tr>
            <tr>
                <td>
                    3
                </td>
                <td>
                    3
                </td>
                <td>
                    3
                </td>
                <td>
                    3
                </td>
                <td>
                    3
                </td>
            </tr>
            <tr>
                <td>
                    4
                </td>
                <td>
                    4
                </td>
                <td>
                    4
                </td>
                <td>
                    4
                </td>
                <td>
                    4
                </td>
            </tr>
            <tr>
                <td>
                    5
                </td>
                <td>
                    5
                </td>
                <td>
                    5
                </td>
                <td>
                    5
                </td>
                <td>
                    5
                </td>
            </tr>
            <tr>
                <td>
                    6
                </td>
                <td>
                    6
                </td>
                <td>
                    6
                </td>
                <td>
                    6
                </td>
                <td>
                    6
                </td>
            </tr>
            <tr>
                <td>
                    7
                </td>
                <td>
                    7
                </td>
                <td>
                    7
                </td>
                <td>
                    7
                </td>
                <td>
                    7
                </td>
            </tr>
            <tr>
                <td>
                    8
                </td>
                <td>
                    8
                </td>
                <td>
                    8
                </td>
                <td>
                    8
                </td>
                <td>
                    8
                </td>
            </tr>
            <tr>
                <td>
                    9
                </td>
                <td>
                    9
                </td>
                <td>
                    9
                </td>
                <td>
                    9
                </td>
                <td>
                    9
                </td>
            </tr>
            <tr>
                <td>
                    11
                </td>
                <td>
                    11
                </td>
                <td>
                    11
                </td>
                <td>
                    11
                </td>
                <td>
                    11
                </td>
            </tr>
            <tr>
                <td>
                    13
                </td>
                <td>
                    13
                </td>
                <td>
                    13
                </td>
                <td>
                    13
                </td>
                <td>
                    13
                </td>
            </tr>
            <tr>
                <td>
                    23
                </td>
                <td>
                    23
                </td>
                <td>
                    23
                </td>
                <td>
                    23
                </td>
                <td>
                    23
                </td>
            </tr>
            <tr>
                <td>
                    33
                </td>
                <td>
                    33
                </td>
                <td>
                    33
                </td>
                <td>
                    33
                </td>
                <td>
                    33
                </td>
            </tr>
            <tr>
                <td>
                    43
                </td>
                <td>
                    43
                </td>
                <td>
                    43
                </td>
                <td>
                    43
                </td>
                <td>
                    43
                </td>
            </tr>
            <tr>
                <td>
                    53
                </td>
                <td>
                    53
                </td>
                <td>
                    53
                </td>
                <td>
                    53
                </td>
                <td>
                    53
                </td>
            </tr>
            <tr>
                <td>
                    63
                </td>
                <td>
                    63
                </td>
                <td>
                    63
                </td>
                <td>
                    63
                </td>
                <td>
                    63
                </td>
            </tr>
            <tr>
                <td>
                    73
                </td>
                <td>
                    73
                </td>
                <td>
                    73
                </td>
                <td>
                    73
                </td>
                <td>
                    73
                </td>
            </tr>
            <tr>
                <td>
                    83
                </td>
                <td>
                    83
                </td>
                <td>
                    83
                </td>
                <td>
                    83
                </td>
                <td>
                    83
                </td>
            </tr>
            <tr>
                <td>
                    93
                </td>
                <td>
                    93
                </td>
                <td>
                    93
                </td>
                <td>
                    93
                </td>
                <td>
                    93
                </td>
            </tr>
            <tr>
                <td>
                    113
                </td>
                <td>
                    113
                </td>
                <td>
                    113
                </td>
                <td>
                    113
                </td>
                <td>
                    113
                </td>
            </tr>
            <tr>
                <td>
                    123
                </td>
                <td>
                    123
                </td>
                <td>
                    123
                </td>
                <td>
                    123
                </td>
                <td>
                    123
                </td>
            </tr>
        </tbody>
    </table>

View Code

 

css

    <style>
        .pageInit
        {
            padding: 5px 10px;
            border: 1px solid #ff9600;
            text-decoration: none;
            color: #ff6500;
            margin-left: 10px;
        }
        .pageSelected
        {
            padding: 5px 10px;
            border: 1px solid #ff6500;
            text-decoration: none;
            color: #ff6500;
            background: #ffbe94;
            margin-left: 10px;
        }
    </style>

 

js

 

　　<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">

　　　　//调用js
        $(function () {
            simplePaging($('#pagingTable'), 4);
        });
        /**
        * 要求：table的绘制需要规范，即table需要采用如下格式:
        * <table>
        * <thead>
        * </thead>
        * <tbody>
        * </tbody>
        * </table>
        * 说明：本分页函数仅对tbody中的行进行分页显示
        * 
        * @param {} table   table对象
        * @param {} pageSize  每页显示的行数 
        * 
        */
        function simplePaging(table, pageSize) {
            var $selectedPage; //被选中的页数
            var $table = $(table); //表格对象
            var currentPage = 0; //当前页默认值
            var sumRows = $table.find('tbody tr').length; //总行数
            var sumPages = Math.ceil(sumRows / pageSize); //总页数
            //避免多次调用产生重复的页码
            $table.next("div[tablePagingDiv]").remove();
            if (sumPages > 1) {
                $table.bind('paging', function () {
                    //默认所有行都隐藏，然后根据分页显示
                    $table.find('tbody tr').hide().slice(currentPage * pageSize, (currentPage + 1) * pageSize).show();
                });
                //页码div
                var $pager = $('<div tablePagingDiv="" style="height:40px;line-height:40px;"></div>');
                for (var pageIndex = 0; pageIndex < sumPages; pageIndex++) {

                    $('<a href="#"><span>' + (pageIndex + 1) + '</span></a>').bind('click', { 'newPage': pageIndex }, function (event) {
                        currentPage = event.data['newPage'];
                        $selectedPage = $(this);
                        $(this).addClass('pageSelected').siblings().removeClass('pageSelected');
                        //为每一个要显示的页数上添加触发分页函数
                        $table.trigger('paging');
                    }).appendTo($pager);
                    $pager.append(" ");
                }
                //添加初始化css
                $('a', $pager).addClass('pageInit');
                $('a:first', $pager).addClass('pageSelected');
                //添加鼠标hover效果
                $('a', $pager).hover(function () {
                    $(this).addClass('pageSelected');
                }, function () {
                    $(this).removeClass('pageSelected');
                    //被单击的页面的样式
                    if ($selectedPage == null) {
                        $('a:first', $pager).addClass('pageSelected');
                    }
                    else {
                        $selectedPage.addClass('pageSelected');
                    }
                });
                $pager.insertAfter($table);
                //在table上触发paging事件
                $table.trigger('paging');
            }
        }
    </script>

 

源码文件：HTMLPage1.zip

转载于:https://www.cnblogs.com/xuguanghui/p/5068866.html