Теперь добавим возможность сортировать книги.

Добавим функцию сортировки book_list_sort() в файл books\views.py:

@require_http_methods(['GET'])
def book_list_sort(request, filter, direction):
    if filter == "id":
        if direction == 'ascend':
            book_list = Book.objects.order_by('pk')
        else:
            book_list = Book.objects.order_by('-pk')
    else:
        if direction == 'ascend':
            book_list = Book.objects.order_by(filter)
        else:
            book_list = Book.objects.order_by('-' + filter)
    return render(request, 'partial_book_list.html', {'book_list': book_list})

Добавим маршрут для данной функции, отредактируем файл books\urls.py:

from django.urls import path
from .views import book_list, create_book, update_book_details, book_detail, delete_book, update_book_status, \
    book_list_sort

urlpatterns = [
    path("", book_list, name="book_list"),
    path("create_book/", create_book, name="create_book"),
    path("update_book_details/<int:pk>/", update_book_details, name="update_book_details"),
    path("book_detail/<int:pk>/", book_detail, name="book_detail"),
    path("delete_book/<int:pk>/", delete_book, name="delete_book"),
    path("update_book_status/<int:pk>/", update_book_status, name="update_book_status"),
    path("book_list_sort/<filter>/<direction>/", book_list_sort, name="book_list_sort"),
]

Теперь подключим стрелочки сортировки в заголовке таблицы, в файле шаблона templates\base.html:

                    <thead>
                    <tr>
                        <!-- Заголовки столбцов таблицы -->

                        <!-- Заголовок номера книги -->
                        <th scope="col" style="width: 10%">
                            <small>
                                No.
                                <a href=""
                                   hx-get="{% url 'book_list_sort' filter='id' direction='ascend' %}"
                                   hx-target="#book-list"
                                   hx-swap="innerHTML">
                                    ⇓
                                </a>
                                <a href=""
                                   hx-get="{% url 'book_list_sort' filter='id' direction='descend' %}"
                                   hx-target="#book-list"
                                   hx-swap="innerHTML">
                                    ⇑
                                </a>
                            </small>
                        </th>

                        <!-- Заголовок названия книги -->
                        <th scope="col" style="width: 26%">
                            <small>
                                Title
                                <a href=""
                                   hx-get="{% url 'book_list_sort' filter='title' direction='ascend' %}"
                                   hx-target="#book-list"
                                   hx-swap="innerHTML">
                                    ⇓
                                </a>
                                <a href=""
                                   hx-get="{% url 'book_list_sort' filter='title' direction='descend' %}"
                                   hx-target="#book-list"
                                   hx-swap="innerHTML">
                                    ⇑
                                </a>
                            </small>
                        </th>

                        <!-- Заголовок автора книги -->
                        <th scope="col" style="width: 26%">
                            <small>
                                Author
                                <a href=""
                                   hx-get="{% url 'book_list_sort' filter='author' direction='ascend' %}"
                                   hx-target="#book-list"
                                   hx-swap="innerHTML">
                                    ⇓
                                </a>
                                <a href=""
                                   hx-get="{% url 'book_list_sort' filter='author' direction='descend' %}"
                                   hx-target="#book-list"
                                   hx-swap="innerHTML">
                                    ⇑
                                </a>
                            </small>
                        </th>

                        <!-- Заголовок цены книги -->
                        <th scope="col" style="width: 11%">
                            <small>
                                Price ($)
                                <a href=""
                                   hx-get="{% url 'book_list_sort' filter='price' direction='ascend' %}"
                                   hx-target="#book-list"
                                   hx-swap="innerHTML">
                                    ⇓
                                </a>
                                <a href=""
                                   hx-get="{% url 'book_list_sort' filter='price' direction='descend' %}"
                                   hx-target="#book-list"
                                   hx-swap="innerHTML">
                                    ⇑
                                </a>
                            </small>
                        </th>

                        <!-- Заголовок статуса книги -->
                        <th scope="col" style="width: 11%">
                            <small>
                                Status
                                <a href=""
                                   hx-get="{% url 'book_list_sort' filter='read' direction='descend' %}"
                                   hx-target="#book-list"
                                   hx-swap="innerHTML">
                                    ⇓
                                </a>
                                <a href=""
                                   hx-get="{% url 'book_list_sort' filter='read' direction='ascend' %}"
                                   hx-target="#book-list"
                                   hx-swap="innerHTML">
                                    ⇑
                                </a>
                            </small>
                        </th>

                    </tr>
                    </thead>

 
HTMX атрибуты для кнопок сортировки ⇓ и ⇑:

• hx-get="{% url 'book_list_sort' filter='id' direction='ascend' %} определяет адрес запроса
  /book_list_sort/id/ascend/ и тип запроса - GET, сортировка по-возрастанию.

• hx-get="{% url 'book_list_sort' filter='id' direction='descend' %} определяет адрес запроса
  /book_list_sort/id/descend/ и тип запроса - GET, сортировка по-убыванию.

Ответ AJAX запроса будет добавлен в целевой элемент <tbody id="book-list">, с заменой дочерних элементов.
То есть будут заменены все строки в теле таблицы, на отсортированные строки.

Попробуем отсортировать наши записи по названию книги:

Как мы видим, сортировка прекрасно работает, без необходимости каждый раз обновлять страницу:

Вот такими простыми методами мы добавили сортировку в наш проект, последним же этапом будет привести наш проект к красивому внешнему виду.