首先,给大家看一下分页的效果图如下:
1、页码生成后会有很多页,为了按照常规的显示那几行,就写了如下的函数:
<body>
<h2>jQ插件的写法</h2>
<ul class="pagination">
<li>上一页</li>
<li>下一页</li>
</ul>
</body>
2、接下来是简单的函数:
注意:jQuery.fn.extend
是用来写插件的,jQuery.fn.extend拓展的是jQuery对象(原型的)的方法哦!具体的用法大家可以自行百度~~~
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="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >' + 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="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >' + i + "</a></li>");
// 高亮某一个
if (i == currentPage) {
$li.addClass("active");
}
// 添加到ul中
$li.insertBefore($(this).children("li:last"));
}
}
});
})(jQuery);
$('.pagination').pagination(100, 2);
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样式未书写,大家根据自己的需求调一下格式就好了,页码的数量取决于大家传入的参数,希望我的这篇文章能帮助到你~~~