前端实现翻页---jqPaginator.js

 后台每次返回10调数据

HTML：

            <div class="pageDiv">
                <div class="floatLeft totaldiv">
                         共<span class="totalpage"> 0 </span>条数据
                 </div>
                    <ul class="pagination floatLeft"></ul>
            </div>

<script type="text/javascript" src="../../static/js/lib/jqPaginator.js"></script>

JS： 

在请求成功，返回数据的success里最下面调用翻页

                 if(_s == 0){
                   fnPage(dt.all_article_num,1);
                 } 

 

    /*
    * 分页
    * tcount--总条数
    * page--当前页
    */
     var _s = 0;
     function fnPage(tcount,page){
       tcount = parseInt(tcount);
     $('.totalpage').html(tcount);
       if(!tcount) {
         $('.iplist').html('');
         $('.pagination').html('');
         return;
       }
       $('.pagination').jqPaginator({
         totalCounts: tcount,
         pageSize:10,
         visiblePages:1,
         currentPage: parseInt(page),
         first: '<li class="first"><a href="javascript:void(0);">首页<\/a><\/li>',
         prev: '<li class="prev"><a href="javascript:void(0);">上一页<\/a><\/li>',
         next: '<li class="next"><a href="javascript:void(0);">下一页<\/a><\/li>',
         last: '<li class="last"><a href="javascript:void(0);">末页<\/a><\/li>',
         page: '<li class="page"><a href="javascript:void(0);">{{page}}/ {{totalPages}}<\/a><\/li>', //<li class="page"><a href="javascript:void(0);"> {{page}} / {{totalPages}} <\/a><\/li>
         onPageChange: function (num) {
         _s++;
           if(_s>1){
             queryData(num);
           }
         }
       });
     }