javascript - 使用 << >> 和 Prev 和 Last 进行分页并停止无限分页

Question

此代码的输出是为每 8 个 div 创建一个页面。

pageSize = 8;

showPage = function(page) {
  $('.line-content').hide();
  $('.line-content:gt('+((page-1)*pageSize)+'):lt('+(page)*(pageSize-1)+')').show();
   $('.line-content:eq('+((page-1)*pageSize)+')').show();
}

var pgs = Math.ceil($('.line-content').length/pageSize);
var pgnt = '';
  for(var i=1;i<=pgs;i++){
	pgnt += '<li><a href="#">'+i+'</a></li>';
}
$('#pagin').html(pgnt);
$("#pagin li a").click(function() {
  $("#pagin li a").removeClass("current");
	$(this).addClass("current");
	showPage(parseInt($(this).text())) 
});
showPage(1);

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

<ul id="pagin"></ul>

代码将创建<li><a href></a></li>每 8 个标记 <Div>像分页风格。现在这是我的问题。此代码将创建这么多 <li><a href></a></li>只要它满足我不想发生的条件。我关心的是这个。我怎样才能制作一个看起来像这样的页面？

<< Prev 1 2 3 4 5 6 7 8 Next >>

我只是想创建至少 8 个容器来替换我达到 8 个以上的页面，如果它小于 1，则调整其页数。然后添加一些 Prev和 Next和 << >>

future 帮助的 TYSM

Answer 1

我不确定这是否是你想要的，但看看这个:
(工作 fiddle :https://jsfiddle.net/whp1uhfo/)

pageSize = 8;
current_page = 1;


var pgs = Math.ceil($('.line-content').length/pageSize);
var pgnt = '<li><span id="prev" onclick="showPage(current_page - 1)"> &lt;&lt; Prev</span>';

showPage = function(page) {
  $('.line-content').hide();
  $('.line-content:gt('+((page-1)*pageSize)+'):lt('+(page)*(pageSize-1)+')').show();
   $('.line-content:eq('+((page-1)*pageSize)+')').show();
   current_page = page;
   // if that's the last page, hide "Next"
   if(page == pgs){
       $('#next').hide();
   }else{
         $('#next').show();
   }
   // if that's the first page, hide "Prev"
   if(page == 1){
       $('#prev').hide();
   }else{
         $('#prev').show();
   }
}

for(var i=1;i<=pgs;i++){
    pgnt += '<li><a href="#">'+i+'</a> </li> ';
}

pgnt += '<li><span id="next" onclick="showPage(current_page + 1)">Next &gt;&gt;</span>';

$('#pagin').html(pgnt);
$("#pagin li a").click(function() {
  $("#pagin li a").removeClass("current");
    $(this).addClass("current");
    showPage(parseInt($(this).text())) 
});
showPage(1);