Пагинация на искомых данных в DJANGO с помощью вызова AJAX

Я реализую пагинацию на искомых данных. При нажатии на кнопку next должны отображаться следующие 5 наборов записей, а при нажатии на кнопку previous должны отображаться предыдущие 5 наборов записей с помощью ajax вызова. Теперь я сомневаюсь в том, как отправить искомое значение и номер страницы вместе с данными?

read_data.html

<!DOCTYPE html>
{% load static %}

        <h3>User List</h3>

        <div class="card-body" >
{% if word %}
  {% for words in word %}

            <table class="table table-bordered" style="width:85%;margin-right:auto;margin-left:auto;" id="exa" >
                <thead class="table-success">
                 {% endfor %}

                <tr>
                    <th scope="col">Id</th>
                    <th scope="col">Username</th>
                    <th scope="col">Name</th>
                    <th scope="col">Admin</th>
                    <th scope="col">User</th>
                    <th scope="col">Status</th>
                      <th scope="col"></th>
                      <th scope="col"></th>
                </tr>

                </thead>
{% for words in word %}
                <tbody>
                <tr>
                    <th>{{words.id}}</th>
                    <th>{{words.username}}</th>
                    <th>{{words.first_name}}</th>
                    <th>{{words.is_superuser}}</th>
                    <th>{{words.is_staff}}</th>
                    <th>{{words.is_active}}</th>

                    <th><a href="/update_user/{{words.id}}" class="btn btn-success" name="{{words.id}}" onclick="loadDiv3({{words.id}})">Update</a></th>
                    <th><a href="/password_reset/{{words.id}}" class="btn btn-success" name="{{words.id}}" onclick="loadDiv2({{words.id}})">Reset Password</a></th>


                </tr>
                {% endfor %}
                </tbody>
            </table>

<ul class="pagination">
                    {% if word.has_previous %}
                    <li class="page-item">
                        <a href="?page={{word.previous_page_number}}&results={{query}}" class="page-link" onclick="loadDiv9({{page}})" id="previous"><<< Previous</center></a>
                    </li>
                    {% endif %}


                 {% if word.has_next %}
                    <li class="page-item">
                        <a href="?page={{word.next_page_number}}&results={{query}}" class="page-link" id="next">Next >>></a>
                    </li>
                    {% endif %}
                </ul>

{% else %}
<p>no records available</p>
{% endif %}
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
            <script type="text/javascript" src="{% static 'js/pagination.js' %}"></script>

pagination.js

$("#next").on('click',function(){
   event.preventDefault();
var results=$('#results').val();
var page=$('#page_number').val();

   $.ajax({
         type:'GET',
         url:'read_data',
         data:{results:results,page:page},
         success:function(data){
            $('#con').html(data)
         },
   });
});

views.py

def read_data(request):
    if 'results' in request.GET and request.GET['results']:
        page=request.GET.get('page',1)
        results=request.GET['results']
        word = User.objects.filter(username__icontains=results)
        paginator = Paginator(word, 5)
        word=paginator.page(page)
        return render(request, "read_data.html", {'word': word,'query':results})
    else:
        return render(request, "read_data.html",{})

Вы можете получить номер текущей страницы из объекта page пагинатора, который, похоже, находится в контекстной переменной word, например, word.number - это текущая страница.

Для передачи этих данных в javascript-часть вашей программы в Django есть встроенный тег шаблона. Поместите это в ваш шаблон:

{{ word.number|json_script:"page-number-data" }}

Затем вы можете получить его в JS следующим образом:

const pageNumber = JSON.parse(document.getElementById('page-number-data').textContent);

Для получения более подробной информации смотрите документацию Django об этом теге: https://docs.djangoproject.com/en/4.0/ref/templates/builtins/#json-script

Btw. В 2022 году есть лучшие способы добавления динамических функций на ваши веб-страницы, чем JQuery. Посмотрите на htmx, где вы можете сделать все это прямо в вашем шаблоне Django без необходимости использования пользовательского javascript/JQuery.

Вернуться на верх