Pagination

Pagination links help navigate multi-page lists. Supports sizing modifiers (large/small), active markers, and disabled indicators.

Large Pagination (.pagination-lg)

Default Pagination

Small Pagination (.pagination-sm)

Dynamic Configured Pagination (page: 2, total_pages: 100)

Automatically renders ellipsis sliders and boundaries dynamically based on state configuration attributes.

                    Current page Selection: 2
                

<!-- Declarative Dynamic Pagination -->
<div data-role="pagination" data-page="2" data-size="10" data-total-pages="100"></div>

<!-- Manual JavaScript Initialization -->
<script>
    new Pagination('#pag-el', {
        page: 2,
        size: 10,
        totalPages: 100,
        maxVisible: 5
    });
</script>