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"),




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