Pagination.js 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. import Buttons from "./Buttons";
  2. import Label from "./Label";
  3. import Serch from "./Search";
  4. export default class Pagination {
  5. constructor(onPageChange, rowCount, perPage) {
  6. this.currentPage = 1;
  7. this.maxButtons = 10;
  8. this.onPageChange = onPageChange;
  9. this.rowCount = rowCount;
  10. this.perPage = perPage;
  11. this.totalPages = Math.ceil(rowCount / perPage);
  12. }
  13. render() {
  14. this.paginationContainer = document.createElement('div');
  15. this.paginationContainer.classList.add('pagination', 'row');
  16. this.labels = new Label(this.currentPage, this.totalPages, 10, 1000);
  17. this.buttons = new Buttons(this.currentPage, this.totalPages, 10, this.onPageChange, (page) => {
  18. this.labels.updateLabel(page, this.perPage);
  19. this.search.updateSearch(page, this.perPage);
  20. });
  21. this.search = new Serch(this.currentPage, this.totalPages, this.onPageChange, (page, size) => {
  22. this.labels.updateLabel(page, this.perPage);
  23. this.buttons.updateButtons(page, this.perPage);
  24. this.search.updateSearch(page, this.perPage);
  25. });
  26. this.paginationContainer.appendChild(this.labels.render());
  27. this.paginationContainer.appendChild(this.buttons.render());
  28. this.paginationContainer.appendChild(this.search.render());
  29. return this.paginationContainer;
  30. }
  31. changePageSize(onPageChange, rowCount, perPage) {
  32. this.currentPage = 1;
  33. this.maxButtons = 10;
  34. this.onPageChange = onPageChange;
  35. this.rowCount = rowCount;
  36. this.perPage = perPage;
  37. this.totalPages = Math.ceil(rowCount / perPage);
  38. return this.paginationContainer;
  39. }
  40. }