laypager异步分页

最新推荐文章于 2022-08-26 15:43:47 发布
bug-007
最新推荐文章于 2022-08-26 15:43:47 发布
阅读量366
点赞数
本文链接：https://blog.csdn.net/weixin_43326384/article/details/90551371
版权
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
<#--    <script type="text/javascript" src="js/jquery.min.js"></script>-->
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="layui/layui.js"></script>
<#--    <script type="text/javascript" src="layui/lay/modules/laypage.js"></script>-->
    <link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body>
<h1>aa</h1>
<table class="layui-table">
    <colgroup>
        <col width="80">
        <col width="80">
        <col width="50">
    </colgroup>
    <thead>
    <tr>
        <th>昵称</th>
        <th>加入时间</th>
        <th>签名</th>
    </tr>
    </thead>
    <tbody>
        <div id="content"></div>
    </tbody>
</table>

<div id="test1"  ></div>
<h1>---------------------------------</h1>
<#--<script>-->
<#--    layui.use('laypage', function(){-->
<#--        var laypage = layui.laypage;-->
<#--        laypage.render({-->
<#--            elem: 'test1'-->
<#--            ,count: 70 //数据总数，从服务端得到-->
<#--            ,jump: function(obj, first){-->
<#--                //obj包含了当前分页的所有参数，比如：-->
<#--                console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。-->
<#--                console.log(obj.limit); //得到每页显示的条数-->
<#--                //首次不执行-->
<#--                if(!first){-->
<#--                    //do something-->
<#--                }-->
<#--            }-->
<#--        });-->
<#--    });-->
<#--</script>-->
<script>





    function showData(result) {
        // console.log(result.data.length);
        // debugger;
        $("tbody").html("");
        if(result.total==null || result.total ==0){
            $("tbody").html("<tr><td colspan='3'><span style='color: red'>暂无数据</span></td></tr>");
        }
        var data= result.list;
        var html = "";
        var ids = "";
        for (var i = 0; i <data.length; i++) {
            html += "<tr><td>"+data[i].name+"</td><td>"+data[i].birth+"</td><td>"+ data[i].id +"</td></tr>";
            ids+=data[i].id+"---";
        }
        console.log(html);
        $("tbody").append(html);
        result = null;
    };
    $(function () {
        getListData(1);
        // layui.use('laypage', function(){
        //     var laypage = layui.laypage;
        //     //执行一个laypage实例
        //     laypage.render({
        //         elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
        //
        //     });
        // });

    });
    //分页
    function paged(count,currPage){
        debugger;
        layui.use(['laypage', 'layer'], function() {
            var laypage = layui.laypage
                , layer = layui.layer;
            laypage.render({
                // cont:'test1' // 容器id
                elem:'test1' // 容器id
                ,count: count  //总页数，从服务端得到
                , limit: 5        //每页显示条数
                , limits: [5, 10]
                , curr: currPage                      //起始页
                , groups: 5                     //连续页码个数
                , prev: '上一页'                 //上一页文本
                , next: '下一页'                 //下一页文本
                , first: 1                      //首页文本
                , layout: ['prev', 'page', 'next','limit','skip']
                // , skip:true
                // ,page:true
                // ,refresh:true
                , jump: function (obj,first) {
                    currPage =obj.curr;  //这里是后台返回给前端的当前页数
                    if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr  ajax 再次请求
                        console.log(".........currPage............"+currPage)
                        getListData(currPage);
                    }
                }
            });
        });
    };
    // 异步获取数据
    function getListData(currPage){
        $.ajax({
            type: 'GET',
            url: "/getData1", // ajax请求路径
            data: {
                page:currPage //当前页数
            },
            dataType:'json',
            success: function(data){
                console.log("---------------"+data+"----------------"+data.count)
                showData(data);
                if(data!="" && data.total != null && data.total!=0) {
                    paged(data.total, currPage);
                }
            }
        });
    };

</script>
</body>
</html>