TA-Pagination - All functions and values

Alpine JS makes it easy to use functions as expressions in every directive. Learn more about every function and attribute and how to navigate through the pagination.

Functions

next(): - Jumps to the next page based on the pagination index. If the actual page is the last one the next page will be the first one. The function circles through all pages.

previous(): - Jumps to the previous page based on the slide index. If the actual page is the first one the previous page will be the last one. The function circles through all pages.

end(): Jumps to the last page of the pagination.

start(): Jumps to the first page of the pagination.

expand(): Removes the pagination and shows all elements.

shrink(): Switches back to the pagination mode after expanding.

Example

<div
    class="ta-pagination ta-pagination-anim-swing mt-6 mb-12 grid"
    x-data="taPagination()"
    x-init="init()"
    :class="{'grid': initialized, 'hidden': !initialized}"
>
    <!-- CONTENT -->
    <button
        type="button"
        :class="{'opacity-25 cursor-default': animating}"
        x-on:click.prevent="previous()"
        title="Go to previous page"
    >
        <span class="sr-only">Go to previous page</span>
        <!--- ICON /-->
    </button>
    <button
        type="button"
        :class="{'opacity-25 cursor-default': animating}"
        x-on:click.prevent="next()"
        title="Go to next page"
    >
        <span class="sr-only">Go to next page</span>
        <!--- ICON /-->
    </button>
</div>

Values

TA-Pagination provides you with the following attributes you can use to improve the user experience.

initialized: Boolean - Is true after the pagination has been initialized.

is_expand: Boolean - If the pagination is removed and all elements are shown.

is_shrink: Boolean - If the pagination mode is on.

has_next: Boolean - If there is a next page after the actual one.

has_previous: Boolean - If there is a previous page before the actual one.

animating: Boolean - Is true if a transition is actually running.

page: Number - The actual page number.

Example

<div
    class="ta-pagination ta-pagination-anim-swing mt-6 mb-12 grid"
    x-data="taPagination()"
    x-init="init()"
    :class="{'grid': initialized, 'hidden': !initialized}"
>
    <!-- CONTENT -->
    <button
        type="button"
        :class="{'opacity-25 cursor-default': animating}"
        x-on:click.prevent="previous()"
        x-show="has_previous"
        title="Go to previous page"
    >
        <span class="sr-only">Go to previous page</span>
        <!--- ICON /-->
    </button>
    <button
        type="button"
        :class="{'opacity-25 cursor-default': animating}"
        x-on:click.prevent="next()"
        x-show="has_next"
        title="Go to next page"
    >
        <span class="sr-only">Go to next page</span>
        <!--- ICON /-->
    </button>
</div>

Previous Predefined CSS Next Transitions

Last updated

17. May 2022

Reading Time

~ 2 minutes

Contents

TA-Pagination - All functions and values

Functions

Values

Plugins & News

Getting started