JS分页的实现（同步与异步）

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);

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