Question

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

＆＃13;

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

＆＃13;

.current {
  color: green;
}

#pagin li {
  display: inline-block;
}

＆＃13;

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

＆＃13;

代码将为每8 <li><a href></a></li>创建<Div>标记，就像分页样式一样。现在这是我的问题。只要满足我不希望发生的条件，此代码将创建如此多的<li><a href></a></li>。我关心的是这个。如何创建一个看起来像这样的页面？

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

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

TYSM未来的帮助

Answer 1

我不确定这是你的意思，但看看这个：
（工作小提琴：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);

使用＆lt;＆lt;进行分页＆GT;＆GT;和Prev和Last并停止无限分页

1 个答案: