当前位置：首页 > JavaScript

js分页实现...

2026-04-05 10:44:27JavaScript

分页实现的基本思路

分页功能通常涉及前端展示和后端数据处理的配合。前端负责显示分页控件和当前页数据，后端负责根据页码和每页条数返回对应数据。

前端分页实现

使用JavaScript实现前端分页，可以直接在浏览器中对已有数据进行分页处理：

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

const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const pageSize = 3;
const pageNumber = 2;
const pageData = paginate(data, pageSize, pageNumber);
console.log(pageData); // [4, 5, 6]

后端API分页实现

与后端配合时，通常需要传递页码和每页大小参数：

async function fetchPaginatedData(page, size) {
  const response = await fetch(`/api/data?page=${page}&size=${size}`);
  return response.json();
}

// 使用示例
fetchPaginatedData(1, 10).then(data => {
  console.log(data);
});

分页UI组件实现

实现一个简单的分页UI组件：

class Pagination {
  constructor(totalItems, itemsPerPage, currentPage = 1) {
    this.totalItems = totalItems;
    this.itemsPerPage = itemsPerPage;
    this.currentPage = currentPage;
    this.totalPages = Math.ceil(totalItems / itemsPerPage);
  }

  render(container) {
    container.innerHTML = '';

    const prevButton = document.createElement('button');
    prevButton.textContent = 'Previous';
    prevButton.disabled = this.currentPage === 1;
    prevButton.addEventListener('click', () => {
      this.currentPage--;
      this.render(container);
    });

    const nextButton = document.createElement('button');
    nextButton.textContent = 'Next';
    nextButton.disabled = this.currentPage === this.totalPages;
    nextButton.addEventListener('click', () => {
      this.currentPage++;
      this.render(container);
    });

    const pageInfo = document.createElement('span');
    pageInfo.textContent = `Page ${this.currentPage} of ${this.totalPages}`;

    container.append(prevButton, pageInfo, nextButton);
  }
}

// 使用示例
const pagination = new Pagination(100, 10);
pagination.render(document.getElementById('pagination-container'));

分页优化技巧

对于大数据量分页，考虑使用无限滚动或虚拟滚动技术。无限滚动在用户滚动到页面底部时自动加载更多内容：

window.addEventListener('scroll', () => {
  if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
    loadMoreData();
  }
});

let currentPage = 1;
async function loadMoreData() {
  currentPage++;
  const data = await fetchPaginatedData(currentPage, 10);
  appendDataToDOM(data);
}

分页与排序结合

分页常与排序功能结合，需要在API请求中添加排序参数：

async function fetchSortedPaginatedData(page, size, sortField, sortOrder) {
  const url = `/api/data?page=${page}&size=${size}&sort=${sortField}&order=${sortOrder}`;
  const response = await fetch(url);
  return response.json();
}

分页状态管理

在复杂应用中，使用状态管理工具（如Redux）管理分页状态：

js分页实现...

// Redux action
const setCurrentPage = (page) => ({
  type: 'SET_CURRENT_PAGE',
  payload: page
});

// Redux reducer
const paginationReducer = (state = { currentPage: 1 }, action) => {
  switch (action.type) {
    case 'SET_CURRENT_PAGE':
      return { ...state, currentPage: action.payload };
    default:
      return state;
  }
};

以上方法涵盖了从简单到复杂的分页实现方案，可根据具体项目需求选择适合的方式。