1. Python技术站首页
  2. 其他
  3. JavaScript

js分页显示div的内容

• JavaScript

下面是我的分页显示div内容的攻略：

什么是分页显示div的内容

分页显示div的内容是指在一个较大的div中，将内容进行分页，并且通过一些交互方式，可以实现翻页、跳页等操作，从而更好地展示数据。

分页显示div的实现

分页显示div的实现可以通过JavaScript代码来实现，其中包含以下几个步骤：

计算分页

首先需要计算数据的分页情况，这可以通过获取数据总量以及每页显示数量来计算。具体的计算公式为：

// 计算总页数
var totalPage = Math.ceil(totalCount / pageSize);

// 计算当前页的数据展示范围
var fromIndex = (currentPage - 1) * pageSize;
var toIndex = currentPage * pageSize - 1;

动态生成分页相关的HTML元素

根据计算出来的分页情况，需要动态生成分页相关的HTML元素，包括页码、上一页、下一页等元素。

// 生成页码元素
for (var i = 1; i <= totalPage; i++) {
   var $li = $("<li></li>").addClass("page-item").appendTo($ul);
   var $link = $("<a></a>").addClass("page-link").attr("href", "javascript:void(0);").appendTo($li).text(i);
   if (i == currentPage) {
      $li.addClass("active");
   }
}

// 生成上一页和下一页元素
var $prev = $("<li></li>").addClass("page-item").appendTo($ul);
$("<a></a>").addClass("page-link").attr("href", "javascript:void(0);").text("上一页").appendTo($prev);
if (currentPage == 1) {
   $prev.addClass("disabled");
}
var $next = $("<li></li>").addClass("page-item").appendTo($ul);
$("<a></a>").addClass("page-link").attr("href", "javascript:void(0);").text("下一页").appendTo($next);
if (currentPage == totalPage) {
   $next.addClass("disabled");
}

绑定分页事件

生成分页相关的HTML元素后，需要绑定相应的事件来处理翻页、跳页等操作。

// 点击页码跳转到对应的页码
$ul.on("click", ".page-link", function() {
   var page = $(this).text();
   if (page == currentPage) {
      return;
   }
   currentPage = page;
   loadData();
});

// 点击上一页跳转到上一页
$ul.on("click", ".page-prev", function() {
   if (currentPage == 1) {
      return;
   }
   currentPage--;
   loadData();
});

// 点击下一页跳转到下一页
$ul.on("click", ".page-next", function() {
   if (currentPage == totalPage) {
      return;
   }
   currentPage++;
   loadData();
});

// 跳转到指定页码
$(".btn-goto").on("click", function() {
   var page = parseInt($(".input-page").val());
   if (isNaN(page) || page < 1 || page > totalPage) {
      alert("请输入正确的页码");
      return;
   }
   currentPage = page;
   loadData();
});

加载数据

最后需要根据当前页的数据展示范围，动态生成数据展示的HTML。

// 获取需要展示的数据
var data = getData(fromIndex, toIndex);

// 生成HTML
var $content = $("<div></div>");
$.each(data, function() {
   var $item = $("<div></div>").addClass("item").appendTo($content);
   $("<h3></h3>").text(this.title).appendTo($item);
   $("<p></p>").text(this.content).appendTo($item);
});

// 将HTML插入到页面中
$(".data-list").empty().append($content);

示例说明

示例1

假设有一个div，用来展示一些新闻信息。为了更好地展示和浏览这些新闻，我们需要将它们进行分页，并且提供翻页和跳页等操作。

首先需要计算出新闻总量以及每页显示数量，根据这些数据计算出总页数，并在页面中显示出相应的页码、上一页和下一页元素。

<div class="news-list">
   <div class="data-list"></div>
   <ul class="pagination"></ul>
   <div class="page-goto">
      跳转到<input type="text" class="input-page"/>页<a href="javascript:void(0);" class="btn-goto">Go</a>
   </div>
</div>

// 计算分页
var totalCount = newsData.length;
var pageSize = 10;
var totalPage = Math.ceil(totalCount / pageSize);
var currentPage = 1;

// 生成分页HTML
var $ul = $(".pagination");
for (var i = 1; i <= totalPage; i++) {
   var $li = $("<li></li>").addClass("page-item").appendTo($ul);
   var $link = $("<a></a>").addClass("page-link").attr("href", "javascript:void(0);").appendTo($li).text(i);
   if (i == currentPage) {
      $li.addClass("active");
   }
}
var $prev = $("<li></li>").addClass("page-item page-prev").appendTo($ul);
$("<a></a>").addClass("page-link").attr("href", "javascript:void(0);").text("上一页").appendTo($prev);
if (currentPage == 1) {
   $prev.addClass("disabled");
}
var $next = $("<li></li>").addClass("page-item page-next").appendTo($ul);
$("<a></a>").addClass("page-link").attr("href", "javascript:void(0);").text("下一页").appendTo($next);
if (currentPage == totalPage) {
   $next.addClass("disabled");
}

