js实现分页功能代码

分页功能实现方法

基本分页逻辑

使用数组的slice方法截取当前页数据，结合页码和每页条数计算起始索引：

function paginate(array, pageNumber, pageSize) {
  const startIndex = (pageNumber - 1) * pageSize;
  return array.slice(startIndex, startIndex + pageSize);
}

// 使用示例
const data = [1,2,3,4,5,6,7,8,9,10];
const currentPage = 2;
const perPage = 3;
const pageData = paginate(data, currentPage, perPage); // [4,5,6]

完整分页组件示例

包含页码按钮渲染和状态管理：

class Pagination {
  constructor(items = [], pageSize = 10) {
    this.items = items;
    this.pageSize = pageSize;
    this.currentPage = 1;
  }

  getVisibleItems() {
    const start = (this.currentPage - 1) * this.pageSize;
    const end = start + this.pageSize;
    return this.items.slice(start, end);
  }

  getTotalPages() {
    return Math.ceil(this.items.length / this.pageSize);
  }

  prevPage() {
    this.currentPage = Math.max(1, this.currentPage - 1);
    return this;
  }

  nextPage() {
    this.currentPage = Math.min(this.getTotalPages(), this.currentPage + 1);
    return this;
  }

  goToPage(page) {
    this.currentPage = Math.min(Math.max(1, page), this.getTotalPages());
    return this;
  }
}

前端界面实现

结合DOM操作实现完整分页器：

function renderPagination(data, container, perPage = 10) {
  const pagination = new Pagination(data, perPage);
  const pageCount = pagination.getTotalPages();

  function updateDisplay() {
    container.innerHTML = '';
    const items = pagination.getVisibleItems();

    // 渲染当前页数据
    items.forEach(item => {
      const element = document.createElement('div');
      element.textContent = item;
      container.appendChild(element);
    });

    // 渲染分页按钮
    const paginationControls = document.createElement('div');
    if (pageCount > 1) {
      // 上一页按钮
      if (pagination.currentPage > 1) {
        const prevBtn = document.createElement('button');
        prevBtn.textContent = 'Previous';
        prevBtn.addEventListener('click', () => {
          pagination.prevPage();
          updateDisplay();
        });
        paginationControls.appendChild(prevBtn);
      }

      // 页码按钮
      for (let i = 1; i <= pageCount; i++) {
        const pageBtn = document.createElement('button');
        pageBtn.textContent = i;
        if (i === pagination.currentPage) {
          pageBtn.style.fontWeight = 'bold';
        }
        pageBtn.addEventListener('click', () => {
          pagination.goToPage(i);
          updateDisplay();
        });
        paginationControls.appendChild(pageBtn);
      }

      // 下一页按钮
      if (pagination.currentPage < pageCount) {
        const nextBtn = document.createElement('button');
        nextBtn.textContent = 'Next';
        nextBtn.addEventListener('click', () => {
          pagination.nextPage();
          updateDisplay();
        });
        paginationControls.appendChild(nextBtn);
      }
    }
    container.appendChild(paginationControls);
  }

  updateDisplay();
}

异步数据分页

处理API返回的分页数据：

async function fetchPaginatedData(url, page = 1, limit = 10) {
  const response = await fetch(`${url}?page=${page}&limit=${limit}`);
  const data = await response.json();
  return {
    items: data.items,
    currentPage: data.currentPage,
    totalPages: data.totalPages,
    totalItems: data.totalCount
  };
}

// 使用示例
const apiUrl = 'https://api.example.com/items';
const pageInfo = await fetchPaginatedData(apiUrl, 3, 20);

分页样式优化

添加CSS样式增强用户体验：

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.pagination button {
  margin: 0 5px;
  padding: 5px 10px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
}

.pagination button.active {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

这些实现方法覆盖了从基础逻辑到完整组件的前端分页需求，可根据实际项目需求选择适合的方案或进行组合使用。