Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Custom page classes for pagination

See original GitHub issue

Love the library! However, I was surprised to find no option for easily adding custom class attributes to a pagination item for styling purposes, e.g. instead of using only the default classes:

<ul class="pagination">
    <li class="active">
        <a class="page" href="...">1</a>
    </li>
    ...
</ul>

I wanted to add some Bootstrap class names:

<ul class="pagination">
    <li class="page-item active">
        <a class="page-link page" href="...">1</a>
    </li>
    ...
</ul>

This could be achieved by allowing tweaks to the following line in pagination.js: https://github.com/javve/list.js/blob/52afe2db0d018df3009acf49b6cbb56943b28024/src/pagination.js#L85 This could, for example, be achieved by adding two new options during list initialization, similar to the paginationClass option.

Issue Analytics

State:
Created 4 years ago
Reactions:7
Comments:7

Top GitHub Comments

1reaction

RomainLanzcommented, Sep 2, 2019

Hey @javve! 👋

I found myself in the same situation as @cdekkers. I want to change the styling of the pagination and I’m not able to do so with the current version.

I saw that there’s multiple PR that should solve this issue. May I help somewhere to get this feature in your library?

0reactions

EvilDTX91commented, Apr 1, 2022

https://github.com/javve/list.js/issues/744#issuecomment-1086039470 I hopes it can help 😃

Top Results From Across the Web

Pagination - Bootstrap

Pagination links are customizable for different circumstances. Use .disabled for links that appear un-clickable and .active to indicate the current page. While ...

Pagination - Django REST framework

REST framework includes support for customizable pagination styles. This allows you to modify how large result sets are split into individual pages of...

How to Build a Custom Pagination Component in React

In this post, we will focus on pagination and we'll build a custom controlled component that handles page buttons based on the current...

How to create a custom Pagination Class with page numbers?

I'm trying to create a custom pagination class. Here is my try: class CustomPagination(PageNumberPagination): page_item_count = 10 page = 1 ...

How To Build Custom Pagination with React | DigitalOcean

Next, you defined the fetchPageNumbers() method in the Pagination class. This method handles the core logic for generating the page numbers to ...