1. 程式人生 > >前端翻頁---jqPaginator.js

前端翻頁---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);
           }
         }
       });
     }