django fbv AJAX with pagination -

i'm trying create crud using ajax pagination, when try add new book, exception empty in foreach of books, when refresh page works , show new register.

views.py:

from django.core.paginator import paginator, emptypage, pagenotaninteger   def livro(request):     livros = livro.objects.all().order_by('-id')     paginator = paginator(livros, 5)      page = request.get.get('page', 1)     try:         registers = paginator.page(page)     except pagenotaninteger:         # if page not integer, deliver first page.         registers = paginator.page(1)     except emptypage:         # if page out of range (e.g. 9999), deliver last page of results.         registers = paginator.page(paginator.num_pages)      return render(request, 'livros.html', {'registers': registers})  def salvar_form_livro(request, form, template_name):     data = dict()     if request.method == 'post':         if form.is_valid():             form.save()             data['form_is_valid'] = true             #import pdb; pdb.set_trace()             livros = livro.objects.all().order_by('-id')             data['html_book_list'] = render_to_string('listalivros.html', {                 'livros': livros             })         else:             data['form_is_valid'] = false     context = {'form': form}     data['html_form'] = render_to_string(template_name, context, request=request)     return jsonresponse(data)  def criarlivro(request):     if request.method == 'post':         form = livroform(request.post)     else:         form = livroform()     return salvar_form_livro(request, form, 'cadastralivro.html') 

template.html

{% livro in registers %}     <tr>         <td>{{ livro.id }}</td>         <td>{{ livro.titulo }}</td>         <td>{{ livro.autor }}</td>         <td>{{ livro.get_tipolivro_display }}</td>         <td>{{ livro.datapublicacao }}</td>         <td>{{ livro.paginas }}</td>         <td>{{ livro.preco }}</td>         <td>             <button type="button"                     class="btn btn-warning btn-sm js-update-book"                     data-url="{% url 'livro_alterar' livro.id %}">                     <span class="glyphicon glyphicon-pencil"></span> alterar             </button>             <button type="button"                     class="btn btn-danger btn-sm js-delete-book"                     data-url="{% url 'livro_deletar' livro.id %}">                     <span class="glyphicon glyphicon-trash"></span> deletar             </button>         </td>     </tr> {% empty %}     <tr>         <td colspan="7" class="text-center bg-warning">não há livros cadastrados</td>     </tr> {% endfor %} 

index.js:

$(function () {      /* functions */      var loadform = function () {         var btn = $(this);         $.ajax({             url: btn.attr("data-url"),             type: 'get',             datatype: 'json',             beforesend: function () {                 $("#modal-book").modal("show");             },             success: function (data) {                 $("#modal-book .modal-content").html(data.html_form);             }         });     };      var saveform = function () {         var form = $(this);         $.ajax({             url: form.attr("action"),             data: form.serialize(),             type: form.attr("method"),             datatype: 'json',             success: function (data) {                 if (data.form_is_valid) {                     $("#book-table tbody").html(data.html_book_list);                     $("#modal-book").modal("hide");                 }                 else {                     $("#modal-book .modal-content").html(data.html_form);                 }             }         });         return false;     };       /* binding */      // create book     $(".js-create-book").click(loadform);     $("#modal-book").on("submit", ".js-book-create-form", saveform);      // update book     $("#book-table").on("click", ".js-update-book", loadform);     $("#modal-book").on("submit", ".js-book-update-form", saveform);      // delete book     $("#book-table").on("click", ".js-delete-book", loadform);     $("#modal-book").on("submit", ".js-book-delete-form", saveform);  }); 

result: