从零开始搭建自己的网站十：jquery ias流式分页插件添加

前面的文章中，我们已经完成了后台功能中的添加文章的功能。添加文章了之后，主要的任务就是展示文章了。首页中，我们采用 jquery ias流式分页插件来进行页面分页功能。

1、下载ias插件。下载地址：https://github.com/webcreate/Infinite-Ajax-Scroll。

2、引入js插件

<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/jquery.ias.js"></script>

3、html，js代码

<div class="content">
  <#if articles?exists> <!--这里的#if是freemarker语法，用来判断是否有数据，然后进行循环展示-->
    <#list articles as article>
      <article class="excerpt excerpt-1"><a class="focus" href="/article/${article.contentId}.html" title="">
      <img class="thumb" data-original="${article.imgurl}" src="${article.imgurl}" alt=""></a>
        <header><a class="cat" href="/category/${article.categoryId}.html">${article.categoryValue}<i></i></a>
          <h2><a href="/article/${article.contentId}.html" title="">${article.title}</a></h2>
        </header>
        <p class="meta">
          <time class="time"><i class="glyphicon glyphicon-time"></i> ${article.createDate}</time>
          <span class="views"><i class="glyphicon glyphicon-eye-open"></i> 
          共${article.click}人围观</span> <a class="comment" href="article.html#comment">
          <i class="glyphicon glyphicon-comment"></i> ${article.comment}个评论</a></p>
        <p class="note">${article.abstr} ... </p>
      </article>
    </#list>
  </#if>
  <nav class="pagination" style="display: none;">
    <ul>
      <li class="prev-page"></li>
      <#if nextPage?exists>
        <li class="next-page"><a href="/page/${nextPage}">下一页</a></li>
      </#if>
      <li><span>共 ${pageNum} 页</span></li>
    </ul>
  </nav>
</div>

需要注意的是container，item，pagination，next，必须要一一对应

//无限滚动反翻页
jQuery.ias({
    history: false,
    container: '.content',
    item: '.excerpt',
    pagination: '.pagination',
    next: '.next-page a',
    trigger: '查看更多',
    loader: '<div class="pagination-loading"><img src="/images/loading.gif" /></div>',
    triggerPageThreshold: 5,
    onRenderComplete: function () {
        $('.excerpt .thumb').lazyload({
            placeholder: '/images/occupying.png',
            threshold: 400
        });
        $('.excerpt img').attr('draggable', 'false');
        $('.excerpt a').attr('draggable', 'false');
    }
});

4、分页java代码

    @RequestMapping("/page/{num}")
    public String page(Model model, @PathVariable int num) {
        //获取点击量和评论量
        List<Count> countList = countService.getCountList();
        //获取最新发布的文章
        List<Article> list = articleService.getArticleList(num, countList);
        model.addAttribute("articles", list);
        //总数
        int count = articleService.getArticleSize();
        //总页数
        int pageNum = count / 5;
        model.addAttribute("pageNum", pageNum);
        if (pageNum > num) {
            model.addAttribute("nextPage", num + 1);
        }
        //今日推荐
        List<Article> top2 = articleService.getTopArticleList("2");
        model.addAttribute("now", top2.get(0));
        return "homepage/index";
    }

    //mybatis分页sql
    <select id="getArticleList" resultMap="article" parameterType="java.lang.Integer">
        select * from article order by createDate desc limit #{num},5
    </select>

​

欢迎转载，转载请注明出处 http://www.dingyinwu.com/article/50.html 

如果文章中有任何问题或者可以改进的地方，请大家多提提意见，我会非常感激。