如何实现单页结果（含筛选后）时隐藏JS分页导航？附代码

需求：使用JavaScript对数据集做分页操作，同时支持标签筛选，当全部结果或筛选后的结果仅为一页时，隐藏分页导航。

原代码 #

var itemsNumber = 8,
  $items,
  pages = 1,
  current = 1;
function makePages() {
  $items = $(".filtered-div:visible");
  pages = Math.ceil($items.length / itemsNumber);
  $("#pages").empty();
  for (var p = 1; p <= pages; p++) {
    $("#pages").append($('<a href="#">' + p + "</a>"));
  }
  showPage(1);
}
function showPage(page) {
  
  $items
    .hide()
    .slice((page - 1) * itemsNumber, page * itemsNumber)
    .show();
  current = page;
  $("div.ctrl-nav a").show();
  if (current == 1) {
    $("div.ctrl-nav a:first").hide();
  } else if (current == pages) {
    $("div.ctrl-nav a:last").hide();
  }
  $("div.ctrl-nav a.active").removeClass("active");
  $("#pages a")
    .eq(current - 1)
    .addClass("active");
}
makePages();

$("div.ctrl-nav").on("click", "a", function () {
  var action = $(this).html();
  if (action == '&lt;i class="fas fa-angle-left" aria-hidden="true"&gt;&lt;/i&gt;') {
    current--;
  } else if (
    action == '&lt;i class="fas fa-angle-right" aria-hidden="true"&gt;&lt;/i&gt;'
  ) {
    current++;
  } else if (+action > 0) {
    current = +action;
  }
  if (current <= 1) {
    current = 1;
  } else if (current >= pages) {
    current = pages;
  }
  showPage(current);
});

var $myitems = $(".filtered-div");
$(".btn-container").on("click", ".btn", function () {
  var value = $(this).data("filter");
  if (value == "all") {
    $myitems.show();
  } else {
    var $selected = $myitems
      .filter(function () {
        return $(this).data("tag").indexOf(value) != -1;
      })
      .show();
    $myitems.not($selected).hide();
  }
  $(this).addClass("active").siblings().removeClass("active");
  makePages();
});

修改后的代码 #

var itemsNumber = 8,
  $items,
  pages = 1,
  current = 1;
// 提前获取分页导航容器，减少重复DOM查询
var $ctrlNav = $("div.ctrl-nav");

function makePages() {
  $items = $(".filtered-div:visible");
  pages = Math.ceil($items.length / itemsNumber);
  $("#pages").empty();
  
  // 判断是否需要显示分页导航
  if (pages > 1) {
    // 仅当页数大于1时生成页码按钮
    for (var p = 1; p <= pages; p++) {
      $("#pages").append($('<a href="#">' + p + "</a>"));
    }
    $ctrlNav.show();
  } else {
    // 只有一页时隐藏导航，直接显示所有项目
    $ctrlNav.hide();
    $items.show();
    return;
  }
  
  showPage(1);
}

function showPage(page) {
  $items
    .hide()
    .slice((page - 1) * itemsNumber, page * itemsNumber)
    .show();
  current = page;
  
  $("div.ctrl-nav a").show();
  if (current == 1) {
    $("div.ctrl-nav a:first").hide();
  } else if (current == pages) {
    $("div.ctrl-nav a:last").hide();
  }
  
  $("div.ctrl-nav a.active").removeClass("active");
  $("#pages a")
    .eq(current - 1)
    .addClass("active");
}

makePages();

$("div.ctrl-nav").on("click", "a", function () {
  var action = $(this).html();
  if (action == '&lt;i class="fas fa-angle-left" aria-hidden="true"&gt;&lt;/i&gt;') {
    current--;
  } else if (
    action == '&lt;i class="fas fa-angle-right" aria-hidden="true"&gt;&lt;/i&gt;'
  ) {
    current++;
  } else if (+action > 0) {
    current = +action;
  }
  
  if (current <= 1) {
    current = 1;
  } else if (current >= pages) {
    current = pages;
  }
  
  showPage(current);
});

var $myitems = $(".filtered-div");
$(".btn-container").on("click", ".btn", function () {
  var value = $(this).data("filter");
  if (value == "all") {
    $myitems.show();
  } else {
    var $selected = $myitems
      .filter(function () {
        return $(this).data("tag").indexOf(value) != -1;
      })
      .show();
    $myitems.not($selected).hide();
  }
  
  $(this).addClass("active").siblings().removeClass("active");
  makePages();
});

修改说明 #

1. 新增导航容器变量，提前获取$ctrlNav，避免重复查询DOM元素
2. 在makePages函数中添加分页显示判断：
   • 计算页数后，仅当pages > 1时才生成页码按钮并显示导航
   • 若页数≤1，直接隐藏导航容器，显示所有项目并提前返回，跳过后续分页逻辑
3. 保留原有分页交互和筛选功能，仅新增导航的隐藏/显示控制逻辑

内容的提问来源于stack exchange，提问作者Sofia Lazrak