jQuery实现的分页插件完整示例

下面是“jQuery实现的分页插件完整示例”的完整攻略。

一、准备工作

1. 引入jQuery库文件

在使用jQuery实现分页插件的过程中，需要先引入jQuery库文件，可以在网页头部加上以下代码：

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

1. 创建分页插件的HTML结构

在网页结构中，我们需要为分页插件创建一定的HTML结构。一般情况下，分页插件包含一个分页容器，一个显示总页数和当前页数的标签，以及页码的标签。下面是一个简单的HTML结构示例：

<div class="pagination-container"></div>
<div class="pagination-info">共<span class="total-page"></span>页 当前<span class="current-page"></span>/<span class="total-page"></span>页</div>
<div class="pagination-pages"></div>

二、编写分页插件的代码

1. 分页插件的主函数

接下来我们需要编写分页插件的代码，在网页中创建一个名为pagination.js的JavaScript文件，然后创建一个名为pagination的函数，在该函数中实现分页插件的逻辑，代码如下：

(function($) {
    var pagination = function(selector, options) {
        // 分页插件的逻辑
    }
    $.fn.pagination = function(options) {
        return this.each(function() {
            pagination($(this), options);
        });
    }
})(jQuery);

上述代码中的selector参数表示页面中的分页容器，options参数表示分页插件的选项。

1. 分页插件的选项

在分页插件中，我们需要提供一些选项，以便用户可以通过这些选项来控制分页插件的行为和样式。下面是一些常用的选项：

var defaults = {
    currentPage: 1, // 当前页码
    totalPage: 10, // 总页数
    showPageNum: 7, // 显示的页码数
    firstBtnText: '首页', // 首页按钮的文字
    prevBtnText: '上一页', // 上一页按钮的文字
    nextBtnText: '下一页', // 下一页按钮的文字
    lastBtnText: '尾页', // 尾页按钮的文字
    ellipsisText: '...', // 省略号的文本
    onPageChange: function() {} // 当页码发生变化时的回调函数
}

1. 分页插件的初始化

接下来在pagination函数中，我们需要对参数进行处理，并初始化分页插件的状态和样式。首先，我们需要将参数对象与默认选项进行合并，并创建一些必要的变量来存储分页插件的状态：

var opts = $.extend({}, defaults, options);
var currentPage = opts.currentPage,
    totalPage = opts.totalPage,
    showPageNum = opts.showPageNum,
    firstBtnText = opts.firstBtnText,
    prevBtnText = opts.prevBtnText,
    nextBtnText = opts.nextBtnText,
    lastBtnText = opts.lastBtnText,
    ellipsisText = opts.ellipsisText;

然后我们需要初始化分页插件的样式和状态：

// 禁用上一页和首页按钮
if(currentPage == 1) {
    prevBtn.addClass('disabled');
    firstBtn.addClass('disabled');
}
// 禁用下一页和尾页按钮
if(currentPage == totalPage) {
    nextBtn.addClass('disabled');
    lastBtn.addClass('disabled');
}
// 根据总页数和当前页码来计算显示的页码
var num = showPageNum - 2;
var start = 2;
var end = totalPage - 1;
if(totalPage <= showPageNum) {
    start = 2;
    end = totalPage - 1;
} else {
    if(currentPage - 1 <= num / 2) {
        start = 2;
        end = num + 1;
        ellipsisLeft.hide();
        ellipsisRight.show();
    } else if(currentPage + num / 2 >= totalPage) {
        start = totalPage - num;
        end = totalPage - 1;
        ellipsisLeft.show();
        ellipsisRight.hide();
    } else {
        start = currentPage - num / 2;
        end = currentPage + num / 2;
        ellipsisLeft.show();
        ellipsisRight.show();
    }
}
// 显示页码
for(var i = start; i <= end; i++) {
    var className = i == currentPage ? 'active' : '';
    var $page = $('<a class="num ' + className + '">' + i + '</a>');
    $page.data('page', i).appendTo(pages);
}

最后，我们需要给页面上的元素添加事件，以便用户可以通过点击按钮或页码来改变分页插件的状态：

// 给首页按钮添加事件
firstBtn.on('click', function() {
    if(currentPage == 1) return false;
    currentPage = 1;
    onPageChange.call(this);
});
// 给上一页按钮添加事件
prevBtn.on('click', function() {
    if(currentPage == 1) return false;
    currentPage--;
    onPageChange.call(this);
});
// 给下一页按钮添加事件
nextBtn.on('click', function() {
    if(currentPage == totalPage) return false;
    currentPage++;
    onPageChange.call(this);
});
// 给尾页按钮添加事件
lastBtn.on('click', function() {
    if(currentPage == totalPage) return false;
    currentPage = totalPage;
    onPageChange.call(this);
});
// 给页码添加事件
pages.on('click', '.num', function() {
    currentPage = $(this).data('page');
    onPageChange.call(this);
});

function onPageChange() {
    // 当页码发生变化时，更新分页插件的样式
    // ...
}

三、应用分页插件

最后，我们需要在页面中引用pagination.js文件，并调用分页插件的初始化函数：

<script src="pagination.js"></script>
<script>
    $(function() {
        $('.pagination-container').pagination({
            currentPage: 1,
            totalPage: 10,
            showPageNum: 7,
            firstBtnText: '首页',
            prevBtnText: '上一页',
            nextBtnText: '下一页',
            lastBtnText: '尾页',
            ellipsisText: '...',
            onPageChange: function() {
                console.log('当前页码：' + this.currentPage);
            }
        });
    });
</script>

以上就是“jQuery实现的分页插件完整示例”的详细攻略内容。其中，我们展示了分页插件的HTML结构、分页插件的主函数、分页插件的选项、分页插件的初始化以及应用分页插件的示例。希望对你有所帮助！