Hide pagination when one page only-CodePudding

I am using JS to paginate a data set. I also have the possibility to filter my dataset through tags. I want to hide the pagination navigation when I only have one page of results either for all results or when I use the filter. Here is the JS code:

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

You can find my code at this codepen

CodePudding user response：

As you already have a variable which stores the pages just ask it how many pages you have and hide the nav.

Before

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

After

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();
  }
}

CodePudding user response：

You can check the selected data and itemsNumber.

If they are equal then hiden pagniation.

Refer

 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();
});