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