简单实现滚动加载数据库数据

<!DOCTYPE html >
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>测试</title>
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
</head>

<body onload="getRec(1)">
<div id="table">
    <table width="100%" border="0" cellpadding="10" cellspacing="10" id="ttb">

    </table>
</div>
<div id="txt" style="text-align:center;color:dimgrey;"></div>
<script type="text/javascript">
    var curpage = 2;
    $(function () {
        $(window).scroll(function () {
            // 滚动条位置
            var documentTop = $(document).scrollTop();
            var windowHeight = $(window).height();
            var documentHeight = $(document).height();
            //当 documentTop >= (documentHeight-windowHeight) 说明滚动条已经滚动到底部了
            if (documentTop >= (documentHeight - windowHeight)) {
                // 1 Ajax 获取后台数据
                // 2 将获取的数据按格式形成HTML代码
                // 3 将生成的代码放进Table标签
                getRec(curpage);
                // 4 页码加1
                curpage = curpage + 1;
            }
        })
    });

    function getRec(PG) {
        var tableTxt = "";
        $.ajax({
            url: "/getrec/",
            type: "post",
            data: {'PG': PG},
            dataType: "json",
            success: function (data) {
                if(data["rec"].length==0){
                    $('#txt').html("沒有更多了");
                }else{
                for (var i = 0; i < data["rec"].length; i++) {
                    tableTxt = "<tr>" +
                        "<td>" + data["rec"][i][0] + "</td>" +
                        "<td>" + data["rec"][i][1] + "</td>" +
                        "<td>" + data["rec"][i][2] + "</td>" +
                        "<td><img src='/media/" + data["rec"][i][3] + "' width='300' height='120'/></td>" +
                        "</tr>";
                    $('#ttb').append(tableTxt);
                }}
            }
        });
    }
</script>

</body>

</html>
简单实现滚动加载数据库数据

猜你喜欢
