Search code examples
laravelpaginationnav

adding links within pagination in Laravel using bootstrap and onEachSide

This is my issue I'm migrating an existing inhouse app to Laravel, the page I'm working on lists clients, I'm using bootstrap to render the pagination section and using {{ $clients->onEachSide(5)->links }} what i now wish to do and I'm at a loss on how to even begin is to add some buttons to the left of the pagination to filter the table. The rendered code for the code above is as follows:

<nav>
    <ul class="pagination">
        <li class="page-item disabled" aria-disabled="true" aria-label="« Previous"><span class="page-link" aria-hidden="true">‹</span></li>
        <li class="page-item active" aria-current="page"><span class="page-link">1</span></li>
        <li class="page-item"><a class="page-link" href="http://site.ecl/index.php/accounts?page=2">2</a></li>
        <li class="page-item"><a class="page-link" href="http://site.ecl/index.php/accounts?page=3">3</a></li>
        <li class="page-item"><a class="page-link" href="http://site.ecl/index.php/accounts?page=4">4</a></li>
        <li class="page-item"><a class="page-link" href="http://site.ecl/index.php/accounts?page=5">5</a></li>
        <li class="page-item"><a class="page-link" href="http://site.ecl/index.php/accounts?page=6">6</a></li>
        <li class="page-item"><a class="page-link" href="http://site.ecl/index.php/accounts?page=2" rel="next" aria-label="Next »">›</a></li>
    </ul>
</nav>

So I guess what I'm trying to do is add some content after the ul but within the nav. Is this possible? if not how should this be done?

thanks

Craig

Solution

  • Open your pagination file then add class to nav tag

    <nav class="row">

    like this:

                <nav class="row">
                <ul class="pagination">
                    <li class="page-item disabled" aria-disabled="true" aria-label="« Previous"><span class="page-link" aria-hidden="true">‹</span></li>
                    <li class="page-item active" aria-current="page"><span class="page-link">1</span></li>
                    <li class="page-item"><a class="page-link" href="http://site.ecl/index.php/accounts?page=2">2</a></li>
                    <li class="page-item"><a class="page-link" href="http://site.ecl/index.php/accounts?page=3">3</a></li>
                    <li class="page-item"><a class="page-link" href="http://site.ecl/index.php/accounts?page=4">4</a></li>
                    <li class="page-item"><a class="page-link" href="http://site.ecl/index.php/accounts?page=5">5</a></li>
                    <li class="page-item"><a class="page-link" href="http://site.ecl/index.php/accounts?page=6">6</a></li>
                    <li class="page-item"><a class="page-link" href="http://site.ecl/index.php/accounts?page=2" rel="next" aria-label="Next »">›</a></li>
                </ul>
                <ul class="pagination">
                    <li class="page-item"><a class="btn btn-primary" href="#">EXAMPLE</a></li>
                </ul>
            </nav>