然后需要绑定翻页、跳页等事件。

// 点击页码跳转到对应的页码
$ul.on("click", ".page-link", function() {
   var page = $(this).text();
   if (page == currentPage) {
      return;
   }
   currentPage = page;
   loadData();
});

// 点击上一页跳转到上一页
$ul.on("click", ".page-prev", function() {
   if (currentPage == 1) {
      return;
   }
   currentPage--;
   loadData();
});

// 点击下一页跳转到下一页
$ul.on("click", ".page-next", function() {
   if (currentPage == totalPage) {
      return;
   }
   currentPage++;
   loadData();
});

// 跳转到指定页码
$(".btn-goto").on("click", function() {
   var page = parseInt($(".input-page").val());
   if (isNaN(page) || page < 1 || page > totalPage) {
      alert("请输入正确的页码");
      return;
   }
   currentPage = page;
   loadData();
});

最后需要动态加载数据，并将数据展示到页面中。

// 加载数据并展示
function loadData() {
   // 计算展示数据的范围
   var fromIndex = (currentPage - 1) * pageSize;
   var toIndex = currentPage * pageSize - 1;

   // 获取需要展示的数据
   var data = getData(fromIndex, toIndex);

   // 生成HTML
   var $content = $("<div></div>");
   $.each(data, function() {
      var $item = $("<div></div>").addClass("item").appendTo($content);
      $("<h3></h3>").text(this.title).appendTo($item);
      $("<p></p>").text(this.content).appendTo($item);
   });

   // 将HTML插入到页面中
   $(".data-list").empty().append($content);

   // 更新分页HTML
   $ul.find(".active").removeClass("active");
   $ul.find(".page-link:contains('" + currentPage + "')").parent().addClass("active");
   $prev.toggleClass("disabled", currentPage == 1);
   $next.toggleClass("disabled", currentPage == totalPage);
}

loadData();

示例2

假设有一个div，用来展示一些图片，并且需要进行分页展示。在这个例子中，我们希望实现点击图片可以进行放大查看的功能。

首先需要计算每页显示的图片数量，并生成相应的HTML元素。

<div class="gallery">
   <div class="data-list"></div>
   <ul class="pagination"></ul>
</div>

// 计算分页
var totalCount = imageData.length;
var pageSize = 6;
var totalPage = Math.ceil(totalCount / pageSize);
var currentPage = 1;

// 生成分页HTML
var $ul = $(".pagination");
for (var i = 1; i <= totalPage; i++) {
   var $li = $("<li></li>").addClass("page-item").appendTo($ul);
   var $link = $("<a></a>").addClass("page-link").attr("href", "javascript:void(0);").appendTo($li).text(i);
   if (i == currentPage) {
      $li.addClass("active");
   }
}
var $prev = $("<li></li>").addClass("page-item page-prev").appendTo($ul);
$("<a></a>").addClass("page-link").attr("href", "javascript:void(0);").text("上一页").appendTo($prev);
if (currentPage == 1) {
   $prev.addClass("disabled");
}
var $next = $("<li></li>").addClass("page-item page-next").appendTo($ul);
$("<a></a>").addClass("page-link").attr("href", "javascript:void(0);").text("下一页").appendTo($next);
if (currentPage == totalPage) {
   $next.addClass("disabled");
}

// 生成图片HTML
var $content = $("<div></div>");
for (var i = 0; i < pageSize; i++) {
   var index = (currentPage - 1) * pageSize + i;
   if (index >= totalCount) {
      break;
   }
   var $item = $("<div></div>").addClass("item").appendTo($content);
   var $img = $("<img>").appendTo($item).attr("src", imageData[index].src).attr("alt", imageData[index].desc);
}
$(".data-list").empty().append($content);

然后需要绑定翻页事件和图片放大查看事件。

// 点击页码跳转到对应的页码
$ul.on("click", ".page-link", function() {
   var page = $(this).text();
   if (page == currentPage) {
      return;
   }
   currentPage = page;
   loadData();
});

// 点击上一页跳转到上一页
$ul.on("click", ".page-prev", function() {
   if (currentPage == 1) {
      return;
   }
   currentPage--;
   loadData();
});

// 点击下一页跳转到下一页
$ul.on("click", ".page-next", function() {
   if (currentPage == totalPage) {
      return;
   }
   currentPage++;
   loadData();
});

