페이지 나누기

쪽 이동 막대와 쪽당 행 수 선택으로 한 쪽씩 보여 줍니다. setPage, setPageSize, pageChange로 코드에서도 다루며 서버 데이터에도 씁니다.

실행 예제페이지 나누기

쪽 이동 막대와 쪽당 행 수 선택으로 한 쪽씩 보여 줍니다.

이 데모의 코드

import { createGrid } from '@freegridjs/core';
import { demoColumns, makeRows } from '../data';
import { button, select, separator, text, tr, type DemoContext } from '../ui';

export default function mount(ctx: DemoContext) {
  const { lang } = ctx;
  const h = (en: string, ko: string) => tr(lang, { en, ko });
  const grid = createGrid(ctx.host, {
    columns: demoColumns(lang),
    data: makeRows(1000),
    locale: lang,
    rowNumbers: true, // numbers continue from page to page
    pagination: { pageSize: 50, pageSizes: [20, 50, 100], pageNumbers: 5, jump: true },
  });
  grid.on('pageChange', e => ctx.log(`pageChange → ${e.page + 1} / ${e.pageCount} (${e.pageSize})`));

  text(ctx, h('Use the pager under the rows or the buttons. Sorting or filtering goes back to the first page.',
    '아래 쪽 이동 막대나 버튼으로 넘겨 보세요. 정렬하거나 필터를 바꾸면 첫 쪽으로 돌아갑니다.'));
  separator(ctx);
  button(ctx, h('First page', '첫 쪽'), () => grid.setPage(0));
  button(ctx, h('Page 5', '5쪽'), () => grid.setPage(4));
  button(ctx, h('Last page', '마지막 쪽'), () => grid.setPage(grid.getPageCount() - 1));
  select(ctx, h('Rows per page', '쪽당 행 수'), [['20', '20'], ['50', '50'], ['100', '100']], '50', v => grid.setPageSize(Number(v)));
  return grid;
}

pagination을 켜면 한 번에 한 쪽씩 보여 주고 행 아래에 쪽 이동 막대를 붙입니다. 처음·이전·다음·마지막 쪽으로 이동할 수 있고, pageSizes를 주면 쪽당 행 수도 고를 수 있습니다. 정렬하거나 필터를 바꾸면 첫 쪽으로 돌아가고, 행 번호는 쪽이 바뀌어도 이어집니다.

쪽 이동 막대의 동작은 모두 코드에서 부를 수 있는 같은 메서드를 거칩니다. setPage(0부터 시작)와 setPageSize입니다. pageChange는 새 쪽, 쪽당 행 수, 전체 쪽 수를 알려 주고, beforePageChange에서는 저장하지 않은 편집이 있을 때처럼 이동을 막을 수 있습니다.

const grid = createGrid(el, {
  columns,
  data,
  pagination: { pageSize: 50, pageSizes: [20, 50, 100] },   // true = 100 rows a page
});

grid.setPage(2);            // 0-based: the third page
grid.getPage();             // 2
grid.getPageCount();
grid.setPageSize(100);
grid.on('pageChange', e => console.log(e.page, e.pageSize, e.pageCount));
grid.on('beforePageChange', e => { if (hasUnsavedEdits()) e.cancel(); });

서버 데이터에서도 쪽을 나눌 수 있습니다. datasource와 함께 pagination을 주면 한 쪽이 요청 한 번이 됩니다. 서버 데이터와 무한 스크롤을 보세요.

페이지 번호와 이동 칸

pageNumbers와 jump로 페이지 번호 버튼과 페이지 입력칸을 넣습니다. 자세한 내용:

페이지 번호와 이동 칸

옵션, 메서드, 이벤트

이름	타입	설명
`pagination`	`boolean \| { pageSize?, pageSizes?, pageNumbers?, jump? }`	한 쪽씩 보여 주고 아래에 쪽 이동 막대를 둡니다. true면 쪽당 100행. pageSizes를 주면 쪽당 행 수를 고를 수 있습니다.
`setPage(n) / getPage() / getPageCount()`	`void / number`	쪽을 이동합니다(0부터 시작, 있는 쪽 범위로 맞춤).
`setPageSize(n) / getPageSize()`	`void / number`	쪽당 행 수를 바꾸거나 읽습니다.
`pageChange / beforePageChange`	`events`	쪽이나 쪽당 행 수가 바뀌었습니다({ page, pageSize, pageCount }). 바뀌기 전 이벤트에서 cancel()로 막을 수 있습니다.

이 페이지에 대한 질문

행을 쪽 단위로 나눠 보여 주려면?

pagination: { pageSize: 50, pageSizes: [20, 50, 100] }을 주세요. 행 아래에 쪽 이동 막대가 생기고, setPage, setPageSize, pageChange로 코드에서도 다룹니다.