前言
今天新大陆打电话通知面试通过，准备好材料之后就能入岗了。真开心，周末两天没有浪费。既然拿到offer了，今天就在抓紧做毕业设计。然后又遭受前端的吊打，写JS写得我真的快吐了。不出所料今天又踩了LayUI的坑，以前可以说我菜，今天的问题真的是LayUI的问题。记录一下
一、LayUI分页组件渲染时而成功时而失效
这是我先要的效果图。（因为数据不多，可能有点短）
但时我在测试的时候一直是下图那个*样，刚开始以为是我代码的问题 后来我发现我刷新10次差不多2次是正常的 。其他都是出不来。
原因分析
这是因为jQuery默认使用Ajax异步请求，如果加载数据有延迟这容易导致分页组件没有数据才会显示成上面的第二种情况。
这个是LayUI的优化得不够好，所以还是建议大家手写或使用别的框架。
解决办法
使用同步请求数据
如果是常用的$.ajax请求的话使用
async: false;
如果是$.pos / $.get 在使用前
$.ajaxSettings.async = false;
$.post("/flowers/getTotal", {
}, function (result) {
二、LayUI分页的使用
1.在代码处放你想放分页组件的位置
我是等文档加在完毕后。定义了 几个静态变量分别是
var count=0; //总记录数
var limit=15;//每页大小
var start=0;//开始位置
var currenPage=1;//当前页面
扫描二维码关注公众号，回复：
11867963 查看本文章
然后调用getInfo()方法查询总记录数用于设置分页组件总页数（我还打算将获得每页大小封装在这个功能里，只是还么实现，先写死）
在调用getPageNavCode()渲染分页组件。
最后在调用getFlowerList()方法动态添加商品图片列表。（代码打到这里的时候我真的吐了，layui有时候还真不好用，通过controller直接把信息放在mav里，在通过thymeleaf遍历不香）
下面是具体代码
<div class="page-nav layui-row" >
<div class="layui-col-md6 layui-col-lg-offset3" id="pn"></div>
</div>
2.js代码
<script src="/layui/layui.js"></script>
<script>
$(function () {
getInfo();
getPageNavCode();
})
var count=0;
var limit=15;
var start=0;
var currenPage=1;
function getInfo() {
$.ajaxSettings.async = false;
$.post("/flowers/getTotal", {
}, function (result) {
if (result.success) {
//console.log(result.total);
count = result.total;
//alert(count);
}
});
}
function getPageNavCode() {
layui.use(['element','laypage','layer'], function(){
var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
var laypage = layui.laypage;
var layer = layui.layer;
//自定义样式
laypage.render({
elem: 'pn'
,count: count
,limit:limit
,groups:3
,theme: '#FE6881'
,jump: function(obj, first) {
//alert(count);
//obj包含了当前分页的所有参数，比如：
console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
console.log(obj.limit); //得到每页显示的条数
currenPage=obj.curr;
start=(obj.curr-1)*limit;
//首次不执行
if (!first) {
getFlowerList();
}else {
getFlowerList();
}
}
});
});
}
function getFlowerList() {
$.ajaxSettings.async = false;
$.post("/flowers/list",{
pageSize:limit,page:currenPage,orderSelect:$(".page-header .active ").text()},function (result) {
var ListCode="";
if(result.success){
$.each(result.data,function (v,o) {
ListCode+=" <li> ";
ListCode+="<a class='info imghover' href='#'>";
ListCode+="<div class='img'><img src='/FlowersImages/"+o.image1+"' height='244'></div>";
if(o.title.length>23){
ListCode+="<h5>"+o.title.substr(0,23)+"</h5>";
}else {
ListCode+="<h5>"+o.title+"</h5>";
}
// ListCode+="<h5 >"+o.title+"</h5>";
ListCode+=" <p class='price b'><span >"+o.price+"</span> <label >已售"+o.saleNum+"</label></p>"
ListCode+="</a>"
ListCode+=" </li> ";
});
}
if(ListCode.length>0){
$("#listCode").html(ListCode);
}else {
$("#listCode").html("暂时找不到数据哦！！");
}
});
}
总结
真是每次写前端都不缺素材呢，以上是我对layui分页组件的经验，希望对您们有所帮助。有什么问题，欢迎大佬指出哦。