1. 页码向上取整 Math.ceil([].length / 每页现实的数量)
    2. 动态修改 data，利用响应式原理，数组改变，组件自动重新渲染
    1. const [page, pageSize] = [1, 10];
    2. const startIndex = (page - 1) * pageSize; // 1-1 = 0 * 10 = 0; 2-1 = 1 * 10 = 10
    3. const data = data.slice(startIndex, startIndex + pageSize);

PageTable

前端 Table分页

  1. import React, { useState, useMemo, useEffect } from 'react';
  2. import { array, number } from 'prop-types';
  3. import TableList from './TableList';
  5. PageTable.propTypes = {
  6.   dataSource: array.isRequired,
  7.   current: number,
  8.   pageSize: number,
  9. };
  10. PageTable.defaultProps = {
  11.   current: 1,
  12.   pageSize: 10,
  13. };
  15. function PageTable({ dataSource, current: _c, pageSize: _p, ...rest }) {
  16.   const [query, setQuery] = useState({ current: _c, pageSize: _p });
  17.   const [state, setState] = useState([]);
  18.   const total = useMemo(
  19.     () => {
  20.       return Array.isArray(dataSource) ? dataSource.length : 0;
  21.     },
  22.     [dataSource]
  23.   );
  25.   useEffect(update, [dataSource, query]);
  27.   function update() {
  28.     const { current, pageSize } = query;
  29.     const startIndex = (current - 1) * pageSize;
  30.     const _state = dataSource.slice(startIndex, startIndex + pageSize);
  31.     setState(_state);
  32.   }
  34.   function pageChange({ current, pageSize }) {
  35.     setQuery({ current, pageSize });
  36.   }
  38.   return (
  39.     <TableList 
  40.       {...rest} 
  41.       {...query} 
  42.       total={total} 
  43.       dataSource={state} 
  44.       onChange={pageChange}
  45.       />
  46.   );
  47. }
  49. export default PageTable;

前端分页原理

计算出数组的 startIndex, endIndex，
然后 slice截取当前区间的数据

  1. const startIndex = (page - 1) * pageSize;
  2. const endIndex = startIndex + pageSize;
  3. // 1-1 = 0 * 10 = 0, 0 + 10; 
  4. // 2-1 = 1 * 10 = 10, 10 + 10;
  5. // 3-1 = 2 * 10 = 20, 20 + 10;
  6. // 4-1 = 3 * 10 = 30, 30 + 10;
  7. // 5-1 = 4 * 10 = 40, 40 + 10;
  8. // 6-1 = 5 * 10 = 50, 50 + 10;
  9. // 7-1 = 7 * 10 = 60, 60 + 10;

pagination

jquery 分页插件
https://pagination.js.org/
image.png