天天看點
傳回

簡單封裝分頁功能JQuery插件（含源碼）

首先，給大家看一下分頁的效果圖如下：

簡單封裝分頁功能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="#" 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樣式未書寫，大家根據自己的需求調一下格式就好了，頁碼的數量取決于大家傳入的參數，希望我的這篇文章能幫助到你~~~

簡單封裝分頁功能JQuery插件（含源碼） 分頁功能 jquery插件
上一篇: jQuery分頁插件jqPaginator的使用
下一篇: jquery，scss實作簡單的手風琴效果

繼續閱讀