jquery 实现分页 

<!DOCTYPE html>
<html lang="zh">
<head>
    <title>jQuery数据分页显示Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--//导入jQuery包-->


</head>
<body>
<table id="table">

</table>
<div class=""></div>
    <span id="info">

    </span>
</body>
</html>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.js" type="text/javascript"></script>
<!--//<script src="jquery/jquery.number.js" type="text/javascript"></script>-->
<script>
    var a = new Array("1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12","13","14","15","16",'17');
    //每页数据量
    var mypage = 4;
    //整除页数
    var pagenumber = parseInt(a.length / mypage);
    //余数，不能整除的情况
    var remainder;
    if(a.length%mypage==0){
        remainder=0;
    }else{
        remainder=1;
    }
    var tablehtml;
    var spanhtml;
    var tag = 1;
    $(document).ready(function () {
        for (var i = (tag - 1) * mypage; i < tag * mypage; i++) {
            if(a[i]==null){
                tablehtml += "<tr>" +
                    "<td>" + "<br>" + "</td>" +
                    "</tr>";
            }else{
                tablehtml += "<tr>" +
                    "<td>" + a[i] + "</td>" +
                    "</tr>";
            }
        };
        $('#table').html("");
        $('#table').html(tablehtml);

        spanhtml = "<span>共" + (pagenumber+remainder) + "页|第" + tag + "页</span>";
        for (var i = 1; i <= (pagenumber+remainder); i++) {
            spanhtml += "<a href='#' onclick='gotonetxt(" + i + ")'>" + i + "</a>";
        };

        $('#info').html("");
        $('#info').html(spanhtml);
    });

    function gotonetxt(tag) {
        tablehtml = "";
        spanhtml = "";
        for (var i = (tag - 1) * mypage; i < tag * mypage; i++) {
            if(a[i]==null){
                tablehtml += "<tr>" +
                    "<td>" + "<br>" + "</td>" +
                    "</tr>";
            }else{
                tablehtml += "<tr>" +
                    "<td>" + a[i] + "</td>" +
                    "</tr>";
            }
        };
        $('#table').html("");
        $('#table').html(tablehtml);

        spanhtml = "<span>共" + (pagenumber+remainder) + "页|第" + tag + "页</span>";
        for (var i = 1; i <= pagenumber+remainder; i++) {
            spanhtml += "<a href='#' onclick='gotonetxt(" + i + ")'>" + i + "</a>";
        };
        $('#info').html("");
        $('#info').html(spanhtml);
    };
</script>

 

posted @ 2020-08-17 10:57  祈愿仙帝  阅读(901)  评论(0)    收藏  举报