Пагинация на искомых данных в 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.