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日

相关文章

  • vue3的api解读之ref和reactive示例详解

    下面是针对“vue3的api解读之ref和reactive示例详解”的完整攻略： 1. 什么是 ref 和 reactive？ ref： 用来创建一个响应式对象，它会返回一个带有 value 属性的对象，这个 value 属性可以自动更新页面。 reactive：用来创建一个响应式对象，它会将对象中所有属性都转化为响应式数据，任何一个属性发生变化都能触发相应…

    JavaScript 2023年6月11日
    00

  • Prototype使用指南之ajax

    Prototype使用指南之ajax Prototype是一款优秀的JavaScript框架，提供了一系列易用、高效的API，其中最为常用的之一便是ajax模块。ajax模块让我们可以通过JavaScript发起异步HTTP请求，从而有效地提升前端开发效率和用户体验。在本篇文章中，我们将详细讲解如何使用Prototype的ajax模块进行前端开发。 发起一个…

    JavaScript 2023年6月11日
    00

  • JS数据类型分类及常用判断方法

    JS数据类型分类及常用判断方法 数据类型分类 JavaScript有7种数据类型，分别为： 原始类型（primitive）： undefined null boolean number string symbol（ES6新增） 引用类型（object）： Object Array Function Date RegExp Error Math JSON 常用…

    JavaScript 2023年6月10日
    00

  • javascript下用ActiveXObject控件替换word书签，将内容导出到word后打印第2/2页

    需要注意的是，JavaScript使用ActiveXObject控件需要在IE浏览器环境下操作，而且需要注意安全性问题。 创建Word对象 使用ActiveXObject控件来操作Word，首先需要创建一个Word对象。可以通过以下代码来实现： var wordApp = new ActiveXObject("Word.Application&qu…

    JavaScript 2023年6月11日
    00

  • JavaScript中Number.NEGATIVE_INFINITY值的使用详解

    JavaScript中Number.NEGATIVE_INFINITY值的使用详解 概述 Number.NEGATIVE_INFINITY是JavaScript中一个特殊的数值类型，表示负无穷大。当进行一些数学计算时，如果结果超出JavaScript所能表示的数值范围，该结果将被自动转换为Number.NEGATIVE_INFINITY。 使用场景 Numb…

    JavaScript 2023年5月28日
    00

  • JS实现太极旋转思路分析

    下面是一份JS实现太极旋转的完整攻略。 1. 思路分析 太极旋转是一种常见的动画效果，其实现基本思路如下： 创建一个太极图形的HTML结构 使用CSS样式将其样式设置完成，达到一个静止的状态 使用JS来控制太极图形的旋转角度 具体实现过程中，其实旋转本质上是一个让元素不断改变其旋转角度的过程，我们可以通过JS创建一个变量来保存旋转角度的数值，每次修改该数值，…

    JavaScript 2023年6月11日
    00

  • javascript 函数及作用域总结介绍

    Javascript 函数及作用域总结介绍 Javascript 函数及作用域是 Javascript 学习中最核心和重要的部分之一，下面我们将深入学习并总结它们的基本知识。 函数（Function） 定义 在 Javascript 中，函数是一种数据类型，可以被执行。函数有两种方式定义，一种是函数声明方式，另一种是函数表达式方式。 函数声明方式 funct…

    JavaScript 2023年5月27日
    00

  • await/async无法捕获与处理错误信息的解决方案分享

    接下来我会详细讲解“await/async无法捕获与处理错误信息的解决方案分享”的完整攻略。 问题描述 在使用async/await时，我们经常会遇到try/catch不起作用的情况，比如： async function fetchData() { try { const response = await fetch(‘https://api.example…

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