博客项目学习笔记四：填充分页数据，并展示在前端

博客项目目录：请戳这里

准备

问题：我们需要把后端查询到的分页数据，填充到类似红框标记的每一个记录里
分析：可以利用Freemarker将后端查询到的数据传到模板，然后依次填充，前端js的逻辑参考www.layui.com/doc/的分页部分

1.修改index.ftl

找到红框标记部分对应的前端样式，然后把实际查询到的值传进去，注意表示时间的内容，要转换格式

<ul class="fly-list">
        <#list pageData.records as post>
              <li>
              <a href="/user/${post.authorId}" class="fly-avatar">
                <img src="${post.authorAvatar}" alt="${post.authorName}">
              </a>
              <h2>
                <a class="layui-badge">${post.categoryName}</a>
                <a href="jie/detail.html">${post.title}</a>
              </h2>
              <div class="fly-list-info">
                <a href="/user/${post.authorId}" link>
                  <cite>${post.authorName}</cite>
                </a>
              <span>${post.created?string("yyyy-MM-dd")}</span>

              <span class="fly-list-nums">
                <i class="iconfont icon-pinglun1" title="回答"></i> ${post.commentCount}
              </span>
              </div>
              <div class="fly-list-badge">
                <!--<span class="layui-badge layui-bg-red">精帖</span>-->
              </div>
              </li>
        </#list>
</ul>

测试结果：

2.填充分页部分样式

去掉原来“更多求解”的标签，替换为分页样式(参考www.layui.com)

<div style="text-align: center">
            <div id="laypage-main">

            </div>
            <script>
                layui.use('laypage', function(){
                    var laypage = layui.laypage;

                    //执行一个laypage实例
                    laypage.render({
                        elem: "laypage-main" //注意，这里的 test1 是 ID，不用加 # 号
                        ,count: ${pageData.total} //数据总数，从服务端得到
                        ,curr: ${pageData.current}
                        ,limit: ${pageData.size}
                        
                    });
                });
            </script>
          </div>

测试结果：

3.页面跳转生效

在render里添加jump函数

<script>
                layui.use('laypage', function(){
                    var laypage = layui.laypage;

                    //执行一个laypage实例
                laypage.render({
                    elem: "laypage-main" //注意，这里的 test1 是 ID，不用加 # 号
                    ,count: ${pageData.total} //数据总数，从服务端得到
                    ,curr: ${pageData.current}
                    ,limit: ${pageData.size}
                    ,jump: function(obj, first){

                        //首次不执行
                        if(!first){
                            location.href = "?pn=" + obj.curr;
                        }
                    }
                });
                });
              </script>

点击下一页会跳转，测试结果：