Assuming I have something need to be sent by javascript asynchronously without refreshing the page.

name.html

{%if names%}
   {%for name in names%}
       <h4>{{name}}</h4>
   {%endfor%}
{%endif%}

In name.html, I am going to send "Joe" to my Django backend for querying

let crsf = '{{csrf_token}}'
fetch('{%url "name"%}', {
credentials: 'same-origin',
headers: {
   'X-CSRFToken': crsf,
   'Content-Type': 'application/json',
   'Accept': 'application/json, text/plain, */*'},
method: 'POST', 
body: JSON.stringify({
         joe: "Joe", 
}),}).then(res=>console.log(res))

Now "Joe" has been sent to the backend

In views.py:

def name(request):
    names = Names.objects.all()
    paginator = Paginator(names, 100)
    page = request.GET.get('page')
    paged_names = paginator.get_page(page)
    context = {
                    'names':paged_names,
                }
    if request.method == 'POST':
        data = json.loads(request.body.decode("utf-8"))
        joe = data.get("joe")
        names = Names.objects.all()
        names = names.filter(name__iexact=joe)
        context = {
                    'names':names,
                }
        # return render(request, 'cool/names.html', context)

    return render(request, 'cool/names.html', context)

Now I have all names named "Joe" queried out from the database.

Question: How do I then render all "Joe"s in name.html and also making pagination work as intended assuming there are over 20k "Joes".