JS分页的实现(同步与异步)

yizhihongxing

JS分页的实现有同步和异步两种方式。在介绍这两种方式之前,需要了解下分页所需的一些数据和参数:

  1. 当前页码 currentPage
  2. 每页展示数据条数 pageSize
  3. 总数据量 totalDataCount
  4. 总页数 pageCount

其中,总页数pageCount可根据总数据量totalDataCount和每页展示条数pageSize相除得到。接下来我们分别介绍同步和异步两种方式的实现。

同步方式

同步方式指的是在页面加载时,将所有数据一次性加载出来,利用JS进行数据的筛选展示、分页切换等操作。对于数据量较小的项目来说,同步方式实现起来比较简单,例如:

 // 定义数据数组
 var data = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20"];

 // 配置分页参数
 var currentPage = 1;
 var pageSize = 5;
 var totalDataCount = data.length;
 var pageCount = Math.ceil(totalDataCount / pageSize);

 // 定义分页显示函数
 function showData(currentPage) {
   // 清空容器内容
   document.getElementById("container").innerHTML = "";
   // 根据当前页码和每页展示数据条数,筛选出要显示的数据
   var dataStartIndex = (currentPage - 1) * pageSize;
   var dataEndIndex = dataStartIndex + pageSize > totalDataCount ? totalDataCount : dataStartIndex + pageSize;
   var showDataList = data.slice(dataStartIndex, dataEndIndex);
   // 将数据展示在页面上
   showDataList.forEach(function(item) {
     var div = document.createElement("div");
     div.innerHTML = item;
     document.getElementById("container").appendChild(div);
   })

   // 根据总数据量和当前页码生成分页栏
   var pageNav = "";
   for (var i = 1; i <= pageCount; i++) {
     if (i === currentPage) {
       pageNav += "<span class='current-page'>" + i + "</span>";
     } else {
       pageNav += "<a href='javascript:void(0)' onclick='showData(" + i + ")'>" + i + "</a>";
     }
   }
   document.getElementById("page-nav").innerHTML = pageNav;
 }

 // 页面加载时,显示第一页的数据
 showData(currentPage);

在以上示例中,我们实现了一个简单的同步分页效果。通过计算展示数据的起始位置和总页数,使用for循环生成了一个分页栏,点击分页栏,则根据不同页码重新筛选展示的数据。

异步方式

异步方式指的是在页面加载完成后,仅仅加载第一页的数据,然后根据用户的点击动作进行AJAX请求获取分页所需的数据,再进行数据展示。以下是一个异步分页的示例:

 // 配置分页参数
 var currentPage = 1;
 var pageSize = 5;
 var totalDataCount = 0;
 var pageCount = 0;

 // 定义分页显示函数
 function showData(currentPage) {
   var xhr = new XMLHttpRequest();
   xhr.open("GET", "/api/data?page=" + currentPage + "&pageSize=" + pageSize, true);
   xhr.onreadystatechange = function() {
     if (xhr.readyState === 4) {
       if (xhr.status === 200) {
         var data = JSON.parse(xhr.responseText);
         totalDataCount = data.totalDataCount;
         pageCount = Math.ceil(totalDataCount / pageSize);
         // 清空容器内容
         document.getElementById("container").innerHTML = "";
         // 将数据展示在页面上
         data.dataList.forEach(function(item) {
           var div = document.createElement("div");
           div.innerHTML = item;
           document.getElementById("container").appendChild(div);
         })

         // 根据总数据量和当前页码生成分页栏
         var pageNav = "";
         for (var i = 1; i <= pageCount; i++) {
           if (i === currentPage) {
             pageNav += "<span class='current-page'>" + i + "</span>";
           } else {
             pageNav += "<a href='javascript:void(0)' onclick='showData(" + i + ")'>" + i + "</a>";
           }
         }
         document.getElementById("page-nav").innerHTML = pageNav;
       } else {
         alert("数据加载失败!");
       }
     }
   };
   xhr.send(null);
 }

 // 页面加载时,显示第一页的数据
 showData(currentPage);

