ldbetteridge/pantry-management-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add pagination to search page with configurable items per page

Browse Source 
- 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:
Luke Betteridge
2026-03-09 11:48:21 +00:00
parent ffa007082a
commit bdacf52b28
3 changed files with 213 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
README.md
View File

@@ -58,10 +58,20 @@ Advanced inventory search and filtering interface.
- Filter by expiry date range (start date and end date)
- Real-time result display with item cards
- Visual expiry status indicators (Fresh, Expiring Soon, Expired)
- **Pagination** — Results displayed with configurable items per page (15, 30, or 60)
- Reset button to clear all filters
- Keyboard support (press Enter to search)
- Date range validation (start date ≤ end date)
**Pagination Features:**
- **Items Per Page Dropdown** — Choose between 15, 30, or 60 items per page
- **Previous/Next Navigation** — Browse through pages of results
- **Page Information** — Shows current page and total pages (e.g., "Page 2 of 5")
- **Result Summary** — Displays showing item count (e.g., "Found 47 items (16-30)")
- **Smart Boundaries** — Previous button disabled on page 1, Next disabled on last page
- **Auto-Reset** — Returns to page 1 when search filters change
- **Dynamic Page Count** — Automatically updates total pages when page size changes
**Expiry Date Features:**
- Each inventory item includes an expiry date
- Visual badges show expiry status: