当然,以下是一个简单的JavaScript分页组件示例:,,``javascript,class Pagination {, constructor(items, itemsPerPage) {, this.items = items;, this.itemsPerPage = itemsPerPage;, this.currentPage = 1;, },, getTotalPages() {, return Math.ceil(this.items.length / this.itemsPerPage);, },, getCurrentPageItems() {, const start = (this.currentPage 1) * this.itemsPerPage;, const end = start + this.itemsPerPage;, return this.items.slice(start, end);, },, goToPage(pageNumber) {, if (pageNumber< 1 || pageNumber > this.getTotalPages()) {, throw new Error('Invalid page number');, }, this.currentPage = pageNumber;, },, nextPage() {, if (this.currentPage< this.getTotalPages()) {, this.currentPage++;, }, },, previousPage() {, if (this.currentPage > 1) {, this.currentPage--;, }, },},,// Example usage:,const items = Array.from({ length: 50 }, (_, i) =>
Item ${i + 1});,const pagination = new Pagination(items, 10);,console.log(pagination.getCurrentPageItems()); // First 10 items,pagination.nextPage();,console.log(pagination.getCurrentPageItems()); // Next 10 items,
``,,这个简单的分页组件允许你根据每页显示的项目数来分页,并提供方法来获取当前页的项目、跳转到指定页、下一页和上一页。