// 图片放大查看
$(".data-list").on("click", "img", function() {
   var src = $(this).attr("src");
   var desc = $(this).attr("alt");
   // TODO: 打开图片查看器
});

最后需要动态加载数据，并将数据展示到页面中。

// 加载数据并展示
function loadData() {
   // 计算展示数据的范围
   var fromIndex = (currentPage - 1) * pageSize;
   var toIndex = currentPage * pageSize - 1;

   // 生成HTML
   var $content = $("<div></div>");
   for (var i = fromIndex; i <= toIndex; i++) {
      if (i >= totalCount) {
         break;
      }
      var $item = $("<div></div>").addClass("item").appendTo($content);
      var $img = $("<img>").appendTo($item).attr("src", imageData[i].src).attr("alt", imageData[i].desc);
   }

   // 将HTML插入到页面中
   $(".data-list").empty().append($content);

   // 更新分页HTML
   $ul.find(".active").removeClass("active");
   $ul.find(".page-link:contains('" + currentPage + "')").parent().addClass("active");
   $prev.toggleClass("disabled", currentPage == 1);
   $next.toggleClass("disabled", currentPage == totalPage);
}

loadData();

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js分页显示div的内容 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • JavaScript 程序循环结构详解

    JavaScript 程序循环结构详解 什么是循环结构 在编写程序时，经常需要重复执行某个操作，这就是循环结构。循环结构可以对一段代码重复执行多次，可以通过循环结构来节约代码量和提高执行效率。 JavaScript 中循环结构 JavaScript 中有两种常见的循环结构：for 循环和 while 循环。 for 循环 for 循环通常用于已知循环执行次数…

    JavaScript 2023年5月27日
    00

  • Javascript入门学习第八篇 js dom节点属性说明第2/2页

    首先，在介绍“Javascript入门学习第八篇 js dom节点属性说明第2/2页”的完整攻略之前，我们需要了解一下什么是 DOM 树。 DOM （Document Object Model）文档对象模型，是一种用来表示 HTML 和 XML 文件的对象（或节点）的树结构。DOM 树将整个页面分为一个一个的小块，每个小块都是一个节点，节点可以包含文本内容，…

    JavaScript 2023年6月10日
    00

  • 探究JavaScript中的五种事件处理程序方式

    让我们来探究JavaScript中的五种事件处理程序方式： 事件处理程序方式 在JavaScript中，有五种主要的事件处理程序方式： HTML事件处理程序 DOM0级事件处理程序 DOM2级事件处理程序 DOM3级事件处理程序 EventUtil事件处理程序 下面我们将会详细讲解这五种事件处理程序方式的用法和区别。 1. HTML事件处理程序 HTML事件…

    JavaScript 2023年5月18日
    00

  • 公众号SVG动画交互实战代码

    “公众号SVG动画交互实战代码”是一篇涉及到SVG动画实战的代码攻略。本攻略主要介绍了如何使用HTML、CSS、JavaScript和SVG语言来实现有趣、动态的SVG动画，并添加了交互效果。 准备工作 在开始动手之前，有几个准备工作必须要完成。首先，我们需要一个能够编辑代码的文本编辑器，比如Sublime Text、VS Code等。其次，我们需要一些基本…

    JavaScript 2023年6月10日
    00

  • 如何将JS的变量值传递给ASP变量

    将JS的变量值传递给ASP变量需要借助AJAX技术来实现，具体步骤如下： 在HTML页面中引入jQuery库和ASP文件： <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script language=&…

    JavaScript 2023年6月11日
    00

  • 记录-js基础练习题

    这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 隔行换色（%）: window.onload = function() { var aLi = document.getElementsByTagName(‘li’); for(var i = 0; i < aLi.length; i++){ if(i%2 == 1){ aLi[i].sty…

    JavaScript 2023年4月18日
    00

  • 浅析javaScript中的浅拷贝和深拷贝

    浅析JavaScript中的浅拷贝和深拷贝 拷贝是什么 在JavaScript中，我们通常把拷贝称之为复制或者克隆，这里的拷贝是指将一个变量的值复制到另一个变量或对象中的过程。但是在拷贝的过程中，存在一种不同的拷贝方式，即浅拷贝和深拷贝。 浅拷贝 浅拷贝（Shallow Copy）是指将一个对象复制到另一个对象中，只是将对象的引用复制了过去，而不是对对象进行…

    JavaScript 2023年6月10日
    00

  • Ajax实现搜索引擎自动补全功能

    实现搜索引擎自动补全功能的一种方式是通过Ajax技术来异步获取匹配结果，并动态更新在页面上。 以下是具体步骤： 1. 构建搜索表单 构建一个包含搜索框的表单，需要设置一个 input 元素的 id 为 search，表示搜索输入框。 <form> <input type="text" id="search&qu…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部