Django поиск и пагинация с использованием ajax
Я хочу реализовать функцию поиска и пагинации в моем django проекте с помощью ajax вызова.Без ajax вызова все работает нормально.Но я хочу реализовать без перезагрузки страницы.Поэтому в консоли я получаю искомые строки (поиск осуществляется по имени пользователя) типа results:username. Я хочу отобразить совпадающие записи из базы данных mysql в виде таблицы. Всего есть 6 полей. Здесь, после поиска по имени пользователя, результат должен быть отображен под строкой поиска в виде записей таблицы.Как изменить мой скрипт и представления для получения результатов в виде записей таблицы? Здесь не нужно загружать все записи.Записи таблицы должны быть получены после поиска.
user_management.html
<form method="get" action="/home" id="form_search">
<div class="input-group">
<input name="results" id="results" type="text" placeholder="search" class="form-control form-control-lg" />
<div class="input-group-append">
<button class="btn btn-dark btn-lg" id="q" >Search</button>
</div>
</div>
</form>
</div>
</div>
</div>
<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="example" >
<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()">Update</a></th>
<th><a href="/password_reset/{{words.id}}" class="btn btn-success" name="{{words.id}}">Reset Password</a></th>
</tr>
{% endfor %}
</tbody>
</table>
{% if word.has_previous %}
<li class="page-item">
<a href="?page={{word.previous_page_number}}&results={{query}}" class="page-link"><<< 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">Next >>></a>
</li>
{% endif %}
</ul>{% else %}<p>no records available</p>{% endif %}
script.js
$("#form_search").submit(function(event){
event.preventDefault();//prevent the form submitting via browser
var formData=new FormData();
formData.append('results',results.value);
$.ajax({ //submit a request to the backend(server) using ajax
url:'home', //server script to process data
type:'GET',
data:new FormData(this).serialize,
processData:false,
contentType:false,
success:function(res)
{
console.log("Searched the username ");
for(var pair of formData.entries()){ //To inspect formData
console.log(pair[0]+':'+pair[1]);
}
},
error:function(errResponse)
{
console.log(errResponse);
}
});
return false;});
views.py
def home(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, "home.html", {'word': word,'query':results})
else:
# print("No information to show")
return render(request, "home.html",{})
urls.py
path('home',views.home,name="home"),