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的样式
    
"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);
         }
        });
      }

你可能感兴趣的:(JavaScript,jquery,pagination,插件)