BenG's avatar
Level 10

Add class to paginator links

How can I add a class to Pagination links? I am currently echoing the links like this: {{ $paginator->links() }}. How can I add a class so I can access it in Javascript? Thanks

0 likes
13 replies
BenG's avatar
Level 10

Is it not possible to add a class without creating custom pagination links?

RachidLaasri's avatar

as far as i know, Laravel pagination is using Bootstrap styles, so you can access them by selecting all "li" elements under "pagination" class.

BenG's avatar
Level 10

Ok, I got it. I went to Illuminate/Pagination/views/slider.php and added a class myself to the <ul></ul>.

foxted's avatar

I agree with @RachidLaasri, really bad idea. Why don't you follow the link I gave you, and create a Presenter? Or even you wrap you pagination links in a container and reference this container in your CSS, that would be more appropriate.

thepsion5's avatar

I've always just wrapped the pagination links and used that to target my CSS. Seems like an awful lot less work than creating an entirely new presenter.

1 like
nolros's avatar

ugly way - load bootstrap 3 or a bootstrap pagination custom build which will capture and style them for you. If you don't like the styling you can override bootstraps hooks. You can also walk the DOM with JQuery $().find() and then wrap() or addClass(). Angular has some great ways of dealing with these issues.

memovillalobos's avatar

Hello, this is probably too old but I wanted to share the way I got this done on L5.1, I simply wanted to add a class to the ul tag that was generated by the render function on the paginated object.

Create a custom presenter class to handle specific methods that need to change the way the results are presented, I called this SmallPaginationPresenter (file: app/SmallPaginationPresenter.php) and put it directly on my app folder (a specific folder and namespace would be better but for simplicity I chose to use this):

namespace App;

use Illuminate\Pagination\BootstrapThreePresenter;

class SmallPaginationPresenter extends BootstrapThreePresenter {

    public function render()
    {
        if ($this->hasPages())
        {
            return sprintf(
                '<ul class="pagination pagination-sm inline">%s %s %s</ul>',
                $this->getPreviousButton(),
                $this->getLinks(),
                $this->getNextButton()
            );
        }

        return '';
    }
}

This class adds the classes pagination-sm and inline to the ul tag; if you need to customise other tags you can overload specific methods of the BootstrapThreePresenter class.

Then, whenever you need to use the specific presenter, instantiate it in a view and pass the paginated object (variable) to it, and use the render() method as you would:

{!! with(new App\SmallPaginationPresenter($tasks))->render() !!}

$tasks is the variable that was sent from your controller when the view was loaded, it has to be a paginated object (->paginate())

The SmallPaginationPresenter object could be instantiated on the controller and sent to the view if needed; but for simplicity I'm doing it directly on the view (if further customisation is needed or parameters need to be sent to modify the behaviour of your custom presenter class, then it probably would be better of as an object in your controller).

CyprienRusu's avatar

This answer may be old but I figured it may help some people:

In Laravel 5.3 it is quite simple to change the template of the pagination.

First, you have to publish in your views the vendor folder that contains the pagination default view using php artisan:

php artisan vendor:publish --tag=laravel-pagination

Then when you render the links in your page, just add the name of the view that was published inside your views\vendor\pagination folder

{{ $tasks->links('vendor.pagination.bootstrap-4') }}

If you want to customise the links, just change them inside the default view

7 likes
joseevillasmil's avatar

Why dont you just use an str_replace when you print it? i used it to set a custom class like this.

        $checks = Check::orderBy('created_at', 'desc')->paginate(15);
        
        $links = $checks->links();
        
        $links = str_replace("<a", "<a class='ajax' ", $links);

that worked for me.

ArielSalvadorDev's avatar

I think that the aproach is incorrect you only need the class of the pagination of bootstrap and then wrap it in a div with custom class and then add the rules to your sass file app.scss and compile your views or if it is something easy only add the custom rule after the bootstrap css rules In your blade view

<div class="custom-pagination-brand-blue"> {{ $projects->links() }} </div>

In your css file or scss file

.custom-pagination-brand-blue>.pagination>li.active>.page-link {
    background: $brand-blue;
    border-color: $brand-blue;
    color: #fff;
}
SergheiLeonenco's avatar

Laravel 9. I can propose another approach to this problem. I looked other how the original class Illuminate\Pagination\Paginator render it's own views and found that we can pass our own view to links() function. here:


/**
     * Render the paginator using the given view.
     *
     * @param  string|null  $view
     * @param  array  $data
     * @return string
     */
    public function links($view = null, $data = [])
    {
        return $this->render($view, $data);
    }
    /**
     * Render the paginator using the given view.
     *
     * @param  string|null  $view
     * @param  array  $data
     * @return \Illuminate\Contracts\Support\Htmlable
     */
    public function render($view = null, $data = [])
    {
        return static::viewFactory()->make($view ?: static::$defaultSimpleView, array_merge($data, [
            'paginator' => $this,
        ]));
    }

That means, that we can create our view file and pass it as a parameter to {!! $models->links('tables.pagination') !!} (where table is folder and pagination is a blade view file). After that we can just copy paste content from ORIGIN tailwind.blade.php file in to our new created view file and work with it to adjust for our needs without any problem. This will work!

Please or to participate in this conversation.