使用jquery在div上创建分页？

Question

你好我每个人都在这里使用jQuery的div分页，我写这段代码，我的分页工作非常好。但这里在我的静态文本是40行，所以在分页是很长的，看到1 2 3 4 5等等..这样。所以我想要改变我的分页代码，我想要这样的分页是我们的代码。 1 2 3 4下一个最后和第一次不显示以前然后我点击2页没有，然后也显示前2 3 4下一个最后。 任何人都知道该怎么做，请帮助我。

这里我工作片段添加在我的文章。

//Pagination 
 
\t pageSize = 4; 
 

 
\t 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) { 
 
\t  $(".line-content").hide(); 
 
\t  $(".line-content").each(function(n) { 
 
\t   if (n >= pageSize * (page - 1) && n < pageSize * page) 
 
\t    $(this).show(); 
 
\t  });   
 
\t } 
 
    
 
\t showPage(1); 
 

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

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

Answer 1

我必须让你的ULLI列表添加上一页，下一个，第一和最后按钮。我已创建多个功能：

• 一个幻灯片显示内容
• 一个用于分页菜单。

您可以使用div元素创建下一个先前按钮，它更易于管理。

UPDATE

只是一个功能。

//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) { 
 
\t $(".line-content").hide(); 
 
\t $(".line-content").each(function(n) { 
 
\t  if (n >= pageSize * (page - 1) && n < pageSize * page) 
 
\t   $(this).show(); 
 
\t });   
 
} 
 
    
 
showPage(1); 
 
$("#pagin li a").eq(0).addClass("current"); 
 

 
$("#pagin li a").click(function() { 
 
\t $("#pagin li a").removeClass("current"); 
 
\t $(this).addClass("current"); 
 
\t 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>