当前位置：首页 > JavaScript

js前端实现分页

2026-04-04 09:01:22JavaScript

前端分页实现方法

客户端分页（适用于数据量较小的情况） 将全部数据加载到前端，通过JavaScript计算分页逻辑。

// 示例数据
const allData = [...]; // 假设这是全部数据
const pageSize = 10; // 每页显示数量
let currentPage = 1; // 当前页码

// 计算分页数据
function getPaginatedData() {
  const startIndex = (currentPage - 1) * pageSize;
  const endIndex = startIndex + pageSize;
  return allData.slice(startIndex, endIndex);
}

// 渲染分页控件
function renderPagination() {
  const totalPages = Math.ceil(allData.length / pageSize);
  let paginationHTML = '';

  // 上一页按钮
  if (currentPage > 1) {
    paginationHTML += `<button onclick="changePage(${currentPage - 1})">上一页</button>`;
  }

  // 页码按钮
  for (let i = 1; i <= totalPages; i++) {
    paginationHTML += `<button class="${i === currentPage ? 'active' : ''}" onclick="changePage(${i})">${i}</button>`;
  }

  // 下一页按钮
  if (currentPage < totalPages) {
    paginationHTML += `<button onclick="changePage(${currentPage + 1})">下一页</button>`;
  }

  document.getElementById('pagination').innerHTML = paginationHTML;
}

// 切换页码
function changePage(page) {
  currentPage = page;
  renderData();
  renderPagination();
}

// 渲染数据
function renderData() {
  const paginatedData = getPaginatedData();
  // 渲染数据到页面...
}

服务器端分页（适用于大数据量） 通过AJAX或Fetch API请求分页数据。

async function fetchPaginatedData(page, pageSize) {
  try {
    const response = await fetch(`/api/data?page=${page}&size=${pageSize}`);
    const result = await response.json();
    return {
      data: result.data,
      total: result.total
    };
  } catch (error) {
    console.error('Error fetching data:', error);
    return { data: [], total: 0 };
  }
}

// 使用示例
let currentPage = 1;
const pageSize = 10;

async function loadPage(page) {
  currentPage = page;
  const { data, total } = await fetchPaginatedData(currentPage, pageSize);
  renderData(data);
  renderPagination(total);
}

使用现成库实现 可以借助现有库如jQuery插件或现代框架的分页组件。

// 使用DataTables插件示例
$(document).ready(function() {
  $('#example').DataTable({
    "paging": true,
    "pageLength": 10,
    "serverSide": true,
    "ajax": {
      "url": "/api/data",
      "type": "POST"
    }
  });
});

// Vue.js中使用Element UI分页组件
<template>
  <el-pagination
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-size="pageSize"
    :total="total">
  </el-pagination>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 100
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    }
  }
}
</script>

优化建议