Dynamic pagination in Jquery

Question

I have this code :

//Pagination
 pageSize = 8;

 showPage = function(page) {
     $(".line-content").hide();
     $(".line-content").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())) 
 });

.current {
  color: green;
}

#pagin li {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="line-content">1 I have some content</div>
<div class="line-content">2 I have some content</div>
<div class="line-content">3 I have some content</div>
<div class="line-content">4 I have some content</div>
<div class="line-content">5 I have some content</div>
<div class="line-content">6 I have some content</div>
<div class="line-content">7 I have some content</div>
<div class="line-content">8 I have some content</div>
<div class="line-content">9 I have some content</div>
<div class="line-content">10 I have some content</div>
<div class="line-content">11 I have some content</div>
<div class="line-content">12 I have some content</div>

<ul id="pagin">
            <li><a class="current" href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
</ul>

Instead of writing numbers manually in my HTML file, I want the numbers generate automatically according to the number of divs to display.

The code I have works but there is nothing in page 3 and 4. Instead of update the numbers in my HTML file, I want them to change dynamically with Jquery

anyone know how to add prv and next button to this – Saranga Jan 27 '18 at 06:57 — Saranga, Jan 27 '18 at 06:57

semirturgay · Answer 1 · 2015-08-10T13:18:23.990

calculate page count than via a loop create links to pages.

//Pagination
 pageSize = 8;

 var pageCount =  $(".line-content").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) {
     $(".line-content").hide();
     $(".line-content").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())) 
 });

.current {
  color: green;
}

#pagin li {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="line-content">1 I have some content</div>
<div class="line-content">2 I have some content</div>
<div class="line-content">3 I have some content</div>
<div class="line-content">4 I have some content</div>
<div class="line-content">5 I have some content</div>
<div class="line-content">6 I have some content</div>
<div class="line-content">7 I have some content</div>
<div class="line-content">8 I have some content</div>
<div class="line-content">9 I have some content</div>
<div class="line-content">10 I have some content</div>
<div class="line-content">11 I have some content</div>
<div class="line-content">12 I have some content</div>

<ul id="pagin">
         
</ul>

your solution it's very easy to understand and i am also try with your solution and generate pagination. but can you please help me in my db above 4000 data is store or also more than up to so that time i want pagination like this First and in the last pagination something last so any idea how can do that — coderwill, May 30 '17 at 08:27

score 4 · Answer 2 · answered Aug 10 '15 at 13:18

You need to count the pages using Math.ceil($(".line-content").size() / pageSize), and then dynamically add <li> for each page.

I have moved the initialization code inside $() (i.e. the Ready Event).

//Pagination
pageSize = 8;

$(function() {
  var pageCount = Math.ceil($(".line-content").size() / pageSize);

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


  showPage(1);

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

})

showPage = function(page) {
  $(".line-content").hide();

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

.current {
  color: green;
}
#pagin li {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="line-content">1 I have some content</div>
<div class="line-content">2 I have some content</div>
<div class="line-content">3 I have some content</div>
<div class="line-content">4 I have some content</div>
<div class="line-content">5 I have some content</div>
<div class="line-content">6 I have some content</div>
<div class="line-content">7 I have some content</div>
<div class="line-content">8 I have some content</div>
<div class="line-content">9 I have some content</div>
<div class="line-content">10 I have some content</div>
<div class="line-content">11 I have some content</div>
<div class="line-content">12 I have some content</div>

<ul id="pagin">

</ul>

score 2 · Answer 3 · answered Aug 10 '15 at 13:13

Place this somewhere it is executed when the DOM is ready, but before the click event handlers are added.

//How many pages do we want?
elementCount = $('.line-content').size();
pageCount = Math.ceil(elementCount / pageSize);

//Add the buttons.
buttons = '';
for(i=1; i<=pageCount; i++) {
    buttons += '<li><a href="#">' + i + '</a></li>');
}
$('#pagin').html(buttons);

Then you can just leave #pagin empty and the JavaScript will fill it for you:

<ul id="pagin">
</ul>

Disclaimar: I haven't tested this code.

joyBlanks · Answer 4 · 2015-08-10T15:19:59.800

//Pagination
pageSize = 8;

showPage = function(page) {
  $('.line-content').hide();
  $('.line-content:gt('+((page-1)*pageSize)+'):lt('+(page)*(pageSize-1)+')').show();
   $('.line-content:eq('+((page-1)*pageSize)+')').show();
}

