jquery ias流式分页插件添加

原创 Laughing  2019-07-25 08:44  阅读 112 次 评论 0 条

下载ias插件

下载地址:

引入js插件


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>  
温馨提示

需要注意的是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. });  

分页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.    }  
本文地址:https://www.lisen.me/jquery-ias-streaming-paging-plug-in-additions.html
版权声明:本文为原创文章,版权归 木子网 所有,欢迎分享本文,转载请保留出处!
NEXT:已经是最新一篇了

发表评论


表情