jQuery插件pagination实现分页特效

以下是详细讲解“jQuery插件pagination实现分页特效”的攻略：

准备工作

1. 在html中引入jQuery和pagination插件

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-pagination/3.0.0/jquery.pagination.min.js"></script>

1. 在html中设置一个div，用于呈现分页按钮

<div id="pagination"></div>

实现分页特效

1. 确定分页相关的参数，比如每页显示数据数量（pageSize）、总共有多少页（totalPage）、当前所在的页码数（currentPage）等

var pageConfig = {
    pageSize: 10,
    totalPage: 100,
    currentPage: 1
};

1. 调用jQuery.pagination插件，实现分页按钮的呈现和点击事件的处理

$('#pagination').pagination({
    pageCount: pageConfig.totalPage, // 总页数
    current: pageConfig.currentPage, // 当前页
    totalData: pageConfig.pageSize * pageConfig.totalPage, // 总数据量
    showData: pageConfig.pageSize, // 每页数据量
    coping: true,
    count: 2, // 两边留白页数
    activeCls: 'active', // 当前页class
    keepShowPN: true, // 只有一页时是否隐藏分页器
    callback: function(api) { // 切换页码时调用的函数
        pageConfig.currentPage = api.getCurrent(); // 更新当前页码
        // 处理数据展示逻辑
    }
});

其中，$('#pagination')是一个jQuery选择器，用于获取到刚才在html中设置的分页按钮呈现的div元素，api.getCurrent()获取当前所在的页码数。

1. 在点击分页按钮时，触发上述代码中callback函数中的逻辑，处理数据展示的逻辑即可。

示例说明

1. 实现基本的分页样式和点击功能

<div id="pagination"></div>

<script>
var pageConfig = {
    pageSize: 10,
    totalPage: 20,
    currentPage: 1
};

$('#pagination').pagination({
    pageCount: pageConfig.totalPage, 
    current: pageConfig.currentPage, 
    totalData: pageConfig.pageSize * pageConfig.totalPage, 
    showData: pageConfig.pageSize, 
    coping: true,
    count: 2, 
    activeCls: 'active',
    keepShowPN: true,
    callback: function(api) {
        pageConfig.currentPage = api.getCurrent();
        console.log(pageConfig.currentPage);
    }
});
</script>

点击分页按钮时，会在控制台输出当前所在的页码数。这个例子只实现了基本的分页样式和点击功能，需要根据实际项目需求进行适当修改。

1. 结合ajax请求数据，实现基本的数据展示功能

<div id="pagination"></div>
<div id="data" class="list"></div>

<script>
var pageConfig = {
    pageSize: 10,
    totalPage: 20,
    currentPage: 1
};

function getData() {
    // 使用ajax请求数据，并根据pageConfig.currentPage和pageConfig.pageSize来获取对应的数据
    var start = (pageConfig.currentPage - 1) * pageConfig.pageSize;
    var data = [];
    for (var i = start; i < start + pageConfig.pageSize; i++) {
        data.push('数据' + (i + 1));
    }
    return data;
}

function showData() {
    // 将获取到的数据展示到页面上
    var html = '';
    var data = getData();
    for (var i = 0; i < data.length; i++) {
        html += '<div>' + data[i] + '</div>';
    }
    $('#data').html(html);
}

$('#pagination').pagination({
    pageCount: pageConfig.totalPage, 
    current: pageConfig.currentPage, 
    totalData: pageConfig.pageSize * pageConfig.totalPage, 
    showData: pageConfig.pageSize, 
    coping: true,
    count: 2, 
    activeCls: 'active',
    keepShowPN: true,
    callback: function(api) {
        pageConfig.currentPage = api.getCurrent();
        showData(); // 切换页码时重新获取数据并展示
    }
});

showData(); // 页面初始化时展示第一页的数据
</script>

<style>
.list {
    border: 1px solid #ccc;
    padding: 10px;
    margin-top: 10px;
}

.list div {
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid #ccc;
    text-align: center;
}
</style>

这个例子结合了ajax请求数据，在分页按钮点击时重新获取数据并展示到页面上。需要根据实际项目需求进行适当修改。