js分页显示div的内容

下面是我的分页显示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)
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • JavaScript高级程序设计 事件学习笔记

    《JavaScript高级程序设计》事件学习笔记 什么是事件? 事件是指在网页中发生的交互的行为,比如页面的加载、点击按钮、鼠标滚动等,这些行为就是事件。 事件监听器 事件监听器是用来监听特定事件并处理事件的函数。可以通过给元素添加事件监听器来创建响应用户操作的交互式网页。 在 JavaScript 中,我们可以使用 addEventListener() 方…

    JavaScript 2023年5月27日
    00
  • JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法

    JS中的hasOwnProperty()方法是用来检测一个属性是否是某个对象的自有属性的方法。它是基于原型链的继承机制的,只有当所查询的属性是对象本身的属性时才会返回true。 语法: object.hasOwnProperty(prop) 其中object是必需的,表示要检查属性的对象,prop参数也是必需的,表示要检查的属性名称,传入的参数是字符串类型。…

    JavaScript 2023年6月10日
    00
  • JavaScript生成二维码图片小结

    使用JavaScript生成二维码图片可以方便地分享一些跨平台内容,比如网址、联系方式、文本等等。下面是一个详细的攻略: 安装qrcode库 在使用JavaScript生成二维码图片之前,我们需要先安装相应的库。这里我们使用qrcode库,它可以非常方便地生成二维码图片。在命令行中输入以下命令进行安装: npm install qrcode –save 导…

    JavaScript 2023年6月10日
    00
  • Javascript技术栈中的四种依赖注入详解

    下面详细讲解“Javascript技术栈中的四种依赖注入详解”。 什么是依赖注入 依赖注入(Dependency Injection,简称DI)是一种软件设计模式,可以在某些情况下提高代码的松散度和可维护性。它的核心思想是将组件之间的依赖关系由程序员手动编写代码设置,转化为由容器自动完成依赖关系的注入。 在Javascript技术栈中,一般将依赖注入分为以下…

    JavaScript 2023年5月28日
    00
  • 使用JS代码实现点击按钮下载文件

    使用JS代码实现点击按钮下载文件需要用到Web API中的Blob和URL两个对象,以下是完整的攻略: 创建Blob对象 Blob对象是二进制大型对象,可以用于存储二进制数据或文本数据。我们可以使用Blob对象作为文件的内容,再利用URL对象生成一个下载链接。 代码示例: let content = ‘Hello, World!’ let blob = ne…

    JavaScript 2023年5月27日
    00
  • JAVA Iterator 转成 List 的操作

    当需要将Iterator转成List时,可以使用Java中的Collections工具类中提供的addAll()方法将Iterator中的元素逐个添加到List中。下面提供具体的操作步骤和示例说明: 1. 创建Iterator对象 首先创建一个Iterator对象,例如: Iterator<String> it = list.iterator()…

    JavaScript 2023年5月28日
    00
  • PHP中cookies使用指南

    首先让我们来介绍一下PHP中cookies的概念和使用方法。 什么是cookies? 在HTTP协议中,cookie是指服务器通过 HTTP 协议向客户端(通常是浏览器)发送的小型数据文件,该文件会在客户端下次通过 HTTP 协议访问同一服务器时发送到服务器,以便服务器能够获取和识别客户端信息。通俗的说,cookie就是浏览器和服务器之间的一种通信方式。 c…

    JavaScript 2023年6月11日
    00
  • JavaScript每天必学之数组和对象部分

    JavaScript每天必学之数组和对象部分 一、数组 数组是一种特殊的变量,它可以存储多个数据项,并且这些数据项可以是任意不同的数据类型。在 JavaScript 中,数组属于对象类型,但与其他对象不同的是,它可以通过索引来访问数组中的元素。 1.创建数组 JavaScript 中创建数组有两种方式,一种是使用数组字面量,另一种是通过 Array 构造函数…

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