前端分页demo

本文介绍了一种使用JavaScript和HTML实现简易分页效果的方法。通过编造数据展示了一个包含姓名、年龄等字段的学生信息表格,并实现了翻页功能。此方法适用于小规模数据集的展示。
<!DOCTYPE html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>分页</title>  
    <script type="text/javascript" src="jquery-1.11.1.js"></script>  
    <style type="text/css">  
        .table{border:solid #FFAEB9; border-width:1px 0px 0px 1px;width: 100%;font-size: 12px;line-height: 21px;text-align:center;}  
        .table thead td{border:solid #FFAEB9; border-width:0px 1px 1px 0px;}  
        .table tbody td{border:solid #FFAEB9; border-width:0px 1px 1px 0px;padding-right: 5px;padding-left: 5px;}  
    </style>  
</head>  
<body>  
    <div style="width:450px;margin:0 auto;">  
    <div id="dataShow" style="width:450px;margin:0 auto;">  
        <table class="table" id="table"></table>  
    </div>  
    <br/>  
    <div id="page" style="width:450px;margin:0 auto;"></div>  
    </div>  
    
 <script src="360/js/jquery.min.js"></script>   
<script type="text/javascript">  
//编造表数据  
//表头  
var head=  
    '<thead><tr>'+  
    '<td> 姓  名 </td>'+  
    '<td> 年  龄 </td>'+  
    '<td> 彦  值* </td>'+  
    '<td> 成  绩 </td>'+  
    '<td> 身 高cm </td>'+  
    '</tr></thead><tbody>';  
//表内容,后台返回的内容可以封装到这里,随时取用,但是如果数据量很大估计会相当耗资源。  
var pageData=[];  
for(var i=1;i<100;i++){  
    var data='<tr>'+  
    '<td>学生'+i+'</td>'+  
    '<td>'+Math.round(Math.random()*20)+'</td>'+  
    '<td>'+Math.round(Math.random()*5)+'颗星</td>'+  
    '<td>'+Math.round(Math.random()*100)+'</td>'+  
    '<td>'+Math.round(Math.random()*200)+'cm</td>'+  
    '</tr>';  
    pageData.push(data);  
}  
//表结尾  
var end='</tbody>';  
  
$(function(){  
    var Count = pageData.length;//记录条数  
    var PageSize=10;//设置每页示数目  
    var PageCount=Math.ceil(Count/PageSize);//计算总页数  
    var currentPage =1;//当前页,默认为1。  
    //造个简单的分页按钮  
    for(var i=1;i<=PageCount;i++){  
    var pageN='<a href="#" selectPage="'+i+'" >第'+i+'页</a>';  
    $('#page').append(pageN);  
    }  
    //显示默认页(第一页)  
    $('#table').empty().append(head);  
    for(i=(currentPage-1)*PageSize;i<PageSize*currentPage;i++){    
        $('#table').append(pageData[i]);  
    }  
    $('#table').append(end);  
      
    //显示选择页的内容  
    $('a').click(function(){  
     var selectPage=$(this).attr('selectPage');  
     $('#table').html('');  
        $('#table').append(head);  
        for(i=(selectPage-1)*PageSize;i<PageSize*selectPage;i++){  
            $('#table').append(pageData[i]);  
        }  
        $('#table').append(end);  
    });  
});    
</script>  
</body>  
</html> 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值