Create Pagination on div using jquery?

Question

Hello every one i have here going for the pagination on div using jquery and i am write this code and my pagination is work very well. but here in my static text is 40 line so in the pagination is so long see up to 1 2 3 4 5 etc.. like this. so i want to need the change my pagination code and i want to like this pagination is our code. 1 2 3 4 next last and first time don't show previous then i am click on 2 page no then also show previous 2 3 4 next last. any one know how can do that please help me.

here i am working snippet add in my post.

//Pagination
	pageSize = 4;

	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>
<div class="line-content">13 I have some content</div>
<div class="line-content">14 I have some content</div>
<div class="line-content">15 I have some content</div>
<div class="line-content">16 I have some content</div>
<div class="line-content">17 I have some content</div>
<div class="line-content">18 I have some content</div>
<div class="line-content">19 I have some content</div>
<div class="line-content">20 I have some content</div>
<div class="line-content">21 I have some content</div>
<div class="line-content">22 I have some content</div>
<div class="line-content">23 I have some content</div>
<div class="line-content">24 I have some content</div>
<div class="line-content">25 I have some content</div>
<div class="line-content">26 I have some content</div>
<div class="line-content">27 I have some content</div>
<div class="line-content">28 I have some content</div>
<div class="line-content">29 I have some content</div>
<div class="line-content">30 I have some content</div>
<div class="line-content">31 I have some content</div>
<div class="line-content">32 I have some content</div>
<div class="line-content">33 I have some content</div>
<div class="line-content">34 I have some content</div>
<div class="line-content">35 I have some content</div>
<div class="line-content">36 I have some content</div>
<div class="line-content">37 I have some content</div>
<div class="line-content">38 I have some content</div>
<div class="line-content">39 I have some content</div>
<div class="line-content">10 I have some content</div>

<ul class="prev">prev</ul>
<ul id="pagin"></ul>
<ul class="next">next</ul>
<ul class="last">last</ul>

Solution

I have keep your UL LI list for add prev, next, first and last button. I have create multiple function:

• One for the slide show content
• One for the pagination menu.

You can use div element for create your next prev button, it's more easy to manage.

UPDATE

Just with one function.

//Pagination
pageSize = 4;
incremSlide = 5;
startPage = 0;
numberPage = 0;

var pageCount =  $(".line-content").length / pageSize;
var totalSlidepPage = Math.floor(pageCount / incremSlide);
    
for(var i = 0 ; i<pageCount;i++){
    $("#pagin").append('<li><a href="#">'+(i+1)+'</a></li> ');
    if(i>pageSize){
       $("#pagin li").eq(i).hide();
    }
}

var prev = $("<li/>").addClass("prev").html("Prev").click(function(){
   startPage-=5;
   incremSlide-=5;
   numberPage--;
   slide();
});

prev.hide();

var next = $("<li/>").addClass("next").html("Next").click(function(){
   startPage+=5;
   incremSlide+=5;
   numberPage++;
   slide();
});

$("#pagin").prepend(prev).append(next);

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

slide = function(sens){
   $("#pagin li").hide();
   
   for(t=startPage;t<incremSlide;t++){
     $("#pagin li").eq(t+1).show();
   }
   if(startPage == 0){
     next.show();
     prev.hide();
   }else if(numberPage == totalSlidepPage ){
     next.hide();
     prev.show();
   }else{
     next.show();
     prev.show();
   }
   
    
}

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").eq(0).addClass("current");

$("#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;
}

.prev {
  cursor: pointer;
}

.next {
  cursor: pointer;
}

.last{
  cursor:pointer;
  margin-left:5px;
}

.first{
  cursor:pointer;
  margin-right:5px;
}

<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>
<div class="line-content">13 I have some content</div>
<div class="line-content">14 I have some content</div>
<div class="line-content">15 I have some content</div>
<div class="line-content">16 I have some content</div>
<div class="line-content">17 I have some content</div>
<div class="line-content">18 I have some content</div>
<div class="line-content">19 I have some content</div>
<div class="line-content">20 I have some content</div>
<div class="line-content">21 I have some content</div>
<div class="line-content">22 I have some content</div>
<div class="line-content">23 I have some content</div>
<div class="line-content">24 I have some content</div>
<div class="line-content">25 I have some content</div>
<div class="line-content">26 I have some content</div>
<div class="line-content">27 I have some content</div>
<div class="line-content">28 I have some content</div>
<div class="line-content">29 I have some content</div>
<div class="line-content">30 I have some content</div>
<div class="line-content">31 I have some content</div>
<div class="line-content">32 I have some content</div>
<div class="line-content">33 I have some content</div>
<div class="line-content">34 I have some content</div>
<div class="line-content">35 I have some content</div>
<div class="line-content">36 I have some content</div>
<div class="line-content">37 I have some content</div>
<div class="line-content">38 I have some content</div>
<div class="line-content">39 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">11 I have some content</div>
<div class="line-content">11 I have some content</div>
<div class="line-content">11 I have some content</div>
<ul id="pagin">
         
</ul>

Comments

[Admin]

this might be helpful stackoverflow.com/q/3590213/7813528

[coderwill]

@Lee92 with your link just shoe pre, next button he not show pagination number also i want to number also have you idea how can do that with my code then please let me know.

[coderwill]

what is the problem in this post so why any one give the minus point??what is the issue in this post let me know

[coderwill]

any one know how can do that like this pagination then please let me know.

[coderwill]

Hi your solution it's 100% good and correct but i want to some change i am click on Next button then also change with my text contain so i want to just change my number and then after i am click on number then i need show this text so any idea how can do that. please let me know.

[coderwill]

Hi can you please give me some hint please

[P. Frank]

Sorry but i not understand what you want exactly. Please give me a schema picture or an other way for i can check exactly what you want.

[coderwill]

i want to "tools.knowledgewalls.com/realtimejqueryeditor/…" on this link same as a pagination need with this code so it's possible or not

[P. Frank]

Ok i see! let me a few minutes for change the answer.

[coderwill]

can you please help me how can do that with this code see my pagination like this 1 2 3 4 next i am click on next then 5 6 7 8 next then after i am click on 8 no then my data is come i need this

[coderwill]

are you done with edit please give me one comment here so i can understand

[coderwill]

hello can you give me some reply?

[P. Frank]

Ok normaly is fine. :-)

[coderwill]

hello can you please help me one on html?