Danh sách phân trang JavaScript
|
Gần đây, tôi được giao nhiệm vụ triển khai phân trang cho một mảng giá trị (trong một số trường hợp, hơn 2400 giá trị) và thay vì sử dụng thư viện hiện có, tôi đã chọn viết logic phân trang của riêng mình và đặt nó vào một bộ chuyển đổi giá trị Aurelia Show Có rất nhiều cách bạn có thể đạt được điều này, bạn có thể sử dụng const paginate = (items, page = 1, perPage = 10) => {
const offset = perPage * (page - 1);
const totalPages = Math.ceil(items.length / perPage);
const paginatedItems = items.slice(offset, perPage * page);
return {
previousPage: page - 1 ? page - 1 : null,
nextPage: (totalPages > page) ? page + 1 : null,
total: items.length,
totalPages: totalPages,
items: paginatedItems
};
};0 và const paginate = (items, page = 1, perPage = 10) => {
const offset = perPage * (page - 1);
const totalPages = Math.ceil(items.length / perPage);
const paginatedItems = items.slice(offset, perPage * page);
return {
previousPage: page - 1 ? page - 1 : null,
nextPage: (totalPages > page) ? page + 1 : null,
total: items.length,
totalPages: totalPages,
items: paginatedItems
};
};1. Giải pháp cuối cùng tôi đưa ra là sử dụng lát cắt vì nó tạo ra mã đơn giản và dễ đọc nhất. Về mặt hiệu suất, tôi tin rằng ________ 10 sẽ dẫn đầu, nhưng đó không phải là mối quan tâm của chúng tôi ở đâyconst paginate = (items, page = 1, perPage = 10) => items.slice(perPage * (page - 1), perPage * page); Tuy nhiên, nếu bạn muốn một cái gì đó mô tả nhiều hơn một chút, bạn có thể dài dòng hơn một chút và tạo ra một cái gì đó gần như không ngắn gọn, cung cấp cho bạn một số chi tiết hơn Trong trường hợp của tôi, tôi muốn trả về các trang tiếp theo và trước đó, cũng như tổng số trang và mục cho mỗi trang đang được phân trang. Trong khi bạn nhận được một phương pháp dài dòng hơn, nó sẽ trở nên hữu ích hơn rất nhiều const paginate = (items, page = 1, perPage = 10) => {
const offset = perPage * (page - 1);
const totalPages = Math.ceil(items.length / perPage);
const paginatedItems = items.slice(offset, perPage * page);
return {
previousPage: page - 1 ? page - 1 : null,
nextPage: (totalPages > page) ? page + 1 : null,
total: items.length,
totalPages: totalPages,
items: paginatedItems
};
};Nếu bạn đang sử dụng Aurelia, đây là một công cụ chuyển đổi giá trị sẽ cung cấp cho bạn cách phân trang mảng có thể được sử dụng trên const paginate = (items, page = 1, perPage = 10) => {
const offset = perPage * (page - 1);
const totalPages = Math.ceil(items.length / perPage);
const paginatedItems = items.slice(offset, perPage * page);
return {
previousPage: page - 1 ? page - 1 : null,
nextPage: (totalPages > page) ? page + 1 : null,
total: items.length,
totalPages: totalPages,
items: paginatedItems
};
};3 hoặc bất kỳ nơi nào khác mà bạn đang hiển thị các mục từ một mảng. Nếu bạn không sử dụng Aurelia, bạn có thể dừng đọc tại đây, phần trên là những gì bạn đang theo đuổiexport class PaginateValueConverter {
toView(array, page = 1, perPage = 10) {
if (!array) {
return array;
}
const paginationObject = paginate(array, page, perPage);
return paginationObject.items;
}
}Sau đó, bạn có thể sử dụng trình chuyển đổi giá trị này trong các ứng dụng Aurelia của mình như thế này
Bạn có thể sẽ có một biến const paginate = (items, page = 1, perPage = 10) => {
const offset = perPage * (page - 1);
const totalPages = Math.ceil(items.length / perPage);
const paginatedItems = items.slice(offset, perPage * page);
return {
previousPage: page - 1 ? page - 1 : null,
nextPage: (totalPages > page) ? page + 1 : null,
total: items.length,
totalPages: totalPages,
items: paginatedItems
};
};0 trong chế độ xem của mình, nơi bạn tăng giá trị nếu một nút hoặc liên kết được nhấn, có thể là một hàng sốKhái niệm Phân trang JavaScript được áp dụng để di chuyển giữa các trang bằng các nút hoặc liên kết Đầu tiên, Tiếp theo, Trước và Cuối cùng. Phương châm chính của phân trang là di chuyển giữa các nội dung ngay lập tức bằng cách nhấp vào liên kết hoặc nút. Phân trang có nhiều liên kết hoặc nút được cung cấp để truy cập nội dung Đầu tiên, Tiếp theo, Trước đó và Cuối cùng. Tạo các nút Đầu tiên, Tiếp theo, Trước đó và Cuối cùng trong JavaScript, chúng tôi đã sử dụng các hàm JavaScript khác nhau Gói phát triển phần mềm tất cả trong một(hơn 600 khóa học, hơn 50 dự án)  Giá 600+ Khóa học trực tuyến. hơn 50 dự án. Hơn 3000 giờ. Giấy chứng nhận có thể kiểm chứng. Truy cập Trọn đời Máy nhắn tin Bootstrap là gì?Khái niệm phân trang, được sử dụng để truy cập nội dung bằng cách sử dụng Đầu tiên, Tiếp theo, Trước đó và Cuối cùng hoặc nhiều liên kết hoặc nút dựa trên yêu cầu của khách hàng để truy cập nội dung một cách trơn tru Bắt đầu khóa học phát triển phần mềm miễn phí của bạn Phát triển web, ngôn ngữ lập trình, kiểm thử phần mềm và những thứ khác Tại sao chúng tôi sử dụng phân trang JavaScript?Kịch bản thời gian thực. Hãy lấy trang web amazon hoặc trang web Flipkart để hiển thị các sản phẩm có sẵn trong cơ sở dữ liệu của họ. Giả sử họ có 1 triệu sản phẩm với họ. Nếu họ đang cố gắng hiển thị tất cả các mặt hàng cùng một lúc, khách hàng phải đợi thêm thời gian như một ngày để xem tất cả các danh sách sản phẩm Làm thế nào chúng ta nên giải quyết tình huống này?Thay vì hiển thị tất cả các mục cùng một lúc, chúng tôi có thể hiển thị chúng từ 50 đến 100 mục cùng một lúc bằng cách sử dụng danh sách các nút liên kết. Nếu khách hàng không hài lòng với 50 đến 100 sản phẩm đầu tiên thì sẽ chuyển sang 50 đến 100 sản phẩm tiếp theo, cứ thế tiếp tục. Khái niệm này được gọi là phân trang Cú pháp phân trang Ví dụ về phân trang trong JavascriptDưới đây là các ví dụ sau đây đề cập dưới đây Ví dụ #1 – Phân trang bằng sốMã số đầu ra Ví dụ #2 – Phân trang bằng ChuỗiMã số đầu ra Sau khi nhấp vào nút Trang tiếp theo Ví dụ #3 – Phân trang không có thư viện CSS mặc địnhMã số ________số 8đầu ra Phần kết luậnPhân trang của JavaScript được sử dụng để di chuyển giữa các trang bằng cách sử dụng các nút hoặc liên kết ngay lập tức. Nó có thể được thực hiện với thư viện CSS hoặc không có thư viện CSS Bài viết được đề xuấtĐây là hướng dẫn về Phân trang trong JavaScript. Ở đây chúng tôi thảo luận về các ví dụ về phân trang trong Javascript và lý do tại sao chúng tôi sử dụng nó cùng với cú pháp. Bạn cũng có thể xem các bài viết sau để tìm hiểu thêm – |
