简单封装分页功能JQuery插件（含源码）

首先，给大家看一下分页的效果图如下：

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="#">' + 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);

   $('.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样式未书写，大家根据自己的需求调一下格式就好了，页码的数量取决于大家传入的参数，希望我的这篇文章能帮助到你~~~

简单封装分页功能JQuery插件（含源码）

猜你喜欢