使用 jquery 在 div 上创建分页？

Question

使用 jquery 在 div 上创建分页？

大家好，我在这里使用 jquery 在 div 上进行分页，我正在编写这段代码，我的分页工作得很好。但是这里在我的静态文本中是 40 行，所以在分页中看到 1 2 3 4 5 等等。像这样。所以我想改变我的分页代码，我想这个分页是我们的代码。1 2 3 4 next last 和第一次不显示previous 然后我点击2 page no 然后也显示previous 2 3 4 next last。任何人都知道怎么做，请帮助我。

在这里，我正在我的帖子中添加片段。

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

Run Code Online (Sandbox Code Playgroud)

.current {
  color: green;
}

#pagin li {
  display: inline-block;
}

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

P. *_*ank 6

我必须让你的UL LI列表中添加分组，接下来，第一个和最后一个按钮。我创建了多个函数：

一张幻灯片内容
一个用于分页菜单。

您可以使用divelement 来创建您的下一个上一个按钮，它更易于管理。

更新

只需一个功能。

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，4 月前
查看次数：	9522 次
最近记录：	6 年，5 月前