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'+(i+1)+' ');
     }
        $("#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;
}


1 I have some content
2 I have some content
3 I have some content
4 I have some content
5 I have some content
6 I have some content
7 I have some content
8 I have some content
9 I have some content
10 I have some content
11 I have some content
12 I have some content
13 I have some content
14 I have some content
15 I have some content
16 I have some content
17 I have some content
18 I have some content
19 I have some content
20 I have some content
21 I have some content
22 I have some content
23 I have some content
24 I have some content
25 I have some content
26 I have some content
27 I have some content
28 I have some content
29 I have some content
30 I have some content
31 I have some content
32 I have some content
33 I have some content
34 I have some content
35 I have some content
36 I have some content
37 I have some content
38 I have some content
39 I have some content
10 I have some content

prev

next
last

P. Frank · Accepted Answer

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'+(i+1)+' ');
    if(i>pageSize){
       $("#pagin li").eq(i).hide();
    }
}

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

prev.hide();

var next = $("").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= 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;
}


1 I have some content
2 I have some content
3 I have some content
4 I have some content
5 I have some content
6 I have some content
7 I have some content
8 I have some content
9 I have some content
10 I have some content
11 I have some content
12 I have some content
13 I have some content
14 I have some content
15 I have some content
16 I have some content
17 I have some content
18 I have some content
19 I have some content
20 I have some content
21 I have some content
22 I have some content
23 I have some content
24 I have some content
25 I have some content
26 I have some content
27 I have some content
28 I have some content
29 I have some content
30 I have some content
31 I have some content
32 I have some content
33 I have some content
34 I have some content
35 I have some content
36 I have some content
37 I have some content
38 I have some content
39 I have some content
10 I have some content
11 I have some content
11 I have some content
11 I have some content
11 I have some content

Create Pagination on div using jquery?

Answers (1)

Related Questions