使用layui写前端也有一段时间了,但是还是有好多模块没有使用过,然后这几天试了下layui的laypage模块,然后遇到问题,顺便记录下来使用方法和解决办法
当我们看官方文档还是有点不明白的一个地方,就是layui的laypage模块如何配合接口的数据来渲染数据到页面?
这里给大家上一个实例
<script> layui.use(['element', 'laypage', 'laydate', 'layer', 'jquery'], function(){ var element = layui.element ,laypage = layui.laypage ,layer = layui.layer ,laytpl = layui.laytpl ,$ = layui.jquery; load_data(1); function load_data(curr){ $.ajax({ url:'{{ url_for("fp.ajaxNews" ) }}?page='+curr+'&limit={{ page_limit }}', type: 'GET', dataType: 'json', timeout: 3000, beforeSend: function(){ var index = layer.load(); }, error: function(){ layer.alert('无法获取数据,请检查接口!'); }, success: function(json){ layer.close(layer.index); //console.log(json); if(json.code == 0){ ...something laypage.render({ elem: 'pages' ,count: json.count ,curr: curr ,limit: "{{ page_limit }}" ,jump: function(obj, first){ if(!first){ load_data(obj.curr); } } }); }else{ layer.alert('无法获取数据!'); } } }); } }); </script>
当我们初次载入页面的时候我们需要主动去接口调用相关数据,所以我们需要执行下load_data函数,点击分页会自动触发laypage的jump回调函数,然后在回调函数中再次执行load_data函数即可获取新数据渲染页面