var pgs = Math.ceil($('.line-content').length/pageSize);
var pgnt = '';
  for(var i=1;i<=pgs;i++){
 pgnt += '<li><a href="#">'+i+'</a></li>';
}
$('#pagin').html(pgnt);
$("#pagin li a").click(function() {
 
  $("#pagin li a").removeClass("current");
 $(this).addClass("current");
 showPage(parseInt($(this).text())) 
});
showPage(1);

.current {
  color: green;
}

#pagin li {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="line-content">1 I have some content</div>
<div class="line-content">2 I have some content</div>
<div class="line-content">3 I have some content</div>
<div class="line-content">4 I have some content</div>
<div class="line-content">5 I have some content</div>
<div class="line-content">6 I have some content</div>
<div class="line-content">7 I have some content</div>
<div class="line-content">8 I have some content</div>
<div class="line-content">9 I have some content</div>
<div class="line-content">10 I have some content</div>
<div class="line-content">11 I have some content</div>
<div class="line-content">12 I have some content</div>

<ul id="pagin">

</ul>

This is inline to what you needed.

score 1 · Answer 5 · answered Jan 05 '18 at 11:35

//Pagination
 pageSize = 8;

 var pageCount =  $(".line-content").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) {
     $(".line-content").hide();
     $(".line-content").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())) 
 });

.current {
  color: green;
}

#pagin li {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="line-content">1 I have some content</div>
<div class="line-content">2 I have some content</div>
<div class="line-content">3 I have some content</div>
<div class="line-content">4 I have some content</div>
<div class="line-content">5 I have some content</div>
<div class="line-content">6 I have some content</div>
<div class="line-content">7 I have some content</div>
<div class="line-content">8 I have some content</div>
<div class="line-content">9 I have some content</div>
<div class="line-content">10 I have some content</div>
<div class="line-content">11 I have some content</div>
<div class="line-content">12 I have some content</div>

<ul id="pagin">
         
</ul>

You should include some comment on what you have added to your solution. — alistaircol, Jan 05 '18 at 11:56

score 0 · Answer 6 · answered May 12 '18 at 06:01

you can use these code for pagination if you will have wanted appending to tag in html .

var paginationfooter = {};
paginationfooter.Pager = function() {
    this.currentPage = 1;
    this.pagingnumber = "#pagingnum";
    this.tagg = "#matn";
    
    this.numPages = function() {
        var numPages = 0;
        if (this.paragraphs != null && this.limit != null) {
            numPages = Math.ceil(this.paragraphs.length / this.limit);
        }
     
        return numPages;
    };
    
    this.showPage = function(page) {
        this.currentPage = page;
        var html = "";
        for (var i = (page-1)*this.limit; i < ((page-1)*this.limit) + this.limit; i++) {
            if (i < this.paragraphs.length) {
                var disply = this.paragraphs.get(i);
                html += "<" + disply.tagName + ">" + disply.innerHTML + "</" + disply.tagName + ">";
            }
        }
        
        $(this.tagg).html(html);
        
        pagenuming(this.pagingnumber, this.currentPage, this.numPages());
    }
    
    var pagenuming = function(container, currentPage, numPages) {
  var paging = $("<div class='pagination'></div>");
  
        var gridpaging = "<ul>";
        for (var i = 1; i <= numPages; i++) {
            if (i != currentPage) {
                 gridpaging += "<li><a href='#' onclick='pager.showPage(" + i + "); return false;'>" + i + "</a></li>";
            } else {
                gridpaging += "<li>" + i + "</li>";
            }
        }

        gridpaging += "</ul>";
  

 paging.append(gridpaging);
    $(container).html(paging);
    }

}
//---------------------------here input values
var pager = new paginationfooter.Pager();
$(document).ready(function() {
 pager.limit = 5; 
 pager.pagingtag = $('#matn'); 
 pager.paragraphs = $('p', pager.pagingtag); 
 pager.showPage(1);
});

score 0 · Answer 7 · answered Jan 24 '19 at 09:33

pageSize = 5;

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

for(var i = 0 ; i<pageCount;i++){
    $("#pagin").append('<li><a href="#">'+(i+1)+'</a></li> ');
}
$("#pagin li").first().addClass("active")
showPage = function(page) {
    $(".setPagination").hide();
    $(".setPagination").each(function(n) {
        if (n >= pageSize * (page - 1) && n < pageSize * page)
            $(this).show();
    });        
}
showPage(1);

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

}

Can you give some explanation please. – executable Jan 24 '19 at 09:53 — executable, Jan 24 '19 at 09:53

Dynamic pagination in Jquery

7 Answers7

Linked