FreeGridv1.15.1English

페이지 번호와 이동 칸

처음·이전·다음·끝 버튼과 페이지 크기 목록 옆에, 현재 페이지 주변의 번호 버튼과 페이지 번호를 입력하는 칸을 보여 줍니다.

실행 예제페이지 번호

1,000행에 번호 버튼 7개와 이동 칸.

이 데모의 코드
import { createGrid, type ColumnDef, type Row } from '@freegridjs/core';
import { makeRows } from '../data';
import { button, separator, text, tr, type DemoContext } from '../ui';

export default function mount(ctx: DemoContext) {
  const h = (en: string, ko: string) => tr(ctx.lang, { en, ko });
  const grid = createGrid(ctx.host, {
    columns: [{ field: 'id', header: 'ID', type: 'number', width: 80 }, { field: 'name', header: h('Name', '이름'), width: 180 }, { field: 'country', header: h('Country', '국가'), width: 150 }],
    data: makeRows(1000), locale: ctx.lang, filterRow: true,
    pagination: { pageSize: 20, pageSizes: [20, 50, 100], pageNumbers: 7, jump: true },
  });
  grid.on('pageChange', e => ctx.log(`page ${e.page + 1} / ${e.pageCount}`));
  text(ctx, h('Click a page number or type one in the box and press Enter. Filter a column: the page buttons follow.',
    '페이지 번호를 누르거나 칸에 번호를 넣고 Enter를 누르세요. 컬럼을 거르면 페이지 버튼이 따라 바뀝니다.'));
  return grid;
}
createGrid(el, {
  columns,
  data,
  pagination: {
    pageSize: 20,
    pageSizes: [20, 50, 100],
    pageNumbers: 7,      // up to 7 page buttons around the current page (true = 5)
    jump: true,          // a box: type a page number and press Enter
  },
});
이름타입설명
pageNumbersboolean | number"x / y 페이지" 대신 번호 버튼. 숫자로 개수(true는 5개). 현재 페이지가 강조되고 페이지에 따라 버튼이 따라 움직입니다.
jumpboolean숫자 칸. Enter를 누르면 그 페이지로(마지막보다 큰 번호는 마지막 페이지로).
pageSize / pageSizesnumber / number[]페이지당 행 수와 크기 목록의 선택지.
  • 필터와 정렬로 페이지 수가 바뀌면 버튼도 따라 바뀝니다.
  • 버튼에는 화면 낭독기용 이름("4페이지")이 있고 현재 페이지에는 aria-current가 붙습니다.
  • 코드로: setPage(n)(0부터), getPage(), getPageCount(), pageChange 이벤트.