在以上示例中,实现了动态加载数据的功能,当用户点击不同的分页时,会进行异步请求获取对应的数据,并进行展示。可以看到,在展示和分页栏的生成过程中,我们都参考了同步分页的实现方式,只不过数据加载的方式不同。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS分页的实现(同步与异步) - Python技术站

(0)
上一篇 2023年6月16日
下一篇 2023年6月16日

相关文章

  • 微信小程序 MD5加密登录密码详解及实例代码

    微信小程序 MD5加密登录密码详解及实例代码 在微信小程序开发中,登录密码是非常敏感的信息,我们需要对其进行加密处理,保证密码的安全性。常用的加密方法之一就是MD5加密。 本文将详细介绍MD5加密算法及其在微信小程序中的应用,以供开发者参考。 什么是MD5加密算法 MD5是一种常用的密码加密方法,它可以将任意长度的字节串加密成一个128位的数字指纹。MD5加…

    Java 2023年6月15日
    00
  • Java Maven构建工具中mvnd和Gradle谁更快

    本文主要分析Java Maven构建工具中mvnd和Gradle谁更快,内容包括mvnd和Gradle的特点、使用、优缺点以及比较测试。 Maven构建工具简介 Apache Maven是一个流行的Java构建工具,用于管理项目构建,依赖和文档。Maven基于Project Object Model(POM)来定义项目的操作,以及声明项目的依赖项和构建配置。…

    Java 2023年6月2日
    00
  • 基于Spring Boot应用ApplicationEvent案例场景

    下面是基于Spring Boot应用ApplicationEvent案例场景的完整攻略,包括了示例演示。 1. Spring Boot中的ApplicationEvent Spring Boot是基于Spring框架的快速开发工具,而Spring框架中的事件机制是一个非常重要的组件。在Spring Boot应用中,可以通过ApplicationEvent来实…

    Java 2023年5月19日
    00
  • Java之dao模式详解及代码示例

    Java 之 DAO 模式详解及代码示例 什么是 DAO 模式 DAO,即 Data Access Object,数据访问对象,是一种数据访问的设计模式。它的主要目的是将数据存储到持久化层(通常是数据库)并从数据库中检索数据。这样,就可以将业务逻辑层与数据访问层分离,从而提高系统的可维护性和可重用性。 DAO 模式主要包含以下几个组件: 持久层接口 (DAO…

    Java 2023年5月19日
    00
  • Java三种移位运算符原理解析

    Java三种移位运算符原理解析 移位运算是基于二进制补码进行运算的。Java 中有三种移位运算符:左移运算符、右移运算符和无符号右移运算符。下面分别对这三种移位运算符进行详细讲解。 左移运算符(<<) 左移运算符将一个数的二进制表示向左移动指定的位数。其语法为: 左移位数 << 左移运算值 左移位数是一个整数,代表要进行左移的位数。左…

    Java 2023年5月26日
    00
  • Java新API的时间格式化

    下面我将详细讲解Java新API的时间格式化的完整攻略。 什么是时间格式化? 时间格式化是将时间值转换为特定格式的过程,使其更易于理解和显示。Java提供了多种格式化时间的方法。 基本概念 Java的时间格式化主要是通过 java.time.format.DateTimeFormatter 类实现的。DateTimeFormatter 的常用方法如下: of…

    Java 2023年5月20日
    00
  • Android基于API的Tabs3实现仿优酷tabhost效果实例

    下面我将详细介绍“Android基于API的Tabs3实现仿优酷tabhost效果实例”的完整攻略,包括具体的实现过程和两个示例说明。 1. 实现基本思路 实现仿优酷tabhost效果的方案主要涉及两个部分:一是使用API实现Tabs3页面,二是为每个页面添加Fragment布局。 具体步骤: 在布局中添加ViewPager和TabLayout控件 创建Fr…

    Java 2023年5月26日
    00
  • 解析Linux下Varnish缓存的配置优化

    解析Linux下Varnish缓存的配置优化 Varnish是一款高性能的Web缓存程序,它能够在内存中存储分别从Web服务器和客户端接受到的HTTP数据。本文将教你如何通过在Linux下配置和优化Varnish缓存来提高网站的性能。 安装Varnish Varnish可在多个Linux发行版上运行,以下是在Ubuntu 18.04上安装Varnish的方法…

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