Пагинация элементов

241

23 января 2018, 11:09

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="block"> 
  <ul> 
    <li class="element">Я элемент 1 (страница1)</li> 
    <li class="element">Я элемент 2 (страница1)</li> 
    <li class="element">Я элемент 3 (страница1)</li> 
  </ul> 
</div> <!-- эти элементы после перехода на вторую страницу скрываем, и показываем после перехода обратно на первую --> 
 
<div class="block pagination"> 
  <ul> 
    <li class="element">Я элемент 1 (страница1)</li> 
    <li class="element">Я элемент 2 (страница1)</li> 
    <li class="element">Я элемент 3 (страница1)</li>  
    <li class="element">Я элемент 4 (страница2)</li> <!--переход на новую страницу --> 
    <li class="element">Я элемент 5 (страница2)</li> 
    <li class="element">Я элемент 6 (страница2)</li> 
    <li class="element">Я элемент 7 (страница2)</li> 
    <li class="element">Я элемент 8 (страница2)</li> 
    <li class="element">Я элемент 9 (страница3)</li> 
    <li class="element">Я элемент 10 (страница3)</li> 
  </ul> 
</div> 
 
<div class="buttons"> 
  <button type="submit">Предыдущая страница</button> 
  <button type="submit">Следующая страница</button> 
</div>

Есть 2 блока, первый должен показываться только на первой странице, а второй уже подстраиваться под пагинацию, в разметке все расписал, первая страница состоит из 3 элементов, а последующие из 6 элементов.

Первый блок должен быть виден только на первой странице. Надеюсь достаточно подробно и понятливо объяснил.

Answer 1

Если вам требуется настроить отображение этих элементов в зависимости от номера страницы на jquery, то посмотрите на код ниже. в противном случае мне не совсем ясна суть задачи.

var page = 1; 
    totalPages = 3; 
 
$(function(){ 
    updatePages(); 
}); 
 
$("#next, #prev").click(function(){ 
     
    var bId = $(this).attr('id'); 
    bId == "next" ? page++ : page--; 
    if(page < 1) page = 1; 
    if(page > totalPages) page = totalPages;    
     
    updatePages(); 
}); 
 
function updatePages(){    
   $(".pagination li.element") 
      .removeClass('current') 
      .filter("[data-page=" + page+"]") 
          .addClass('current'); 
           
   $("#first-page").toggle(page == 1); 
       
}

li.element { display: none; } 
li.element.current {display: block; } 
 
 
#first-page { background-color: #eee; } 
#first-page .element { display: block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="block" id="first-page"> 
  <ul> 
    <li class="element">Я элемент 1 (страница1)</li> 
    <li class="element">Я элемент 2 (страница1)</li> 
    <li class="element">Я элемент 3 (страница1)</li> 
  </ul> 
</div> <!-- эти элементы после перехода на вторую страницу скрываем, и показываем после перехода обратно на первую --> 
 
<div class="block pagination"> 
  <ul> 
    <li class="element" data-page="1">Я элемент 1 (страница1)</li> 
    <li class="element" data-page="1">Я элемент 2 (страница1)</li> 
    <li class="element" data-page="1">Я элемент 3 (страница1)</li>  
    <li class="element" data-page="2">Я элемент 4 (страница2)</li> <!--переход на новую страницу --> 
    <li class="element" data-page="2">Я элемент 5 (страница2)</li> 
    <li class="element" data-page="2">Я элемент 6 (страница2)</li> 
    <li class="element" data-page="2">Я элемент 7 (страница2)</li> 
    <li class="element" data-page="2">Я элемент 8 (страница2)</li> 
    <li class="element" data-page="3">Я элемент 9 (страница3)</li> 
    <li class="element" data-page="3">Я элемент 10 (страница3)</li> 
  </ul> 
</div> 
 
<div class="buttons"> 
  <button id="prev">Предыдущая страница</button> 
  <button id="next">Следующая страница</button> 
</div>

дополнение

Если следовать правилу, что на первой странице 3 элемента, а на остальных по 6, то в целом data-page атрибут, конечно, не нужен (я бы его правда все равно сделал, т.к. это куда удобнее и функциональнее). Решение может быт таким:

var page = 1; 
    totalPages = 3; 
 
$(function(){ 
    updatePages(); 
}); 
 
$("#next, #prev").click(function(){ 
     
    var bId = $(this).attr('id'); 
    bId == "next" ? page++ : page--; 
    if(page < 1) page = 1; 
    if(page > totalPages) page = totalPages;    
     
    updatePages(); 
}); 
 
function updatePages(){    
   var offset = -3 + (page-1)*6;  
   $(".pagination li.element") 
      .removeClass('current') 
      .slice(offset < 0 ? 0 : offset, offset + 6) 
          .addClass('current'); 
           
   $("#first-page").toggle(page == 1); 
       
}

li.element { display: none; } 
li.element.current {display: block; } 
 
 
#first-page { background-color: #eee; } 
#first-page .element { display: block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="block" id="first-page"> 
  <ul> 
    <li class="element">Я элемент 1 (страница1)</li> 
    <li class="element">Я элемент 2 (страница1)</li> 
    <li class="element">Я элемент 3 (страница1)</li> 
  </ul> 
</div> <!-- эти элементы после перехода на вторую страницу скрываем, и показываем после перехода обратно на первую --> 
 
<div class="block pagination"> 
  <ul> 
    <li class="element" >Я элемент 1 (страница1)</li> 
    <li class="element">Я элемент 2 (страница1)</li> 
    <li class="element" >Я элемент 3 (страница1)</li>  
    <li class="element" >Я элемент 4 (страница2)</li> <!--переход на новую страницу --> 
    <li class="element" >Я элемент 5 (страница2)</li> 
    <li class="element" >Я элемент 6 (страница2)</li> 
    <li class="element" >Я элемент 7 (страница2)</li> 
    <li class="element" >Я элемент 8 (страница2)</li> 
    <li class="element" >Я элемент 9 (страница2)</li> 
    <li class="element" >Я элемент 10 (страница3)</li> 
    <li class="element" >Я элемент 11 (страница3)</li> 
  </ul> 
</div> 
 
<div class="buttons"> 
  <button id="prev">Предыдущая страница</button> 
  <button id="next">Следующая страница</button> 
</div>