分页（EasyPager）

https://github.com/ifany/EasyPager

EasyPager分页组件 是基于jQuery、jqPagination、nunjucks封装而来，非常实用且易用，它支持我们最常用的三种分页场景。

数字分页：page.html

无限滚动分页：scroll.html

加载更多分页：viewmore.html

如何使用

首先使用bower安装EasyPager:

 bower install https://github.com/ifany/EasyPager.git

1、引入css:

<link rel="stylesheet" href="assets/vendor/EasyPager/dist/easy_pager.css">

2、引入相关js:

<script src="assets/vendor/jquery/dist/jquery.min.js"></script>
<script src="assets/vendor/nunjucks/browser/nunjucks.min.js"></script>
<script>nunjucks.configure('template', { autoescape: true });</script>
<script src="assets/vendor/EasyPager/dist/easy_pager.js"></script>

3、初始化分页：

<div id="easyPager">
    <span class="easypager-loading">&nbsp;</span>
</div>

var EasyPage = new EasyPager({
    template: 'list.html', /* required */
    url: 'data/list.json', /* required */
    type: 'scroll', /* optional: scroll, page, viewmore, 'scroll' is default */
    wrapperID: 'easyPager' /* optional, 'easyPager' is default */
});

完整参数说明

var EasyPage = new EasyPager({
   template: 'list.html', // pager template path, required
   url: 'data/list.json', // pager url , required
   method: 'GET', // pager data request method
   queryString: { // pager from querySring
      pageNo: 1
   },
   type: 'viewmore', //default 'scroll', 'page'、'viewmore' optional
   threshold: 200,   // scroll threshold
   wrapperID: 'easyPager', // pager DOM hook
   loadingHTML: '<span class="easypager-loading">&nbsp;</span>', // loadin DOM
   emptyHTML: '<span class="easypager-empty">暂无记录~</span>',  // empty DOM
   viewmoreHTML: '<p class="easypager-viewmore"><span class="easypager-viewmore-box">加载更多</span></p>',  // viewmore pager DOM
    // number pager DOM
    paginationHTML: '<div class="easypager-paginationWrapper"><div class="easypager-pagination"><a href="#" class="first" data-action="first">&laquo;</a><a href="#" class="previous" data-action="previous">&lsaquo;</a><input type="text" readonly="readonly" data-max-page="10000"><a href="#" class="next" data-action="next">&rsaquo;</a><a href="#" class="last" data-action="last">&raquo;</a></div></div>',
    handleCalls: {
        dataFormat: null, // data fromat callback
        render: null  // render callback
   }
}）