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:
2026-03-09 11:48:21 +00:00
parent ffa007082a
commit bdacf52b28
3 changed files with 213 additions and 6 deletions

View File

@@ -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)
};
}