【Widget】 JavaScript로 페이저의 뒷면을 만드는 【Pagination】

페이저를 만들 때 핵심 로직을 npm에 공개했습니다. TS로 다시 쓰고 일부 변수 이름 등을 다시 쓰고 있습니다 👀🥒 그 중 Pager 를 사용한 Web Component를 만드는 것도 좋을지도 모른다…( ˘ω˘ ) 추가:2021/07/23 페이저(Pager, Pagination)를 구현할 때 코어가 되는 부분을 정리해 두고 싶었으므로 망비록. 배열로 항목 관리 const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 배열에서 임의의 양만큼 항목을 추출합니다. const index = 0; // 현재 페이지 const limit = 3; // 3개씩 표시 items.slice(index * limit, (index * limit) + limit); // => [1, 2, 3] const index = 2; // 현재 페이지 const limit = 2; // 2개씩 표시 items.slice(index * limit, (index * limit) + limit); // => [5, 6] 최대 페이지 수를 알아보기 Math.ceil(items.length / limit); // => 4 Pager 생성자 만들기 class Pager { limit = 5; // 페이지당 몇 항목 표시 index = 0; // 몇 페이지째 #items = []; // 보관할 정보 목록 // 최대 몇 페이지 get max() { return Math.ceil(this.#items.length / this.limit); } // 현재 페이지 내용 get page() { const {limit, index} = this; return this.#items.slice(index * limit, (index * limit) + limit); } /** * 현재 * @param {number} _index 원하는 페이지 수 * @returns {any[]} 표시할 항목 목록 */ current(_index) { this.index = _index; if (this.index < 0) { this.index = 0; } if (this.max <= this.index) { this.index = this.max - 1; } return this.page; } /** * @param {Iterable} items - 나열하려는 이터러블 값 */ constructor(items) { this.#items = [...items]; // slice에 대한 Array화 } } 사용해보기 const pager = new Pager([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]); pager.current(1); // => [6, 7, 8, 9, 10] pager.current(-1); // => [1, 2, 3, 4, 5] pager.current(pager.max); // => [6, 7, 8, 9, 10] pager.current(100); // => [6, 7, 8, 9, 10] pager.max // => 2 pager.limit = 2; // 디스플레이 수 변경 pager.max // => 5 pager.current(1); // => [3, 4] pager.current(200); // => [9, 10] pager.page // => [9, 10] pager.index = 3; // 현재 페이지 번호 변경 pager.page // => [7, 8] pager.current(7); // => [7, 8] index라든지 limit도 액세서( get , set )로 해도 좋을지도 모르고, constructor 속에서 일부의 값을 이뮤터블로 해도 좋을지도 모른다👀

Reference

이 문제에 관하여(【Widget】 JavaScript로 페이저의 뒷면을 만드는 【Pagination】), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/heppokofrontend/items/52d95a11c5e5ee4f1ca6

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

【Widget】 JavaScript로 페이저의 뒷면을 만드는 【Pagination】

Reference

좋은 웹페이지 즐겨찾기