使用jqPaginator分页插件的前提需要导入以下两个css样式和两个js
<link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/jqPaginator.css"> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> <script type="text/javascript" src="js/jqPaginator.js"></script>注意：
jquery-3.3.1.js文件的导入顺序要先于jqPaginator.js，因为在jqPaginator.js里会调用到jQuery的代码。无论在jsp、html或其他格式的前端页面中，在导入jquery-3.3.1.js和jqPaginator.js后，后面不能再导入jquery-3.3.1.js文件的情况，不如jqPaginator.js也会调用不到jQuery的代码。如下： <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/jqPaginator.css"> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> <script type="text/javascript" src="js/jqPaginator.js"></script> <!-- 在后面的某个地方再次导入jQuery --> <script type="text/javascript" src="js/jquery-3.3.1.js"></script>在分页的标签中加上class="pagination"，如下：
<ul class="pagination"> <li><a href="">首页</a></li> <li class="threeword"><a href="#">上一页</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">7</a></li> <li><a href="#">8</a></li> <li><a href="#">9</a></li> <li><a href="#">10</a></li> <li class="threeword"><a href="javascript:;">下一页</a></li> <li class="threeword"><a href="javascript:;">末页</a></li> </ul>删除原来对分页标签自己定义的css样式
编写js代码
$("ul.pagination").jqPaginator({ totalPages:data.pages,//设置总页数 totalCounts:data.total,//设置总共有多少数据 currentPage:data.pageNum, onPageChange:function (num, type) { if(type == "change"){ changePage(num); } } });