页面加载数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../zTree/css/demo.css" media="all">
    <link rel="stylesheet" href="../zTree/css/zTreeStyle/zTreeStyle.css" media="all">
    <link rel="stylesheet" href="../zTree/css/zTreeStyle/zTreeStyle.css" media="all">
    <link rel="stylesheet" href="../echarts/echarts.min2.js" media="all">
    <link rel="stylesheet" href="../treeTable/treeTable.css" media="all">
</head>
<body>
<div class="information"></div>
<div id="more" data-status="1">
    加载更多
</div>
<input type="hidden" id="page" value="2">





<script src="../jquery-1.9.1.min.js"></script>
<!--<script src="../layui/layui.js"></script>-->
<script src="../layui/layui.js"></script>
<script src="../ueditor/ueditor.config.js"></script>
<script src="../ueditor/ueditor.all.min.js"></script>
<script src="../ueditor/lang/zh-cn/zh-cn.js"></script>
<!--<script src="../zTree/js/jquery.ztree.all.min.js"></script>-->
<script src='https://cdn.bootcss.com/echarts/3.7.0/echarts.simple.js'></script>
<script src="../zTree/js/jquery.ztree.core.js"></script>
<script src="../zTree/js/jquery.ztree.excheck.js"></script>
<script src="../zTree/js/jquery.ztree.exedit.js"></script>
<script src="../echarts/echarts.min2.js"></script>
<script src="../echarts/echarts-wordcloud.js"></script>
<script src="../treeTable/treeTable.js"></script>

<script>
    layui.config({
        base: '../'
    }).extend({
        treeTable: 'treeTable/treeTable'
    }).use(['laydate', 'laypage','tree','util', 'layer', 'table','form','upload', 'treeTable'], function() {
        var laydate = layui.laydate //日期
            , laypage = layui.laypage //分页
            , layer = layui.layer //弹层
            , table = layui.table //表格
            , treeTable = layui.treeTable
            , form = layui.form
            , tree = layui.tree//树
            , util = layui.util
            /*,carousel = layui.carousel //轮播
        ,upload = layui.upload //上传
        ,element = layui.element //元素操作
        ,slider = layui.slider //滑块*/
            , upload = layui.upload
            , element = layui.element;

        $(function () {
            var page = 0;
            var limit = 5;
            $.ajax({
                type: "post",
                url: "/layui/listData1",
                data: {page:page,
                    limit:limit},
                dataType: "json",
                async: false,
                success: function (res) {
                    data = res.data;
                    countnum = res.count;
                    /*数据不够10条隐藏按钮*/
                    if (data.length < 5 || countnum/limit==page) {
                        $(this).hide()
                    } else {
                        $("#page").val(page + 1);//记录页码
                    }
                    insertDiv(data);
                }
            });
            $("#more").click(function () {
                var page =parseInt($("#page").val());
                $(this).html("加载中...");
                status=$(this).attr("data-status");
                if(status==1) {
                    status = $(this).attr("data-status", "0");
                    $.ajax({
                        type: "post",
                        url: "/layui/listData1",
                        data: {page:page,
                        limit:limit},
                        dataType: "json",
                        async: false,
                        success: function (res) {
                            debugger;
                            data = res.data;
                            countnum = res.count;
                            /*数据不够10条隐藏按钮*/

                            // alert($("#page").val())
                            if (data.length <5 || countnum/limit==page) {
                                $("#more").hide()
                            } else {
                                $("#page").val(page + 1);//记录页码
                            }
                            insertDiv(data);
                        }
                    });
                }

            });
        });
        function insertDiv(data){
            var information = $(".information");
            var html = '';
            for (var i = 0; i < data.length; i++) {
                html +="<p><span id='fyx'>"+(i+1)+"</span><a id="+data[i].username+"><span>"+data[i].username+"</span></a><span>,</span><span>"+data[i].userpsw+"</span></p>"
            }
            information.append(html);
            $("#more").html("加载更多");
            $("#more").attr("data-status","1");
        }
        // $("#fyx a").click(function () {
        //     debugger
        //     alert($("#fyx a").val());
        // });

    });

    // function hrefbyusername(username) {
    //     // alert(username)
    //     alert(username);
    // }
</script>
</body>
</html>

@RequestMapping("listData1")
    @ResponseBody
    public Map listData1(Integer page, Integer limit) {
        HashMap<String, Object> map = new HashMap<>();
        List<User> list = userService.userlist(page, limit);
        PageInfo pageInfo = new PageInfo(list);
        List infoList = pageInfo.getList();
        map.put("code",0);
        map.put("msg","");
        map.put("count",pageInfo.getTotal());
        map.put("data",infoList);
        return map;
    }

猜你喜欢