基于ES6或原生JavaScript的SPFx方案PnP分页控件实现

核心思路 #

借助SharePoint REST API的$skip和$top参数实现分页逻辑，通过SPHttpClient发送请求，手动维护分页状态（当前页码、每页条数、总条目数），最后渲染数据列表和分页控件。

实现步骤与代码 #

1. 初始化分页状态 #

// 分页状态变量
let currentPage = 1;
const itemsPerPage = 10; // 可自定义每页显示条数
let totalItems = 0;
const listName = "你的列表名称"; // 替换为实际列表名

2. 分页数据获取函数 #

async function fetchPaginatedData(pageNumber) {
  const skipCount = (pageNumber - 1) * itemsPerPage;
  
  // 首次加载时获取总条目数，数据更新时可重新调用
  if (totalItems === 0) {
    const totalCountResponse = await this.context.spHttpClient.get(
      `${this.context.pageContext.web.absoluteUrl}/_api/web/lists/getbytitle('${listName}')/items/$count`,
      SPHttpClient.configurations.v1
    );
    totalItems = parseInt(await totalCountResponse.text());
  }

  // 请求当前页数据
  const dataResponse = await this.context.spHttpClient.get(
    `${this.context.pageContext.web.absoluteUrl}/_api/web/lists/getbytitle('${listName}')/items?$skip=${skipCount}&$top=${itemsPerPage}&$select=Title,Id,自定义字段`, // 替换为需要的字段
    SPHttpClient.configurations.v1
  );
  
  const items = await dataResponse.json();
  renderItems(items.value);
  renderPaginationControls();
}

3. 渲染数据列表 #

function renderItems(items) {
  const container = document.getElementById("data-container");
  container.innerHTML = ""; // 清空原有内容
  
  items.forEach(item => {
    const itemElement = document.createElement("div");
    itemElement.className = "list-item";
    itemElement.innerHTML = `<h4>${item.Title}</h4><p>ID: ${item.Id}</p>`;
    container.appendChild(itemElement);
  });
}

4. 渲染分页控件 #

function renderPaginationControls() {
  const paginationContainer = document.getElementById("pagination-container");
  paginationContainer.innerHTML = "";
  
  const totalPages = Math.ceil(totalItems / itemsPerPage);
  
  // 上一页按钮
  const prevButton = document.createElement("button");
  prevButton.textContent = "上一页";
  prevButton.disabled = currentPage === 1;
  prevButton.addEventListener("click", () => {
    if (currentPage > 1) {
      currentPage--;
      fetchPaginatedData(currentPage);
    }
  });
  paginationContainer.appendChild(prevButton);
  
  // 页码按钮组
  for (let i = 1; i <= totalPages; i++) {
    const pageButton = document.createElement("button");
    pageButton.textContent = i;
    pageButton.className = currentPage === i ? "active-page" : "";
    pageButton.addEventListener("click", () => {
      currentPage = i;
      fetchPaginatedData(currentPage);
    });
    paginationContainer.appendChild(pageButton);
  }
  
  // 下一页按钮
  const nextButton = document.createElement("button");
  nextButton.textContent = "下一页";
  nextButton.disabled = currentPage === totalPages;
  nextButton.addEventListener("click", () => {
    if (currentPage < totalPages) {
      currentPage++;
      fetchPaginatedData(currentPage);
    }
  });
  paginationContainer.appendChild(nextButton);
}

5. 初始化加载 #

在SPFx WebPart的render方法中调用初始加载逻辑：

public render(): void {
  this.domElement.innerHTML = `
    <div class="pagination-demo">
      <div id="data-container"></div>
      <div id="pagination-container"></div>
    </div>
  `;
  
  fetchPaginatedData(currentPage);
}

6. 可选样式优化 #

.pagination-container button {
  margin: 0 4px;
  padding: 4px 8px;
  cursor: pointer;
  border: 1px solid #ddd;
  border-radius: 3px;
}

.pagination-container button.active-page {
  background-color: #0078d4;
  color: #fff;
  border-color: #0078d4;
}

.list-item {
  padding: 10px;
  border-bottom: 1px solid #eee;
  margin-bottom: 8px;
}

关键说明 #

• 完全基于SharePoint REST原生分页参数$skip/$top实现，无需依赖PnP React控件
• 通过$count接口获取总条目数，用于计算总页数
• 手动维护分页状态，通过原生事件监听实现页码切换逻辑
• 代码均为原生JS/ES6语法，适配无框架SPFx项目

内容的提问来源于stack exchange，提问作者Yon