Проблема с нумерацией страниц Div

ProgramBox

Проблема с нумерацией страниц Div

Post author:admin
Запись опубликована:9 июля, 2022
Post category:Вопросы по программированию

#javascript #html #jquery #pagination

#javascript #HTML #jquery #разбивка на страницы

Вопрос:

У меня есть приложение MVC, в котором будет несколько списков DIV. У каждого списка должна быть нумерация страниц. В моем коде разбивка на страницы работает для одного набора, но в случае нескольких наборов разбивка на страницы сворачивается друг с другом.

Ожидаемое поведение

Каждая разбивка на страницы должна работать независимо, но текущий код сворачивает оба DIV

Ссылка на скрипку

 (function($) {
  var pagify = {
    items: {},
    container: null,
    totalPages: 1,
    perPage: 3,
    currentPage: 0,
    createNavigation: function(container) {
      this.totalPages = Math.ceil(this.items.length / this.perPage);

      $(container).nextAll(".pagination").remove();
      var pagination = $('<ul class="pagination"></ul>').append(
        '<li class="disabled"><a class="nav prev" data-next="false">Prev <<</a></li>'
      );

      for (var i = 0; i < this.totalPages; i  ) {
        var pageElClass = "page";
        var activeClass = "";
        if (!i) {
          pageElClass = "page current";
          activeClass = "current active";
        }
        var pageEl =
          '<li class="'  
          activeClass  
          '"><a class="'  
          pageElClass  
          '" data-page="'  
          (i   1)  
          '">'  
          (i   1)  
          "</a></li>";
        pagination.append(pageEl);
      }
      pagination.append(
        '<li><a class="nav next" data-next="true">Next >></a><li>'
      );

      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"), $(this).parents("ul.pagination").prev());
      });

      $("body").off("click", ".page");
      this.pageNavigator = $("body").on("click", ".page", function() {
        var el = $(this);
        that.goToPage(el.data("page"), $(this).parents("ul.pagination").prev());
      });
    },
    navigate: function(next, container) {
      // default perPage to 5
      if (isNaN(next) || next === undefined) {
        next = true;
      }
      $(container)
        .nextAll(".pagination")
        .find("a.nav")
        .parent("li")
        .removeClass("disabled");
      if (next) {
        this.currentPage  ;
        if (this.currentPage > this.totalPages - 1)
          this.currentPage = this.totalPages - 1;
        if (this.currentPage == this.totalPages - 1)
          $(container)
          .nextAll(".pagination")
          .find("a.nav.next")
          .parent("li")
          .addClass("disabled");
      } else {
        this.currentPage--;
        if (this.currentPage < 0) this.currentPage = 0;
        if (this.currentPage == 0)
          $(container)
          .nextAll(".pagination")
          .find("a.nav.prev")
          .parent("li")
          .addClass("disabled");
      }

      this.showItems(container);
    },
    updateNavigation: function(container) {
      var pages = $(container).nextAll(".pagination").find("a.page");
      pages.parent("li").removeClass("current").removeClass("active");
      $(container)
        .nextAll(".pagination")
        .find('a.page[data-page="'   (this.currentPage   1)   '"]')
        .parent("li")
        .addClass("current active");
    },
    goToPage: function(page, container) {
      this.currentPage = page - 1;
      $(container)
        .nextAll(".pagination")
        .find("a.nav")
        .parent("li")
        .removeClass("disabled");
      if (this.currentPage == this.totalPages - 1)
        $(container)
        .nextAll(".pagination")
        .find("a.nav.next")
        .parent("li")
        .addClass("disabled");

      if (this.currentPage == 0)
        $(container)
        .nextAll(".pagination")
        .find("a.nav.prev")
        .parent("li")
        .addClass("disabled");
      this.showItems(container);
    },
    showItems: function(container) {
      this.items.hide();
      var base = this.perPage * this.currentPage;
      this.items.slice(base, base   this.perPage).show();
      this.updateNavigation(container);
    },
    init: function(container, items, perPage) {
      this.container = container;
      this.currentPage = 0;
      this.totalPages = 1;
      this.perPage = perPage;
      this.items = items;
      this.createNavigation(container);
      this.showItems(container);
    }
  };

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

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

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

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

  $("#systemviewcontainer").pagify(5, ".pagination-item");
  $("#bookmarkscontainer").pagify(5, ".pagination-item");
})(jQuery);

 body {
  font-family: sans-serif;
  text-align: center;
  padding: 3rem;
  font-size: 1.125rem;
  line-height: 1.5;
  transition: all 725ms ease-in-out;
}

