LayUI采坑分析三——关于LayUI的分页组件实现和分页渲染时而成功时而不成功

---

前言

今天新大陆打电话通知面试通过，准备好材料之后就能入岗了。真开心，周末两天没有浪费。既然拿到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;//当前页面

然后调用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