Как пейджинговой HTML элементы с помощью JQuery

Question

У меня есть HTML элементы, как это:

<div class="content"> 
    <div class="box">Box 1</div> 
    <div class="box">Box 2</div> 
    <div class="box">Box 3</div> 
    <div class="box">Box 4</div> 
    <div class="box">Box 5</div> 
    <div class="box">Box 6</div> 
    <div class="box">Box 7</div> 
    <div class="box">Box 8</div> 
</div> 

Я хочу использовать JQuery, чтобы сделать нумерацию страниц для этих элементов и в сценарии я могу изменить количество элементов на странице, для пример: , а затем страница 1 покажет box 1 по номеру box 4 и страница 2 покажет box 5 по номеру box 8.

Answer 1

Вы можете сделать,

var noOfBoxesPerPage = 3; 
var totalPages = Math.ceil($(".content .box").length/noOfBoxesPerPage); 
$(".content .box").hide(); 
$(".content .box:lt(" + noOfBoxesPerPage + ")").show(); 
for (i = 1; i <= totalPages; i++) { 
    $("#page").append("<span>" + i + "</span>"); 
} 
$("#page").on("click", "span", function() { 
    $(".content .box").show(); 
    var ltCount = ($(this).index()) * noOfBoxesPerPage; 
    var gtCount = ($(this).index() + 1) * noOfBoxesPerPage; 
    $(".content .box:lt(" + ltCount + ")").hide(); 
    $(".content .box:gt(" + (gtCount - 1) + ")").hide(); 
}); 

Fiddle demo

Это создаст страниц, а также страницы индексов

Answer 2

Попробуйте использовать .slice()

var num_per_page = 4; 
 
//then page 1 will show box 1 to box 4 
 
// note, `.slice()` uses a 0-based index, 
 
// element at index `3` would be fourth from 0 
 
$(".content .box").slice(0, num_per_page -1).show() 
 
// and page 2 will show box 5 to box 8. 
 
.end().slice(num_per_page).hide()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<div class="content"> 
 
    <div class="box">Box 1</div> 
 
    <div class="box">Box 2</div> 
 
    <div class="box">Box 3</div> 
 
    <div class="box">Box 4</div> 
 
    <div class="box">Box 5</div> 
 
    <div class="box">Box 6</div> 
 
    <div class="box">Box 7</div> 
 
    <div class="box">Box 8</div> 
 
</div>