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); } }); }