js实现分页代码

基础分页实现

通过计算总页数和当前页数据范围实现基础分页功能：

function paginate(items, currentPage = 1, perPage = 10) {
  const totalPages = Math.ceil(items.length / perPage)
  const offset = (currentPage - 1) * perPage
  const paginatedItems = items.slice(offset, offset + perPage)

  return {
    currentPage,
    perPage,
    total: items.length,
    totalPages,
    data: paginatedItems
  }
}

// 使用示例
const data = Array.from({length: 45}, (_,i) => i+1)
console.log(paginate(data, 2, 10))

分页组件封装

封装可复用的分页组件类：

class Paginator {
  constructor(items, options = {}) {
    this.items = items
    this.perPage = options.perPage || 10
    this.currentPage = options.currentPage || 1
  }

  get totalPages() {
    return Math.ceil(this.items.length / this.perPage)
  }

  get currentData() {
    const offset = (this.currentPage - 1) * this.perPage
    return this.items.slice(offset, offset + this.perPage)
  }

  nextPage() {
    if (this.currentPage < this.totalPages) this.currentPage++
    return this
  }

  prevPage() {
    if (this.currentPage > 1) this.currentPage--
    return this
  }

  goToPage(page) {
    if (page >= 1 && page <= this.totalPages) {
      this.currentPage = page
    }
    return this
  }
}

// 使用示例
const pager = new Paginator(data, {perPage: 5})
console.log(pager.currentData)
pager.nextPage()
console.log(pager.currentData)

前端UI分页实现

结合DOM操作的分页控件实现：

function renderPagination(container, paginator) {
  container.innerHTML = `
    <div class="pagination">
      <button class="prev" ${paginator.currentPage === 1 ? 'disabled' : ''}>上一页</button>
      ${Array.from({length: paginator.totalPages}, (_, i) => `
        <button class="page ${i+1 === paginator.currentPage ? 'active' : ''}">${i+1}</button>
      `).join('')}
      <button class="next" ${paginator.currentPage === paginator.totalPages ? 'disabled' : ''}>下一页</button>
    </div>
  `

  container.querySelector('.prev').addEventListener('click', () => {
    paginator.prevPage()
    renderPagination(container, paginator)
    updateDataView(paginator.currentData)
  })

  container.querySelector('.next').addEventListener('click', () => {
    paginator.nextPage()
    renderPagination(container, paginator)
    updateDataView(paginator.currentData)
  })

  container.querySelectorAll('.page').forEach(btn => {
    btn.addEventListener('click', () => {
      paginator.goToPage(parseInt(btn.textContent))
      renderPagination(container, paginator)
      updateDataView(paginator.currentData)
    })
  })
}

function updateDataView(data) {
  document.getElementById('data-container').innerHTML = 
    data.map(item => `<div class="item">${item}</div>`).join('')
}

异步数据分页

处理API返回的分页数据：

async function fetchPaginatedData(url, page = 1) {
  const response = await fetch(`${url}?page=${page}`)
  const { data, meta } = await response.json()

  return {
    data,
    currentPage: meta.current_page,
    lastPage: meta.last_page,
    total: meta.total
  }
}

// 使用示例
fetchPaginatedData('https://api.example.com/items', 2)
  .then(result => {
    console.log(result.data)
    renderPagination(document.getElementById('pagination'), {
      currentPage: result.currentPage,
      totalPages: result.lastPage,
      // ...其他分页方法
    })
  })

分页样式优化

添加基础CSS样式：

.pagination {
  display: flex;
  gap: 5px;
  margin-top: 20px;
}

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

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

.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}