简介

现在网上各种各样的分页组件很多，但是很难找到十分“称心如意”的，于是jqPaginator诞生了。

我心中理想的分页组件，要不受CSS框架限制，可以使用在各种不同风格中的网页中。以我浅显的经验来看，要达到这个目标，关键的一点就是高度自定义的Html结构。所以jqPaginator努力做到合理范围内的自定义，使其灵活的使用了各种不同的场景。

官网<http://jqpaginator.keenwon.com/>

准备

下载

下载jquery,下载插件jqpaginator,下载bootstrap

1	https://gitee.com/haoyongliang/resources/raw/master/toolsAndsoft/fenye.rar

引入JQuery、BootStrap、jqpaginator

1
2
3

<script src="js/jquery-3.3.1.js"></script>
<script src="js/jqpaginator.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">

第一步、定义显示分页条的容器

在页面定义一个标签容器，这个容器里就是我们未来要显示的分页条

<!-- 分页按钮 -->
<div class="footer">
	<ul class="pagination" id="pagination0"></ul>
</div>

第二步、初始化分页条

初始化分页条

总页数插件自己算，不用管

$.jqPaginator('#pagination0', {//这个选择器是容器的ID，必须和第一步的ID对应
    totalCounts:1, //总记录数是1,先写死
    pageSize:10,//每页显示10条记录
    visiblePages: 10,//分页条显示10个页码
    currentPage: 1,//默认是第一页
    first:'<li class="first"><a href="javascript:;">首页</a></li>',
    last:'<li class="first"><a href="javascript:;">尾页</a></li>',
    prev : '<li class="prev"><a href="javascript:;">上页</a></li>',
    next : '<li class="next"><a href="javascript:;">下页</a></li>',
    page : '<li class="page"><a href="javascript:;">{{page}}</a></li>',
    onPageChange: function (num, type) {//num表示被点击的那个页码
        console.log(num);
    }
});

第三步、编写onPageChange函数

该函数在分页条初始化完毕后会被执行一次，并且num=1

之后在每次点击页码的时候都会触发一次

分析后发现：这个函数中我们可以干两件事

1.把当前页码和每页显示的记录书以ajax形式发送给服务器

2.将写死的totalCounts配置更新为真实数据

代码如下

onPageChange: function (num, type) {//num表示被点击的那个页码
    console.log(num);
    /*
    *第一件事情：向服务器发送当前第几页，每页显示几条记录
    *第二件事情：将总记录数对接真实数据
    */
    $.ajax({
        url:"/PageQueryTownServlet",
        type:"get",
        data:{
            pageNum:num,
            pageSize:10
        },
        success:function (data) {
            try{
                //将总记录数对接真实数据
                $('#pagination0').jqPaginator('option', {
                    totalCounts: data.total
                });
            }catch(e){
            }
        },
        error:function (e) {
            console.log(e)
        }
    });
}