.pagination {
  display: inline-block;
  padding-left: 0;
  margin: 20px 0;
  border-radius: 4px;
}

.pagination>li {
  display: inline;
}

.pagination>li>a,
.pagination>li>span {
  position: relative;
  float: left;
  padding: 6px 12px;
  margin-left: -1px;
  line-height: 1.42857;
  color: #08427e;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #b2b3b5;
}

.pagination>li>a:focus,
.pagination>li>a:hover,
.pagination>li>span:focus,
.pagination>li>span:hover {
  z-index: 2;
  color: #6d9abc;
  background-color: #eee;
  border-color: #b2b3b5;
}

.pagination>li:first-child>a,
.pagination>li:first-child>span {
  margin-left: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.pagination>li:last-child>a,
.pagination>li:last-child>span {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover {
  z-index: 3;
  color: #fff;
  cursor: defau<
  background-color: #08427e;
  border-color: #08427e;
}

.pagination>.disabled>a,
.pagination>.disabled>a:focus,
.pagination>.disabled>a:hover,
.pagination>.disabled>span,
.pagination>.disabled>span:focus,
.pagination>.disabled>span:hover {
  color: #b2b3b5;
  cursor: not-allowed;
  background-color: #fff;
  border-color: #b2b3b5;
}

.pagination-lg>li>a,
.pagination-lg>li>span {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33333;
}

.pagination-lg>li:first-child>a,
.pagination-lg>li:first-child>span {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

.pagination-lg>li:last-child>a,
.pagination-lg>li:last-child>span {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.pagination-sm>li>a,
.pagination-sm>li>span {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
}

.pagination-sm>li:first-child>a,
.pagination-sm>li:first-child>span {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.pagination-sm>li:last-child>a,
.pagination-sm>li:last-child>span {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.pager {
  padding-left: 0;
  margin: 20px 0;
  text-align: center;
  list-style: none;
}

.pager:after,
.pager:before {
  display: table;
  content: " ";
}

.pager:after {
  clear: both;
}

.pager li {
  display: inline;
}

.pager li>a,
.pager li>span {
  display: inline-block;
  padding: 5px 14px;
  background-color: #fff;
  border: 1px solid #b2b3b5;
  border-radius: 15px;
}

.pager li>a:focus,
.pager li>a:hover {
  text-decoration: none;
  background-color: #eee;
}

.pager .next>a,
.pager .next>span {
  float: right;
}

.pager .previous>a,
.pager .previous>span {
  float: left;
}

.pager .disabled>a,
.pager .disabled>a:focus,
.pager .disabled>a:hover,
.pager .disabled>span {
  color: #b2b3b5;
  cursor: not-allowed;
  background-color: #fff;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="systemviewcontainer">
  <div class="row single accordion-contents pagination-item" style="">
    <div class="col-xs-12 round">
      <div class="col-xs-6 ">
        <a href="http://localhost:1594/home/AnonymousFeedback">
          <div class="wrapText">
            Anonymous Feedback
          </div>
        </a>
      </div>
    </div>
  </div>
  <div class="row single accordion-contents pagination-item" style="">
    <div class="col-xs-12 round">
      <div class="col-xs-6 ">
        <a href="http://localhost:1594/milestones?productStageId=1">
          <div class="wrapText">
            Manage Milestones
          </div>
        </a>
      </div>
    </div>
  </div>
  <div class="row single accordion-contents pagination-item" style="">
    <div class="col-xs-12 round">
      <div class="col-xs-6 ">
        <a href="http://localhost:1594/projects">
          <div class="wrapText">
            Manage Projects
          </div>
        </a>
      </div>
    </div>
  </div>
  <div class="row single accordion-contents pagination-item" style="">
    <div class="col-xs-12 round">
      <div class="col-xs-6 ">
        <a href="http://localhost:1594/resourcegroups">
          <div class="wrapText">
            Manage Resource Groups
          </div>
        </a>
      </div>
    </div>
  </div>
  <div class="row single accordion-contents pagination-item" style="">
    <div class="col-xs-12 round">
      <div class="col-xs-6 ">
        <a href="http://localhost:1594/criteria/sewi">
          <div class="wrapText">
            Manage SEWI Classes
          </div>
        </a>
      </div>
    </div>
  </div>
  <div class="row single accordion-contents pagination-item" style="display: none;">
    <div class="col-xs-12 round">
      <div class="col-xs-6 ">
        <a href="http://localhost:1594/TaskForces">
          <div class="wrapText">
            Manage TaskForces / FocusTeams
          </div>
        </a>
      </div>
    </div>
  </div>
  <div class="row single accordion-contents pagination-item" style="display: none;">
    <div class="col-xs-12 round">
      <div class="col-xs-6 ">
        <a href="http://localhost:1594/criteria/tewi">
          <div class="wrapText">
            Manage TEWI Criteria
          </div>
        </a>
      </div>
    </div>
  </div>
</div>

<br />
<br />

<div id="bookmarkscontainer">
  <div class="row accordion-contents pagination-item" style="">
    <div class="col-xs-12 round">
      <div class="col-xs-6 "> <a href="/reports/history/092adca6-14b4-496b-ad37-1aeb589e059d">Project 13 </a></div>
    </div>
  </div>
  <div class="row accordion-contents pagination-item" style="">
    <div class="col-xs-12 round">
      <div class="col-xs-6 "> <a href="/reports/history/9ce23f1a-b5d6-4110-bbb8-3ebad527a2c0">Project 37 </a></div>
    </div>
  </div>
  <div class="row accordion-contents pagination-item" style="">
    <div class="col-xs-12 round">
      <div class="col-xs-6 "> <a href="/reports/history/bbdfa32b-0f74-47e8-b5a9-19c8b8e1aedd">Project 12 </a></div>
    </div>
  </div>
  <div class="row accordion-contents pagination-item" style="">
    <div class="col-xs-12 round">
      <div class="col-xs-6 "> <a href="/productreports/history/9b81e456-cb3f-401b-80e7-6ada3c2827a5">dolore1</a> </div>
    </div>
  </div>
  <div class="row accordion-contents pagination-item" style="">
    <div class="col-xs-12 round">
      <div class="col-xs-6 "> <a href="/productreports/history/74f2cb23-70a7-4bb1-8960-a36563b98927">dolore6</a> </div>
    </div>
  </div>
  <div class="row accordion-contents pagination-item" style="display: none;">
    <div class="col-xs-12 round">
      <div class="col-xs-6 "> <a href="/productreports/history/2e5fda81-1ef7-4e39-928b-afdc314ef6e3">ipsum2</a> </div>
    </div>
  </div>
  <div class="row accordion-contents pagination-item" style="display: none;">
    <div class="col-xs-12 round">
      <div class="col-xs-6 "> <a href="/TaskForcesReports/History/02b8317c-b712-4e5b-9a41-3ab9d6bd4f9e">TaskForceName_ufbBK</a> </div>
    </div>
  </div>
</div>

Развернуть фрагмент

Метки: Проблема с разбиением на страницы Div

Вопрос:

Вам также может понравиться

Разработчик Google API: purchases.products.get игнорирует значение ProductID и всегда возвращает 200

Почему я получаю неопределенную ошибку, используя pint

отсутствует обновление amazon linux 2 yum (Центр безопасности AWS)