JS实现分页

135 阅读1分钟

使用slice()实现分页,slice会返回新的数组,不会影响原来的数组

data=[1,2,3,4,5,6,7,8,9,10]
1,2,3,4,5 data.slice(0,5)
6,7,8,9,10 data.slice(5,10)
slice((current-1)*pageSize,current*pageSize)2

export default function usePagination(data) {
  const { dataSource } = data
 
  const [pages, setPages] = useState({
    pageSize: 10,
    current: 1,
  })
 
  const onPageSizeChange = (pageSize: number) => {
    setPages({
      current: 1,
      pageSize: pageSize
    })
  }
 
  const onChange = (current: number) => {
    setPages({
      ...pages,
      current: current
    })
  }
 
 
 
  return {
    tableProps: {
      ...data,
      dataSource: dataSource.slice((pages.current - 1) * pages.pageSize, pages.current * pages.pageSize)
    },
    paginationProps: {
      ...pages,
      total: Array.isArray(dataSource) && dataSource.length,
      onPageSizeChange,
      onChange
    }
  }
}