使用jquery实现简单的表格分页-表头不变

点击页码1、页码2的效果

实现步骤

 1、首先加入jquery的js链接

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

2、HTML代码

<table border="1">
            <thead>                 <!--加个thead方便过滤表头，不要将其隐藏-->
               <tr>
                   <th>表头1</th>
                   <th>表头2</th>
               </tr>                
            </thead>
            <tbody id="data">       <!--加个id方便获取表格主体的行进行显示和隐藏-->
               <tr>
                   <td>1</td>
                   <td>1</td>
               </tr>
               <tr>
                   <td>2</td>
                   <td>2</td>
               </tr>
               <tr>
                   <td>3</td>
                   <td>3</td>
               </tr>
               <tr>
                   <td>4</td>
                   <td>4</td>
               </tr>
               <tr>
                   <td>5</td>
                   <td>5</td>
               </tr>
               <tr>
                   <td>6</td>
                   <td>6</td>
               </tr>
               <tr>
                   <td>7</td>
                   <td>7</td>
               </tr>
               <tr>
                   <td>8</td>
                   <td>8</td>
               </tr>
               </tbody>
        </table>
        <div id="nav"></div>      <!--此处为显示页码-->

3、js代码

//分页在页面加载完成时执行
$(document).ready(function() {
    var rowsShown=3;                             //每页显示的行
    var rowsTotal=$('#data tr').length;          //获取总共的行
    var numPages=Math.ceil(rowsTotal/rowsShown); //计算出有多少页
    
    //显示页码，将页面加入#nav内
    for(var i=0;i<numPages;i++){
        var pageNum=i+1;
        $('#nav').append('<a href="#" rel="'+i+'">'+pageNum+'</a>&nbsp;');
    }
    
    /* 初次分页操作
     * 先将全部行隐藏
     * 再显示第一页应该显示的行数(本示例为3)
     * 为第一个页码加一个值为active的class属性，方便加样式
     * */
    $('#data tr').hide();
    $('#data tr').slice(0,rowsShown).show();
    $('#nav a:first').addClass('active');
    
    //页码点击事件
    $('#nav a').bind('click',function(){
        $('#nav a').removeClass('active');    //移除所有页码的active类
        $(this).addClass('active');           //为当前页码加入active类
        var currPage=$(this).attr('rel');     //取出页码上的值
        var startItem=currPage*rowsShown;     //行数的开始=页码*每页显示的行
        var endItem=startItem+rowsShown;      //行数的结束=开始+每页显示的行
        $('#data tr').hide();                 //全部行都隐藏
        
        //显示从开始到结束的行
        $('#data tr').slice(startItem,endItem).css('display','table-row');
    });
});

4、CSS代码

为选中的页码添加样式

.active{
    padding: 0px;
    border: 1px solid black;
    background-color: gray;
    }