How do I customize the pagination items in this Laravel 8 application? - php

Question

I am working on a blogging application in Laravel 8.
The ArticlesController controller I have this method to display the paginated articles:
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
use App\Models\ArticleCategory;
use App\Models\Article;
use App\Models\Comment;
class ArticlesController extends FrontendController {
// Articles per page
protected $per_page = 12;
public function index(Request $request) {
// Search query
$qry = $request->input('search');
$articlesQuery = Article::where('title', 'like', '%' . $qry . '%')
->orWhere('short_description', 'like', '%' . $qry . '%')
->orWhere('content', 'like', '%' . $qry . '%');
// Search results count
if ($qry) {
$article_count = $articlesQuery->count();
}
$articles = $articlesQuery->orderBy('id', 'desc')->paginate($this->per_page);
$featured_articles = Article::where('featured', 1)->orderBy('id', 'desc')->get();
return view('themes/' . $this->theme_directory . '/templates/index',
array_merge($this->data, [
'search_query' => $qry,
'articles' => $articles,
'featured_articles' => $featured_articles,
'article_count' => $article_count ?? null
])
);
}
}
The pagination, in the plain HTML template, looks like this:
<nav class="pgn">
<ul>
<li>
<a class="pgn__prev" href="#0">Prev</a>
</li>
<li><a class="pgn__num" href="#0">1</a></li>
<li><span class="pgn__num current">2</span></li>
<li><a class="pgn__num" href="#0">3</a></li>
<li><span class="pgn__num dots">…</span></li>
<li><a class="pgn__num" href="#0">4</a></li>
<li>
<a class="pgn__next" href="#0">Next</a>
</li>
</ul>
</nav>
The goal
The goal is to keep the pagination structure above, in Laravel's Blade.
The problem
The code below works for the "Next" and "Prev" buttons, but not the links in between.
<nav class="pgn">
<ul>
<li>
<a class="pgn__prev" href="{{ $articles->withQueryString()->previousPageUrl() }}">Prev</a>
</li>
{!! $articles->withQueryString()->links() !!}
<li>
<a class="pgn__next" href="{{ $articles->withQueryString()->nextPageUrl() }}">Next</a>
</li>
</ul>
</nav>
Questions
What causes this bug?
What is the easiest fix?

Answer 1

To create a custom pagination, I'd recommend to make use of a custom "view".
Basically, what would you have to do (which you have already done), is define a limit, and then basically do the following:
you create your view file (which will be the custom paginator) - name it however you want to name it. I'll name it custom.blade.php
This view has to be created after running the command: php artisan vendor:publish --tag=laravel-pagination
here you can find a bit more in the documentation about it: https://laravel.com/docs/9.x/pagination#customizing-the-pagination-view
#if ($paginator->onFirstPage())
<li class="disabled"><span>← Previous</span></li>
#else
<li>
<a class="pgn__prev" href="{{ $articles->withQueryString()->previousPageUrl() }}">Prev</a>
</li>
#endif
#foreach ($elements as $element)
#if (is_string($element))
<li class="disabled"><span>{{ $element }}</span></li>
#endif
#if (is_array($element))
#foreach ($element as $page => $url)
#if ($page == $paginator->currentPage())
<li class="active my-active"><span>{{ $page }}</span></li>
#else
<li>{{ $page }}</li>
#endif
#endforeach
#endif
#endforeach
#if ($paginator->hasMorePages())
<li>
<a class="pgn__next" href="{{ $articles->withQueryString()->nextPageUrl() }}">Next</a>
</li>
#else
<li class="disabled"><span>Next</span></li>
#endif
And finally, on the view where you want to make use of the custom pagination:
{{ $articles->links(‘path.pagination.custom') }}
(just make sure to have the correct path)
edit: It's a bit hard for me to give a definitive answer without looking at the project itself, but I hope this at least helps somehow.