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中重要的内置对象之一。数组对象用法如下： 创建数组 var arr = new Arra…

    JavaScript 2023年6月10日
    00

  • javascript保留两位小数的实现方法你了解吗

    当需要在JavaScript中将一个数字保留两位小数时，通常有几种不同的方法可以实现。 方法一：使用toFixed()函数 .toFixed()函数是JavaScript中的内置函数，可以将数字转换为带有指定小数位数的字符串格式。 const num = 3.141592654; const roundedNum = num.toFixed(2); cons…

    JavaScript 2023年5月28日
    00

  • vue router 源码概览案例分析

    题目中提到的“vue router 源码概览案例分析”可以分成以下三个关键点进行讲解： Vue Router 是什么以及为什么要使用它？ Vue Router 的源码结构是怎样的？ 通过案例分析 Vue Router 源码中的核心功能是如何实现的？ 我们将依次对这三个关键点进行阐述。 1. Vue Router 是什么以及为什么要使用它？ Vue Route…

    JavaScript 2023年6月11日
    00

  • javascript函数命名的三种方式及区别介绍

    对于“javascript函数命名的三种方式及区别介绍”，可以从以下三种方式展开讲解： 第一种方式：函数声明 使用函数声明语句来创建函数，这是最常见的一种函数命名方式，也是最容易理解的方式。 函数声明的基本结构如下： function functionName() { //函数体 } 示例： function greeting() { console.log…

    JavaScript 2023年5月27日
    00

  • Json序列化和反序列化方法解析

    Json序列化和反序列化方法解析 什么是JSON序列化和反序列化 JSON是JavaScript Object Notation的缩写，它是一种轻量级的数据交换格式。JSON序列化是将对象转换成JSON字符串的过程，而JSON反序列化则是将JSON字符串转换回对象的过程。 JSON序列化方法 在C#中，可以使用Json.Net库来完成JSON序列化。下面是一…

    JavaScript 2023年5月27日
    00

  • js实现在网页上简单显示时间的方法

    这里是“JS实现在网页上简单显示时间的方法”完整攻略。 步骤一：选择显示时间的位置 首先，我们需要选择一个合适的位置来显示时间。这个位置可以是一个<div>元素、一个表格中的单元格或者页面的顶部栏目等等。在本次攻略中，我们将选择一个<div>元素来进行样例演示。 示例代码如下： <div id="time"&…

    JavaScript 2023年5月27日
    00

  • JavaScript 中有关数组对象的方法(详解)

    JavaScript 中有关数组对象的方法(详解) 数组是 JavaScript 中非常常用的数据结构。在 JavaScript 中，数组对象有许多方法可以使用，比如添加元素、删除元素、查找元素等等。本文将详细介绍 JavaScript 中有关数组对象的方法。 数组的创建 在 JavaScript 中创建一个数组对象有多种方法： 使用字面量表达式 const…

    JavaScript 2023年5月27日
    00

  • JS利用map整合双数组的小技巧分享

    JS利用map整合双数组的小技巧是指通过使用map函数，把两个数组逐个对应元素整合成一个新的数组。下面是具体的步骤及示例： 1. 首先明确双数组整合的要求 如果我们有两个数组： const arr1 = [1, 2, 3]; const arr2 = [‘a’, ‘b’, ‘c’]; 我们希望将这两个数组逐个对应元素整合成一个新的数组，即得到： const …

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