核心提示：首先，给大家看一下分页的效果图如下：1、页码生成后会有很多页，为了按照常规的显示那几行，就写了如下的函数：bodyh2jQ插件的写法/h2ul class=paginationli上一页/lili下一...
首先，给大家看一下分页的效果图如下：
1、页码生成后会有很多页，为了按照常规的显示那几行，就写了如下的函数：
<body>
<h2>jQ插件的写法</h2>
<ul class="pagination">
<li>上一页</li>
<li>下一页</li>
</ul>
</body>
2、接下来是简单的函数：
注意：jQuery.fn.extend
jQuery.fn.extend({
pagination: function (totalPage, currentPage) {
// 生成页数，除去上一页和下一页
$(this).children('li:not(:first,:last)').remove();
// 获取当前页,根据当前页 计算 需要显示的页码
var startIndex = currentPage - 2;
var endIndex = currentPage + 2;
// 修正一下，页码不能小于1和大于总页数
if (startIndex < 1) {
startIndex = 1;
endIndex = startIndex + 4;
}
if (endIndex > totalPage) {
endIndex = totalPage;
startIndex = endIndex - 4;
}
// 循环生成页码
for (var i = startIndex; i <= endIndex; i++) {
// 生成li
var $li = $('<li><a href="#">' + i + '</a></li>');
// 高亮某一个，active的样式自己按需求写
if (i == currentPage) {
$li.addClass('active');
}
// 添加到ul中
$li.insertBefore($(this).children('li:last'));
}
}
})
3、函数封装完成后，该怎么调用呢?
传入参数就可以了：
$('.pagination').pagination(100, 2);
4、以上是函数原生的一个过程，但是平常在工作中我们会封装成一个插件来调用，封装插件的过程及工作中我们的代码是如下的：
(function(jQuery) {
// 密闭的环境
jQuery.fn.extend({
pagination: function(totalPage, currentPage) {
// 生成页数
$(this).children("li:not(:first,:last)").remove();
// 获取当前页,根据当前页 计算 需要显示的页码
var startIndex = currentPage - 2;
var endIndex = currentPage + 2;
// 修正一下
if (startIndex < 1) {
startIndex = 1;
endIndex = startIndex + 4;
}
if (endIndex > totalPage) {
endIndex = totalPage;
startIndex = endIndex - 4;
}
// 循环生成页码
for (var i = startIndex; i <= endIndex; i++) {
// 生成li
var $li = $('<li><a href="#">' + i + "</a></li>");
// 高亮某一个
if (i == currentPage) {
$li.addClass("active");
}
// 添加到ul中
$li.insertBefore($(this).children("li:last"));
}
}
});
})(jQuery);
5、上面的代码就是封装好的jQuery.pagination.js，大家只要复制下来放到一个空白的js文件中，然后在书写页面引入然后调用函数直接传参就可以了~
<script src="./js/jquery.min.js"></script>
<script src="./js/jQuery.pagination.js"></script>
<script>
$('.pagination').pagination(100, 2);
</script>
注意：因为是jQuery中没有封装的，所以拓展一个插件，在引入js文件的时候，插件一定要放在JQ的下面，顺序不能乱，会影响这个结果的，本文只是把封装好的代码给提供出来了，css样式未书写，大家根据自己的需求调一下格式就好了，页码的数量取决于大家传入的参数，希望我的这篇文章能帮助到你~~~
