layui分页laypage模块的使用方法

使用layui写前端也有一段时间了,但是还是有好多模块没有使用过,然后这几天试了下layui的laypage模块,然后遇到问题,顺便记录下来使用方法和解决办法

当我们看官方文档还是有点不明白的一个地方,就是layui的laypage模块如何配合接口的数据来渲染数据到页面?

这里给大家上一个实例

01.
<script>
02.
layui.use(['element', 'laypage', 'laydate', 'layer', 'jquery'], function(){
03.
    var element = layui.element
04.
    ,laypage = layui.laypage
05.
    ,layer = layui.layer
06.
    ,laytpl = layui.laytpl
07.
    ,$ = layui.jquery;
08.
    load_data(1);
09.
    function load_data(curr){
10.
        $.ajax({
11.
            url:'{{ url_for("fp.ajaxNews" ) }}?page='+curr+'&limit={{ page_limit }}',
12.
           type: 'GET',
13.
           dataType: 'json',
14.
           timeout: 3000,
15.
           beforeSend: function(){
16.
                    var index = layer.load();
17.
        },
18.
           error: function(){
19.
                    layer.alert('无法获取数据,请检查接口!');
20.
           },
21.
           success: function(json){
22.
                layer.close(layer.index);
23.
                //console.log(json);
24.
                if(json.code == 0){
25.
                    ...something
26.
                    laypage.render({
27.
                        elem: 'pages'
28.
                        ,count: json.count
29.
                        ,curr: curr
30.
                        ,limit: "{{ page_limit }}"
31.
                        ,jump: function(obj, first){
32.
                            if(!first){
33.
                                load_data(obj.curr);
34.
                            }
35.
                        }
36.
                    });
37.
                }else{
38.
                    layer.alert('无法获取数据!');
39.
                }
40.
            }
41.
        });
42.
    }
43.
});
44.
</script>

当我们初次载入页面的时候我们需要主动去接口调用相关数据,所以我们需要执行下load_data函数,点击分页会自动触发laypage的jump回调函数,然后在回调函数中再次执行load_data函数即可获取新数据渲染页面

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://sulao.cn/post/675

评论列表

0%