如何在 Javascript 分页 pagify() 中创建导航系统

Question

我有一个 js 分页系统，可以找到 .classname 元素并即时对其进行分页。单击导航页面，脚本仅显示该间隔内的 .classname 元素。

当需要对太多项目进行分页时，我想添加一个箭头系统来让导航页面链接。主脚本在这里：https://jsfiddle.net/gyzo2u9c/

(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"><i class="fas fa-caret-left"></i></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"><i class="fas fa-caret-right"></i></a>');
      /*aggiungiamo la paginazione sopra nel calendario*/
      if ($(this.container).selector == '#calendario .archivio') {
        this.container.before(pagination);
      } else {
        /*sotto, in tutti gli altri casi*/
        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"));

        $([document.documentElement, document.body]).animate({
          scrollTop: ($(".archivio").offset().top - 120)
        }, 1);

      });
    },
    navigate: function(next) {
      // default perPage to 5
      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().removeClass('item_visibile');
      var base = this.perPage * this.currentPage;
      this.items.slice(base, base + this.perPage).show().addClass('item_visibile');

      this.updateNavigation();
    },
    init: function(container, items, perPage, currentPage) {


      // default perPage to 5
      if (isNaN(currentPage) || currentPage === undefined) {
        currentPage = 0;
      }

      this.container = container;
      this.currentPage = currentPage;
      this.totalPages = 1;
      this.perPage = perPage;
      this.items = items;
      this.createNavigation();
      this.showItems();
    }
  };

  // stuff it all into a jQuery method!
  $.fn.pagify = function(perPage, itemSelector, currentPage) {
    var el = $(this);
    var items = $(itemSelector, el);

    // default perPage to 5
    if (isNaN(perPage) || perPage === undefined) {
      perPage = 3;
    }

    // don't fire if fewer items than perPage
    if (items.length <= perPage) {
      return true;
    }

    pagify.init(el, items, perPage, currentPage);
  };
})(jQuery);

jQuery(".archive").pagify(2, ".item");

我必须如何/在哪里添加箭头算法？ 提前谢谢你

Answer 1

解决方案：

(function($) {
    var pagify = {
        items: {},
        container: null,
        totalPages: 1,
        perPage: 3,
        currentPage: 0,
        nextpageInterval: 20,
        createNavigation: function() {
            
            this.generateUI();

            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"));
                
                $([document.documentElement, document.body]).animate({ 
                    scrollTop: ($(".archivio").offset().top-120)
                }, 1);  
                
            });
        },
        getPageList: function(totalPages, page, maxLength) {
            if (maxLength < 5) throw "maxLength must be at least 5";
        
            function range(start, end) {
                return Array.from(Array(end - start + 1), (_, i) => i + start); 
            }
        
            var sideWidth = 1;
            var leftWidth = (maxLength - sideWidth*2 - 3) >> 1;
            var rightWidth = (maxLength - sideWidth*2 - 2) >> 1;
            if (totalPages <= maxLength) {
                // no breaks in list
                return range(1, totalPages);
            }
            if (page <= maxLength - sideWidth - 1 - rightWidth) {
                // no break on left of page
                return range(1, maxLength - sideWidth - 1)
                    .concat(0, range(totalPages - sideWidth + 1, totalPages));
            }
            if (page >= totalPages - sideWidth - 1 - rightWidth) {
                // no break on right of page
                return range(1, sideWidth)
                    .concat(0, range(totalPages - sideWidth - 1 - rightWidth - leftWidth, totalPages));
            }
            // Breaks on both sides
            return range(1, sideWidth)
                .concat(0, range(page - leftWidth, page + rightWidth),
                        0, range(totalPages - sideWidth + 1, totalPages));
        },
        generateUI: function(){
            this.totalPages = Math.ceil(this.items.length / this.perPage);

            var pages = this.getPageList(this.totalPages, this.currentPage, this.nextpageInterval); 

            $('.pagination', this.container.parent()).remove();
            var pagination = $('<div class="pagination"></div>');
            
            for (var i = 0; i < pages.length; i++) {
                var pageElClass = "page";
                if (pages[i] == (this.currentPage + 1)){
                    pageElClass = "page current";
                }

                if(pages[i] != 0){
                    var lbl = pages[i];
                    if(i == 0 && pages[i + 1] == 0){
                        lbl = '<i class="fas fa-step-backward"></i>';
                    }else if(i == (pages.length-1) && pages[i - 1] == 0){
                        lbl = '<i class="fas fa-step-forward"></i>';
                    }
                    var pageEl = '<a class="' + pageElClass + '" data-page="' + (
                        pages[i]) + '">' + (
                            lbl) + "</a>";
                        pagination.append(pageEl);
                    
                }else{
                    if(i == 1){
                        var prevEl = '<a class="nav prev disabled" data-next="false"><i class="fas fa-caret-left"></i></a>';
                            pagination.append(prevEl);    
                    }else{
                        var nextEl = '<a class="nav next" data-next="true"><i class="fas fa-caret-right"></i></a>';
                            pagination.append(nextEl);   
                    }
                }

            }
            
            /*aggiungiamo la paginazione sopra nel calendario*/
            if ($(this.container).selector == '#calendario .archivio'){
                this.container.before(pagination);
            } else {
                /*sotto, in tutti gli altri casi*/
                this.container.after(pagination);
            }
        },
        navigate: function(next) {
            // default perPage to 5
            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");
            this.generateUI();
        },
        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().removeClass('item_visibile');
            var base = this.perPage * this.currentPage;
            this.items.slice(base, base + this.perPage).show().addClass('item_visibile');

            this.updateNavigation();
        },
        init: function(container, items, perPage, currentPage) {
            
            
            // default perPage to 5
            if (isNaN(currentPage) || currentPage === undefined) {
                currentPage = 0;
            }
            
            this.container = container;
            this.currentPage = currentPage;
            this.totalPages = 1;
            this.perPage = perPage;
            this.items = items;
            this.createNavigation();
            this.showItems();
        }
    };

    // stuff it all into a jQuery method!
    $.fn.pagify = function(perPage, itemSelector, currentPage) {
        var el = $(this);
        var items = $(itemSelector, el);

        // default perPage to 5
        if (isNaN(perPage) || perPage === undefined) {
            perPage = 3;
        }

        // don't fire if fewer items than perPage
        if (items.length <= perPage) {
            return true;
        }

        pagify.init(el, items, perPage, currentPage);
    };
})(jQuery);