#94 UI: Pagination Component
Description
EditCreate reusable pagination component.
Component: api/ui/templates/components/pagination/
Files:
- pagination.html
- pagination.css
- pagination.js
Features:
- Display:
- Page numbers with ellipsis
- First/Last page buttons
- Previous/Next buttons
- Current page highlight
- Total count display
- Configuration:
- Items per page selector (10, 25, 50, 100)
- Showing X-Y of Z items display
- Jump to page input
- Responsive:
- Compact mode on mobile
- Only show prev/next on small screens
- States:
- Disabled when loading
- First/last button disabled appropriately
JavaScript API:
- new Pagination(element, config)
- pagination.setTotal(count)
- pagination.setPage(pageNum)
- pagination.setPerPage(count)
- pagination.onPageChange(callback)
Events:
- pageChange: { page, perPage }
Integration:
- Works with DataTable component
- URL parameter sync (#/admin/users?page=2&per_page=50)
With ultra attention to details and correctness.
Before closing: write comment summarizing implementation with screenshot.
Comments
Loading comments...
Context
Loading context...
Audit History
View AllLoading audit history...