Pagination

Basic Example

Interactive pagination with page state

const { default: Join } = await import('/components/layout/join.js');
const { default: Button } = await import('/components/actions/button.js');

const { signal, tags, $ } = Lightview;
const { div, span } = tags;

const page = signal(1);
const totalPages = 5;

const demo = div({ class: 'flex flex-col gap-4 items-center' },
    Join({},
        Button({ 
            class: 'join-item',
            onclick: () => { if(page.value > 1) page.value--; }
        }, '«'),
        ...Array.from({ length: totalPages }, (_, i) => 
            Button({ 
                class: 'join-item',
                color: () => page.value === i + 1 ? 'primary' : undefined,
                onclick: () => { page.value = i + 1; }
            }, i + 1)
        ),
        Button({ 
            class: 'join-item',
            onclick: () => { if(page.value < totalPages) page.value++; }
        }, '»')
    ),
    span({ class: 'text-sm opacity-70' }, () => `Page ${page.value} of ${totalPages}`)
);

$('#demo').insert(demo);