Add pagination to search page with configurable items per page
- Added pagination state (currentPage, pageSize) to search.js - Implemented getPaginatedResults() function to slice filtered results - Added getTotalPages() and helper functions for pagination math - Added pagination UI controls to search.html: * Items per page dropdown (15, 30, 60 options) * Previous/Next navigation buttons * Page info display (Page X of Y) * Result summary showing item range - Integrated pagination with search filtering: * Resets to page 1 on new search * Disables nav buttons at boundaries * Updates page info after each action - Added comprehensive CSS styling for responsive pagination controls - Updated README with pagination features and usage Features: ✓ Filter results first, then paginate ✓ Smart button disabling at boundaries ✓ Auto-reset to page 1 on search ✓ Dynamic page count updates ✓ Responsive design on mobile devices Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
57
search.js
57
search.js
@@ -1,5 +1,9 @@
|
||||
// search.js - Search module with inventory data and filtering logic
|
||||
|
||||
// Pagination state
|
||||
export let currentPage = 1;
|
||||
export let pageSize = 15;
|
||||
|
||||
// Helper function to create a date string
|
||||
function getDate(daysFromNow) {
|
||||
const date = new Date();
|
||||
@@ -116,3 +120,56 @@ export function getLocations() {
|
||||
const locations = [...new Set(inventoryData.map(item => item.location))];
|
||||
return ['All', ...locations.sort()];
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the page size for pagination
|
||||
* @param {number} size - Items per page (15, 30, or 60)
|
||||
*/
|
||||
export function setPageSize(size) {
|
||||
pageSize = size;
|
||||
currentPage = 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the current page
|
||||
* @param {number} page - Page number
|
||||
*/
|
||||
export function setCurrentPage(page) {
|
||||
currentPage = page;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get total number of pages
|
||||
* @param {number} totalItems - Total items to paginate
|
||||
* @returns {number} Number of pages
|
||||
*/
|
||||
export function getTotalPages(totalItems) {
|
||||
return Math.ceil(totalItems / pageSize);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get paginated results from filtered items
|
||||
* @param {Array} filteredItems - Filtered inventory items
|
||||
* @returns {Object} Object with paginated items and pagination info
|
||||
*/
|
||||
export function getPaginatedResults(filteredItems) {
|
||||
const totalItems = filteredItems.length;
|
||||
const totalPages = getTotalPages(totalItems);
|
||||
|
||||
if (currentPage < 1) currentPage = 1;
|
||||
if (currentPage > totalPages && totalPages > 0) currentPage = totalPages;
|
||||
|
||||
const startIndex = (currentPage - 1) * pageSize;
|
||||
const endIndex = startIndex + pageSize;
|
||||
const paginatedItems = filteredItems.slice(startIndex, endIndex);
|
||||
|
||||
return {
|
||||
items: paginatedItems,
|
||||
currentPage,
|
||||
pageSize,
|
||||
totalPages,
|
||||
totalItems,
|
||||
startIndex: totalItems > 0 ? startIndex + 1 : 0,
|
||||
endIndex: Math.min(endIndex, totalItems)
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user