jqPaginator分页插件的使用

第一步

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