Pagination分頁插件

Pagination.js

Pagination概述

• Pagination.js是一個基於Jquery的分頁插件，所以在使用時必須先加載Jquery,而且自帶樣式pagination.css

引入相JS關文件

    <link rel="stylesheet" href="../css/pagination.css">
    <script src="../js/jquery-3.2.1.js"></script>
    <script src="../js/jquery.pagination.js"></script>

編寫分頁盒子(html)

//添加class必須是pagination才能匹配pagination.css的樣式
    <div id="pagination" class="pagination"></div>

Js代碼實現

 var total=60;//總條數
     var pageSize=10;//每頁顯示10條
     $("#pagination").pagination(total,{
        prev_text:"上一頁",//上一頁按鈕文字，默認值爲Perv
        next_text:"下一頁",//下一頁按鈕文字,默認值爲next
        num_edge_entries:2,兩側顯示的首尾分頁的條目數
        items_per_page:pageSize,//每頁顯示條數
        num_display_entries:5,連續分頁主體部分顯示的分頁條目數
        callback:callback//回調
      });
     /**
      * 回調
      */
      function callback(index,jq) {
         initPage(index);//初始化頁面
       }
      function initPage(index) {
         //請求數據
         $.ajax({
         url:basePath+"/admin/selectAllCate.html",
         type:"GET",
         success:function (response,status,xhr) {
           console.log(status);
         }
        });
      }