Does exist vanilla js version?

[nestle49]

No description provided.

[oskar-anderson]

There is no vanilla JS version. For a zero dependencies alternative I would suggest using ultimate-pagination. It only provides a headless utility method getPaginationModel(). You would need to roll your own UI, but that should not be too complicated. Example from a Vue app:

<template>
    <div class="w-full flex justify-center e5-btn-group-container gap-1">
        <template v-for="(paginationButton, index) in pagionation">
            <button v-if="paginationButton.type === 'PREVIOUS_PAGE_LINK'" 
                @click="setupPagination(paginationButton.value)" 
                class="e5-btn e5-btn-primary-light">
                <span class="arrow-font">‹</span>
            </button>
            <button v-if="paginationButton.type === 'ELLIPSIS' && index < pagionation!.length / 2"
                class="e5-btn e5-btn-primary-light">
                ...
            </button>
            <button v-if="paginationButton.type === 'PAGE'"
                @click="setupPagination(paginationButton.value)"
                :class="`e5-btn ${paginationButton.isActive ? 'e5-btn-primary' : 'e5-btn-primary-light'}`">
                {{ paginationButton.value }}
            </button>
            <button v-if="paginationButton.type === 'ELLIPSIS' && index >= pagionation!.length / 2"
                class="e5-btn e5-btn-primary-light">
                ...
            </button>
            <button v-if="paginationButton.type === 'NEXT_PAGE_LINK'"
                @click="setupPagination(paginationButton.value)"
                class="e5-btn e5-btn-primary-light">
                <span class="arrow-font">›</span>
            </button>
        </template>
    </div>
</template>
<style>
.e5-btn-group-container > *:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.e5-btn-group-container > *:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
</style>

Basic usage:

const props = defineProps<{
    itemCount: number,
    pageSize: number,
}>();

let pagionation = ref<ultimatePagionation.PaginationModel | null>(null);
// Call on mount and when filters cause itemCount dependency to change
watch(
    () => [props.itemCount, props.pageSize],
    () => {
        setupPagination(pagionation.value?.find(x => x.isActive)?.value ?? 1);
    },
    { immediate: true }
);

function clamp(min: number, c: number, max: number) {
    return Math.max(min, Math.min(c, max));
}
function setupPagination(desiredPage: number) {
    let totalPages = Math.ceil(props.itemCount / props.pageSize);
    let currentPage = clamp(1, desiredPage, totalPages);

    if (totalPages == 0) {
        pagionation.value = [];
        return;
    }
    pagionation.value = ultimatePagionation.getPaginationModel({
        currentPage: currentPage,
        totalPages: totalPages,
        boundaryPagesRange: 1,
        siblingPagesRange: 2,
        hideEllipsis: false,
        hidePreviousAndNextPageLinks: false,
        hideFirstAndLastPageLinks: true
    });

    emit('pagination-change', {
        offset: (currentPage - 1) * props.pageSize,
        limit: props.pageSize
    });
}

[lofcz]

I've recently rewritten the library using TypeScript & SASS, check it out: https://github.com/lofcz/paginationts, Vanilla JS dist files are available on npm & unpkg. It's a drop-in replacement with no breaking changes. ⭐