只有一页时隐藏分页

Question

我正在使用JS对数据集进行分页。我还可以通过标签过滤我的数据集。当所有结果只有一页结果时，或者当我使用过滤器时，我想隐藏分页导航。这是JS代码：

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 == '<i class="fas fa-angle-left" aria-hidden="true"></i>') {
current--;
} else if (
action == '<i class="fas fa-angle-right" aria-hidden="true"></i>'
) {
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();
});

你可以在这个代码笔上找到我的代码

Answer 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 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);

if(pages <= 1) {
$("div.ctrl-nav").hide();
} else {
$("div.ctrl-nav").show();
}
}

Answer 2

您可以检查所选数据和itemsNumber。

如果它们相等，则隐藏分页。

参考

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();
if(itemsNumber == $selected.length) {
$("div.ctrl-nav").hide();
} // compare
$myitems.not($selected).hide();
}
$(this).addClass("active").siblings().removeClass("active");
makePages();
});