使用Bootstrap和jQuery不能很好地渲染多个分页器

Question

我正在使用Bootstrap和jQuery进行分页。

我引用了这个答案让我开始： Limit the number of visible pages in pagination

我遇到的问题是，如果页面上有多个分页器，JavaScript将无法很好地呈现两个分页器。

var success = await TaskMethod1();
if (await TaskMethod2()) 
  success = true; // Repeated for all tasks

function getPageList(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 = maxLength < 11 ? 1 : 2;
  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])
      .concat(range(totalPages - sideWidth + 1, totalPages));
  }
  if (page >= totalPages - sideWidth - 1 - rightWidth) {
    // no break on right of page
    return range(1, sideWidth)
      .concat([0])
      .concat(range(totalPages - sideWidth - 1 - rightWidth - leftWidth, totalPages));
  }
  // Breaks on both sides
  return range(1, sideWidth)
    .concat([0])
    .concat(range(page - leftWidth, page + rightWidth))
    .concat([0])
    .concat(range(totalPages - sideWidth + 1, totalPages));
}

jQuery(function() {
  // Number of items and limits the number of items per page
  var numberOfItems = 25;
  var limitPerPage = 2;
  // Total pages rounded upwards
  var totalPages = numberOfItems;
  // Number of buttons at the top, not counting prev/next,
  // but including the dotted buttons.
  // Must be at least 5:
  var paginationSize = 10;
  var currentPage;

  function showPage(whichPage) {
    if (whichPage < 1 || whichPage > totalPages) {
      return false;
    }
    currentPage = whichPage;
    // Replace the navigation items (not prev/next):            
    jQuery(".pagination li").slice(1, -1).remove();
    getPageList(totalPages, currentPage, paginationSize).forEach(item => {
      jQuery("<li>").addClass("page-item")
        .addClass(item ? "current-page" : "disabled more")
        .toggleClass("active", item === currentPage)
        .append(jQuery("<a href='#'>").addClass("page-link").text(item || "..."))
        .insertBefore("#next-page");
    });
    // Disable prev/next when at first/last page:
    jQuery("#previous-page").toggleClass("disabled back", currentPage === 1);
    jQuery("#next-page").toggleClass("disabled next", currentPage === totalPages);
    return true;
  }

  // Include the prev/next buttons:
  jQuery(".pagination").append(
    jQuery("<li>").addClass("page-item back").attr({
      id: "previous-page"
    }).append(
      jQuery("<a href='#'>").addClass("page-link").text("<")
    ),
    jQuery("<li>").addClass("page-item next").attr({
      id: "next-page"
    }).append(
      jQuery("<a href='#'>").addClass("page-link").text(">")
    )
  );
  // Show the page links
  showPage(1);

  // Use event delegation, as these items are recreated later    
  jQuery(document).on("click", ".pagination li.current-page:not(.active)", function() {
    return showPage(+jQuery(this).text());
  });

  jQuery("#next-page").on("click", function() {
    return showPage(currentPage + 5);
  });

  jQuery("#previous-page").on("click", function() {
    return showPage(currentPage - 5);
  });

  var ellipsisNext = function() {
    jQuery('li#next-page').prev().prev().on("click", function() {
      if (jQuery('li#next-page').prev().prev().text() == "...") {
        return showPage(currentPage + 5);
      }
    });
  }
  var ellipsisBack = function() {
    jQuery("li#previous-page").next().next().on("click", function() {
      if (jQuery('li#previous-page').next().next().text() == "...") {
        return showPage(currentPage - 5);
      }
    });
  }
  jQuery('').click(function() {
    ellipsisNext();
    ellipsisBack();
  })

});

Answer 1

我稍微修改了你的代码段。错误是由于通过类名而不是id引用分页元素，因为这会破坏

    capabilities.setCapability("takesScreenshot", true);

我已用

替换

jQuery(".pagination li").slice(1, -1).remove();

当然，出于同样的原因，如果您希望单击处理程序在每个paginator元素上都是特定的，那么您也必须更改该代码。

＆＃13;

＆＃13;

jQuery("#pag1 li").slice(1, -1).remove();
jQuery("#pag2 li").slice(1, -1).remove();

＆＃13;

function getPageList(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 = maxLength < 11 ? 1 : 2;
  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])
      .concat(range(totalPages - sideWidth + 1, totalPages));
  }
  if (page >= totalPages - sideWidth - 1 - rightWidth) {
    // no break on right of page
    return range(1, sideWidth)
      .concat([0])
      .concat(range(totalPages - sideWidth - 1 - rightWidth - leftWidth, totalPages));
  }
  // Breaks on both sides
  return range(1, sideWidth)
    .concat([0])
    .concat(range(page - leftWidth, page + rightWidth))
    .concat([0])
    .concat(range(totalPages - sideWidth + 1, totalPages));
}

jQuery(function() {
  // Number of items and limits the number of items per page
  var numberOfItems = 25;
  var limitPerPage = 2;
  // Total pages rounded upwards
  var totalPages = numberOfItems;
  // Number of buttons at the top, not counting prev/next,
  // but including the dotted buttons.
  // Must be at least 5:
  var paginationSize = 10;
  var currentPage;

  function showPage(whichPage) {
    if (whichPage < 1 || whichPage > totalPages) {
      return false;
    }
    currentPage = whichPage;
    // Replace the navigation items (not prev/next):            
    jQuery("#pag1 li").slice(1, -1).remove();
    jQuery("#pag2 li").slice(1, -1).remove();
    getPageList(totalPages, currentPage, paginationSize).forEach(item => {

      var el=jQuery("<li>").addClass("page-item")
        .addClass(item ? "current-page" : "disabled more")
        .toggleClass("active", item === currentPage)
        .append(jQuery("<a href='#'>").addClass("page-link").text(item || "..."));

      el.insertBefore( jQuery('.next-page') )
    });
    // Disable prev/next when at first/last page:
    jQuery("#previous-page").toggleClass("disabled back", currentPage === 1);
    jQuery("#next-page").toggleClass("disabled next", currentPage === totalPages);
    return true;
  }

  // Include the prev/next buttons:
  jQuery(".pagination").append(
    jQuery("<li>").addClass("page-item back previous-page").attr({
      id: "previous-page"
    }).append(
      jQuery("<a href='#'>").addClass("page-link").text("<")
    ),
    jQuery("<li>").addClass("page-item next next-page").attr({
      id: "next-page"
    }).append(
      jQuery("<a href='#'>").addClass("page-link").text(">")
    )
  );
  // Show the page links
  showPage(1);

  // Use event delegation, as these items are recreated later    
  jQuery(document).on("click", ".pagination li.current-page:not(.active)", function() {
    return showPage(+jQuery(this).text());
  });

  jQuery("#next-page").on("click", function() {
    return showPage(currentPage + 5);
  });

  jQuery("#previous-page").on("click", function() {
    return showPage(currentPage - 5);
  });

  var ellipsisNext = function() {
    jQuery('li#next-page').prev().prev().on("click", function() {
      if (jQuery('li#next-page').prev().prev().text() == "...") {
        return showPage(currentPage + 5);
      }
    });
  }
  var ellipsisBack = function() {
    jQuery("li#previous-page").next().next().on("click", function() {
      if (jQuery('li#previous-page').next().next().text() == "...") {
        return showPage(currentPage - 5);
      }
    });
  }
  jQuery('').click(function() {
    ellipsisNext();
    ellipsisBack();
  })

});

＆＃13;

＆＃13;

＆＃13;