Phân trang comment blogger

Nếu chưa có kinh nghiệm về Blogspot đừng lo lắng mình có dịch vụ Cầm Tay Chỉ Việc, hãy gọi hoặc Zalo ngay cho mình: 097.1539.681 để được tư vấn và hỗ trợ nhanh nhất nhé!

Bài viết này mình hướng dẫn các bạn Phân trang comment blogger, phân trang danh sách bình luận Blogspot.

Với cách làm này nó chỉ phân trang HTML của tất cả nội dung bình luận, không phải Ajax phân trang rồi lấy dữ liệu.

Cách này anh em dùng tạm, sau này mình code được bản Ajax sẽ hướng dẫn sau.

Cách làm như sau:

Bước 1: Các bạn thêm CSS nhỏ bên dưới, hoặc các bạn tự viết CSS cho đẹp hơn

.pagination,.pagination *{border-radius:.25rem;margin:13px 0 0 0;text-align:center}

.pagination a{display:inline-block;padding:0 10px;cursor:pointer}

.pagination a.disabled{opacity:0.3;pointer-events:none;cursor:not-allowed}

.pagination a.current{padding:.5rem .75rem;margin-left:-1px;line-height:1.25;color:#ffffff;background-color:#007bff;border:1px solid #dee2e6}

Bước 2: Thêm đoạn code JS trước thẻ đóng </body>

<b:if cond='data:view.isSingleItem'>

  <script>

    //<![CDATA[

    window.addEventListener("load", function() {

      (function($) {

        var pagify = {

          items: {},

          container: null,

          totalPages: 1,

          perPage: 3,

          currentPage: 0,

          createNavigation: function() {

            this.totalPages = Math.ceil(this.items.length / this.perPage);

            $('.pagination', this.container.parent()).remove();

            var pagination = $('<div class="pagination"></div>').append('<a class="nav prev disabled" data-next="false">«</a>');

            for (var i = 0; i < this.totalPages; i++) {

              var pageElClass = "page";

              if (!i) pageElClass = "page current";

              var pageEl = '<a class="' + pageElClass + '" data-page="' + (i + 1) + '">' + (i + 1) + "</a>";

              pagination.append(pageEl);

            }

            pagination.append('<a class="nav next" data-next="true">»</a>');

            this.container.after(pagination);

            var that = this;

            $("body").off("click", ".nav");

            this.navigator = $("body").on("click", ".nav", function() {

              var el = $(this);

              that.navigate(el.data("next"));

            });

            $("body").off("click", ".page");

            this.pageNavigator = $("body").on("click", ".page", function() {

              var el = $(this);

              that.goToPage(el.data("page"));

            });

          },

          navigate: function(next) {

            if (isNaN(next) || next === undefined) {

              next = true;

            }

            $(".pagination .nav").removeClass("disabled");

            if (next) {

              this.currentPage++;

              if (this.currentPage > (this.totalPages - 1)) this.currentPage = (this.totalPages - 1);

              if (this.currentPage == (this.totalPages - 1)) $(".pagination .nav.next").addClass("disabled");

            } else {

              this.currentPage--;

              if (this.currentPage < 0) this.currentPage = 0;

              if (this.currentPage == 0) $(".pagination .nav.prev").addClass("disabled");

            }

            this.showItems();

          },

          updateNavigation: function() {

            var pages = $(".pagination .page");

            pages.removeClass("current");

            $('.pagination .page[data-page="' + (this.currentPage + 1) + '"]').addClass("current");

          },

          goToPage: function(page) {

            this.currentPage = page - 1;

            $(".pagination .nav").removeClass("disabled");

            if (this.currentPage == (this.totalPages - 1)) $(".pagination .nav.next").addClass("disabled");

            if (this.currentPage == 0) $(".pagination .nav.prev").addClass("disabled");

            this.showItems();

          },

          showItems: function() {

            this.items.hide();

            var base = this.perPage * this.currentPage;

            this.items.slice(base, base + this.perPage).show();

            this.updateNavigation();

          },

          init: function(container, items, perPage) {

            this.container = container;

            this.currentPage = 0;

            this.totalPages = 1;

            this.perPage = perPage;

            this.items = items;

            this.createNavigation();

            this.showItems();

          }

        };

        $.fn.pagify = function(perPage, itemSelector) {

          var el = $(this);

          var items = $(itemSelector, el);

          if (isNaN(perPage) || perPage === undefined) {

            perPage = 3;

          }

          if (items.length <= perPage) {

            return true;

          }

          pagify.init(el, items, perPage);

        };

      })(jQuery);

      $("#top-ra").pagify(6, "li.comment");

    });

    //]]>

  </script>

</b:if>

Bài viết: Phân trang comment blogger được viết bởi admin trang Giaodien.blog

Vui lòng để lại nguồn nếu bạn chia sẻ lại bài viết này.

Để lại nguồn có nghĩa là bạn tôn trọng tác giả.

Động lực để mình chia sẻ nhiều bài viết hay.

Tags: Blog