如何通过jQuery对html元素进行分页

How to paging html elements by jQuery

本文关键字：分页 元素 html 何通过 jQuery      更新时间：2023-09-26

我有这样的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 对这些元素进行分页，在脚本中我可以修改每页的元素数量，例如： num_per_page = 4，第 1 页将显示box 1到box 4，第 2 页将显示box 5到box 8。

尝试使用 .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>

你可以做到，

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

小提琴演示

这将创建页面以及页面索引

相关文章：