[FEAT] External Dynamic Pages > Career Page > Implement Pagination

[kleenpulse]

Description

Develop a pagination component for the Career Page to allow users to navigate through multiple pages of job listings efficiently. The pagination should be intuitive, accessible, and integrate seamlessly with the existing job listing functionality.

Acceptance Criteria

• The pagination component displays the current page number and adjacent page numbers.
• "Previous" and "Next" buttons are included and function correctly.
• The component updates the job listings when a new page is selected.
• The pagination is responsive and maintains usability across different screen sizes.

Requirements

The pagination component should include:

• Current page indicator (highlighted)
• Clickable page numbers
• "Previous" and "Next" navigation buttons
• Ellipsis (...) for truncated page ranges when necessary
• Proper state management to reflect the current page in the URL

Tasks

• Design the pagination component based on the provided example and requirements.
• Develop the logic to generate the correct page numbers and ellipsis based on the current page and total pages.
• Implement click handlers for page numbers and navigation buttons.
• Integrate the pagination with the job listing data fetching mechanism.
• Add URL parameter management to reflect and control the current page.
• Utilize URL params for stage management
• Create animations or transitions for smoother page changes.
• Perform cross-browser testing and resolve any compatibility issues.

LINKS

FIGMA LINK.

IMAGES

[Jomagene]

I'm working on this issue

[kleenpulse]

@Jomagene this should be done before 10pm or I'm assigning it to someone else, you can use This component

[Jomagene]

@kleenpulse It seems that I'll have to wait to Integrate the pagination with the job listing data fetching mechanism. As I can read in the required tasks.

[kleenpulse]

@Jomagene you can simulate it with dummy data