ページネーション [1.0.0]

ページネーションを管理・描画するクラス。
前頁・次頁ボタンおよびページ番号リンクや、現在の表示範囲を自動更新。

<script charset="UTF-8" src="pagination.js"></script>

const pagination = new Pagination(
  document.getElementsByClassName('controls'),
  document.getElementById('info'),
  1234,
  100,
  3,
  (page) => { console.log(`ページ${page}`, page); }
);

const P = new Pagination(controlsSelector, ?infoSelector, ?totalItems, ?itemsPerPage, ?currentPage, ?callbackClickPage);

controlsSelector (HTMLElement[])

ページ操作UIを表示する要素

infoSelector (?HTMLElement[])

件数範囲を表示する要素

totalItems (?number)

総件数

itemsPerPage (?number)

１ページに表示する件数

currentPage (?number)

表示させるページ番号

callbackClickPage (?function(number))

ページ変更時のコールバック。ページ番号を渡す

P.onPageChange = (page) => {}

page (number)

ページ番号

P.goToPage(page);

page (number)

遷移先のページ番号

P.reset(totalItems, itemsPerPage, ?currentPage);

totalItems (number)

総件数

itemsPerPage (number)

１ページに表示する件数

currentPage (?number)

表示させるページ番号

P.addControlsEl(El);

El (HTMLElement[])

ページ操作UIを表示する要素

P.removeControlsEl(idx);

idx (number)

削除したいインデックス番号

result = P.getControlsEl();

result (HTMLElement[])

ページ操作UIを表示する要素

P.addInfoEl(El);

El (HTMLElement[])

件数範囲を表示する要素

P.removeInfoEl(idx);

idx (number)

削除したいインデックス番号

result = P.getInfoEl();

result (HTMLElement[])

件数範囲を表示する要素