CODEWITHSUNDEEP
javascriptjqueryhtmlcss
d.s
d.s

Reputation: 33

Pagination with next, previous, last, and first button

I'm a beginner in jQuery and I tried to make a pagination with next, previous, first, and last button, but I cannot.

This is my code:

pageSize = 8;

var pageCount = $(".group").length / pageSize;

for(var i = 0 ; i<pageCount;i++){   
  $("#pagin").append('<li><a href="#">'+(i+1)+'</a></li> ');
}

$("#pagin li").first().find("a").addClass("current")

showPage = function(page) {
  $(".group").hide();
  $(".group").each(function(n) {
    if (n >= pageSize * (page - 1) && n < pageSize * page)
      $(this).show();
  });        
}

showPage(1);

$("#pagin li a").click(function() {
  $("#pagin li a").removeClass("current");
  $(this).addClass("current");
  showPage(parseInt($(this).text())) 
});

Upvotes: 0

Views: 3123

Answers (1)

offwhite
offwhite

Reputation: 552

It's not very clear what you're looking for, but I'm guessing you want next/previous links in your pagination links.

First is very simple - just link to the page with index 0:

$("#pagin").append('<li><a href="#" class="hidden" data-index="0">first</a></li>');

likewise last is just a link to the page count:

$("#pagin").append('<li><a href="#" class="hidden" data-index="'+pageCount+'">last</a></li>');

prev/next pages will need you to store what the current page is:

https://jsfiddle.net/cfqx3ba6/

Upvotes: 1

Related Questions