使用layui写前端也有一段时间了,但是还是有好多模块没有使用过,然后这几天试了下layui的laypage模块,然后遇到问题,顺便记录下来使用方法和解决办法
当我们看官方文档还是有点不明白的一个地方,就是layui的laypage模块如何配合接口的数据来渲染数据到页面?
这里给大家上一个实例
01.<script>02.layui.use(['element', 'laypage', 'laydate', 'layer', 'jquery'], function(){03. var element = layui.element04. ,laypage = layui.laypage05. ,layer = layui.layer06. ,laytpl = layui.laytpl07. ,$ = 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. ...something26. laypage.render({27. elem: 'pages'28. ,count: json.count29. ,curr: curr30. ,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
评论列表