Introduction
This article describes the process of creating a paginator using Django and HTMX. And as a UI library - daisyUI. This will be a simple and no-frills paginator, the bare minimum for work. Also, this article will not describe the process of creating and configuring a virtual environment, and installing all the accompanying packages and modules.
This is how the pagination buttons will look on my new site
Also, this article is only one of three articles about creating your own paginator on Django. In this one, I will only create a base, a foundation on which we will bring this paginator to its logical conclusion. In the second, we will add filters and sorting. In the third, we will add a search field. So, let's get started.
Frontend part
I prefer to start my work with the frontend, and then we'll see how it goes ┐(シ)┌. To begin with, we'll need a page to host the paginator and templates to render the downloaded content. For example, I have a home page, I need to insert and connect the following template.
It doesn't really matter what you wrap the pluggable template in. I'm going to load articles and I want them all to be in a column, but not too wide. The important thing is that you need to pass the articles variable to the pluggable template parts/article-simple-paginator.html. Where to get it, see the next chapter, now we'll look at other components of our templates.
Source code parts/article-simple-paginator.html:
This code snippet is a flexbox in a column direction, for article cards and the paginator buttons themselves. When we connect the template for rendering article cards, we also do not forget to send the articles variable there. After that, we also connect the paginator.
Now, actually, about the paginator and its buttons, the parts/paginator-buttons.html template:
This paginator is implemented as a form with the ability to send several requests at once. And these requests differ only in the number of the next page. At the very beginning, I pass csrf_token and several inputs, they are not needed yet, but in the next article we will supplement them to implement filtering and sorting.
It, the paginator, consists of 4 buttons and one inactive button to show the current pagination page and how much is left. And this is how these buttons behave:
- Buttons >> and << send to the last and first page, respectively. If the user is already on the last or first page, these buttons are disabled.
- Buttons > and < send to the next and previous page, respectively. If the user is already on the last or first page, these buttons are disabled.
Buttons << < and >> have a value in the hx-target attribute, "#search-results", that is, the root element of displaying articles and the paginator. When clicked, the entire node is replaced, and not supplemented with new articles, as in the case of the > button.
This completes the frontend part. To summarize, you need the following templates:
- parts/article-cards.html - for rendering product cards
- parts/article-simple-paginator.html - combines the list of product cards and pagination buttons
- parts/paginator-buttons.html - interface for managing pagination
- A place where you could insert parts/article-simple-paginator.html.
Backend part
Before we start creating the backend for the paginator, we need to discuss a few details. In particular, why I will not use the REST API for pagination.
This decision is actually dictated by the need for my site to have a paginator on the main page, and not on a separate section of the site, as is already done on this site. Plus, I want people to be able to save the pagination pages via bookmarks.
Here are the contents of the views.py file, which contains the view for the home page.
This view is created as a class because it is convenient. And it works with two requests, POST and GET. The difference between them is where they render pagination pages. If a GET request renders the entire page, then a POST request renders only the necessary part, the previously known parts/article-simple-paginator.html template.
The fetch method encapsulates the common logic between GET and POST requests. In the next article, we will expand this method and add filtering with sorting, but for now, let's connect this view to urls.py:
Conclusion
It's not that hard, actually. If, of course, you compare it to what I had to write to make the paginator work on this site. And to write it, I had to write a huge canvas of JS code, and even more code to make the pagination buttons work.
I had to rewrite it even more ( ; ω ; ) later.
Also, dynamic URL replacement made life much easier. It's not hard to implement this in JS, but there are things that you just don't want to implement on your own.
And just like that, you can implement a paginator in Django using HTMX.
