jquery 表格(表格记录分页显示)

描述：表格记录分页显示，点击相应页码，显示相应记录数

HTML：

<table border="1">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>小文</td>
                    <td>20</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>小李</td>
                    <td>21</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>小慧</td>
                    <td>21</td>
                    <td>女</td>
                </tr>
                <tr>
                    <td>琪琪</td>
                    <td>19</td>
                    <td>女</td>
                </tr>
                <tr>
                    <td>小勇</td>
                    <td>22</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>馨儿</td>
                    <td>23</td>
                    <td>女</td>
                </tr>
                <tr>
                    <td>小鹏</td>
                    <td>21</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>鸭梨山大</td>
                    <td>30</td>
                    <td>男</td>
                </tr>
            </tbody>
        </table>

CSS：

          .hover{
                background-color: #00f;
                color: #fff;
                cursor: pointer;
            }
            .page{
                margin: 5px;
            }

Jquery：

                var $alltr = $('tbody tr');
                //                行（记录）总数
                var totalRows = $alltr.length;
                //                每页显示行数

                var perPage = 2;
                //                总页数

                var totalPageNum = Math.ceil(totalRows/perPage);
                //                构建分页部分
                var pageDiv = $("<div id=\"pages\"></div>");
   
                for(var i=0;i<totalPageNum;i++){
                    $('<span class="page">'+(i+1)+'</span>').appendTo(pageDiv);
                }
                pageDiv.insertBefore('table');
                
                $('.page').hover(function(){
                    $(this).addClass('hover');
                }, function(){
                    $(this).removeClass('hover');
                }); 
//                初始隐藏全部tr记录，只显示第一页tr记录
                $alltr.hide();
                $('span').eq(0).addClass('currentPage');
                for(var i=0;i<perPage;i++){
                    $alltr.eq(i).show();
                }
                
                $('span').click(function(){
//                    隐藏全部tr记录
                    $alltr.hide();
//                    当前页码
                    var currentPageNum = $(this).text();
//                    tr记录起始索引
                    var start = (currentPageNum-1)*perPage;
//                    tr记录截止索引
                    var end = currentPageNum*perPage-1;
                    
                    for(var i=start;i<=end;i++){
                        $alltr.eq(i).show();
                    }                
                });

截图：