Pagination Next is disabled when there is only 1 page, but clickable when there is no data

[ghost]

I have a bit of a weird problem here. I got everything set up perfectly, that is until I noticed that the "Next" button in pagination is clickable when there is no data via search not found or when there is no data from the database (this is wrong behavior), but it's disabled when there is only 1 pagination page or it's at the end of the pagination page (this is correct behavior).

Here is what it looks like when there is only 1 pagination page:

As you can see from the image above. The "Previous" and "Next" buttons are both disabled (gray text color).

Now here is what it looks like when I try to search for data that isn't in my database:

The "Next" button somehow becomes clickable (indicated by purple text color and pointer cursor). I can't screenshot the pointer cursor with the Snipping Tool though.

Here is the code I use for the Pagination component:

<script>
    export let handler;

    const pageNumber = handler.getPageNumber();
    const pageCount = handler.getPageCount();
    const pages = handler.getPages({ ellipsis: true });
</script>

<button type="button" class="page-item pagination-prev" class:disabled={$pageNumber === 1} on:click={() => handler.setPage('previous')}>
    Previous
</button>
<ul class="pagination listjs-pagination mb-0">
    {#each $pages as page}
        <li class="page-item" class:active={$pageNumber === page} class:ellipse={page === null}>
            <button type="button" class="page-link" on:click={() => handler.setPage(page)} style="font-size: .64rem;">{page ?? '...'}</button>
        </li>
    {/each}
</ul>
<button type="button" class="page-item pagination-next" class:disabled={$pageNumber === $pageCount} on:click={() => handler.setPage('next')}>
    Next
</button>

Can you please help me with this problem? Thank you.

[vincjo]

Hello @wojakmcwagies

This should fix your issue:

<button type="button" 
    class="page-item pagination-next"  
    class:disabled={$pageNumber === $pageCount || $pageCount === 0} 
    on:click={() => handler.setPage('next')}
>
    Next
</button>

I didn't realize that $pageCount could be 0 when there's no entry in the table. So we must use the logical "or" to handle this case

const isDisabled = $pageNumber === $pageCount || $pageCount === 0

Thank you for raising this point

[ghost]

@vincjo Thank you very much, it works now.