前台实现分页效果

最新推荐文章于 2023-06-28 22:34:17 发布

泡泡菌

最新推荐文章于 2023-06-28 22:34:17 发布

阅读量1.3k

点赞数 1

分类专栏： javascrip 文章标签： javascript

javascrip 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>分页</title>
    <script src="../common/jquery-3.1.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 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=0;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>

泡泡菌

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前台实现分页效果

html>head> meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> title>分页title> script src="../common/jquery-3.1.1.js">script> style type="text/css"> .table{bor
复制链接

扫一扫