jquery ias流式分页插件添加

jquery ias流式分页插件添加

2018年02月12日 11:10:22 丁垠午 阅读数 1022更多

所属专栏： 网站建设

版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/juewang_love/article/details/79315437

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

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

 

2、引入js插件

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

2. <script src="js/jquery.ias.js"></script>

 

3、html，js代码

1. <div class="content">

2.   <#if articles?exists> <!--这里的#if是freemarker语法，用来判断是否有数据，然后进行循环展示-->

3.     <#list articles as article>

4.       <article class="excerpt excerpt-1"><a class="focus" href="/article/${article.contentId}.html" title="">

5.       <img class="thumb" data-original="${article.imgurl}" src="${article.imgurl}" alt=""></a>

6.         <header><a class="cat" href="/category/${article.categoryId}.html">${article.categoryValue}<i></i></a>

7.           <h2><a href="/article/${article.contentId}.html" title="">${article.title}</a></h2>

8.         </header>

9.         <p class="meta">

10.           <time class="time"><i class="glyphicon glyphicon-time"></i> ${article.createDate}</time>

11.           <span class="views"><i class="glyphicon glyphicon-eye-open"></i> 

12.           共${article.click}人围观</span> <a class="comment" href="article.html#comment">

13.           <i class="glyphicon glyphicon-comment"></i> ${article.comment}个评论</a></p>

14.         <p class="note">${article.abstr} ... </p>

15.       </article>

16.     </#list>

17.   </#if>

18.   <nav class="pagination" style="display: none;">

19.     <ul>

20.       <li class="prev-page"></li>

21.       <#if nextPage?exists>

22.         <li class="next-page"><a href="/page/${nextPage}">下一页</a></li>

23.       </#if>

24.       <li><span>共 ${pageNum} 页</span></li>

25.     </ul>

26.   </nav>

27. </div>

28.  

 

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

1. //无限滚动反翻页

2. jQuery.ias({

3.     history: false,

4.     container: '.content',

5.     item: '.excerpt',

6.     pagination: '.pagination',

7.     next: '.next-page a',

8.     trigger: '查看更多',

9.     loader: '<div class="pagination-loading"><img src="/images/loading.gif" /></div>',

10.     triggerPageThreshold: 5,

11.     onRenderComplete: function () {

12.         $('.excerpt .thumb').lazyload({

13.             placeholder: '/images/occupying.png',

14.             threshold: 400

15.         });

16.         $('.excerpt img').attr('draggable', 'false');

17.         $('.excerpt a').attr('draggable', 'false');

18.     }

19. });

 

4、分页java代码

1. @RequestMapping("/page/{num}")

2. public String page(Model model, @PathVariable int num) {

3. //获取点击量和评论量

4. List<Count> countList = countService.getCountList();

5. //获取最新发布的文章

6. List<Article> list = articleService.getArticleList(num, countList);

7. model.addAttribute("articles", list);

8. //总数

9. int count = articleService.getArticleSize();

10. //总页数

11. int pageNum = count / 5;

12. model.addAttribute("pageNum", pageNum);

13. if (pageNum > num) {

14. model.addAttribute("nextPage", num + 1);

15. }

16. //今日推荐

17. List<Article> top2 = articleService.getTopArticleList("2");

18. model.addAttribute("now", top2.get(0));

19. return "homepage/index";

20. }

1. //mybatis分页sql

2. <select id="getArticleList" resultMap="article" parameterType="java.lang.Integer">

3. select * from article order by createDate desc limit #{num},5

4. </select>

​