Exemplo de pesquisa AJAX (View)

view.html

{% extends "baseSemNavbar.html" %}

{% load inputtags %}

{% block title %}
    <title>Consultar Colaboradores</title>
{% endblock %}

{% block scripts %}
    <script>
        $(document).ready(function(){
            //Envio do formulário
            var options = {
                success:function(resposta) {
                    resposta_json = JSON.parse(resposta);

                    //Colocando os dados retornados dentro da tabela
                    $('#mytable tbody').empty();
                    for(var i = 0; i < resposta_json.length; i++) {
                        var registro = resposta_json[i].fields

                        var data_ptbr = new Date(registro.data_de_nascimento);
                        registro.data_de_nascimento = data_ptbr.getUTCDate() + '/' + data_ptbr.getUTCMonth() + '/' + data_ptbr.getUTCFullYear();

                        linha = `<tr class="warning">
                            <td>`+registro.tipo_de_cadastro+`</td>
                            <td>`+registro.nome_completo+`</td>
                            <td>`+registro.rg+`</td>
                            <td>`+registro.data_de_nascimento+`</td>
                            <td>`+registro.cidade+`</td>
                            <td>`+registro.endereco+`</td>
                            <td>`+registro.numero+`</td>
                            <td>`+registro.bairro+`</td>
                            <td>`+registro.cep+`</td>
                            <td>`+registro.telefone+`</td>
                            <td>`+registro.email+`</td>
                            <td>`+registro.genero+`</td>
                            <td><p><button class="btn btn-info btn-xs" onclick="carregarEditForm(`+resposta_json[i].pk+`)"><span class="glyphicon glyphicon-pencil"></span></button></p></td>
                        </tr>`;
                        $('#mytable tbody').append(linha);
                    }
                },
                error:function(resposta) {
                    alert('Ocorreu um erro inesperado ao enviar informações para o servidor.');
                }
            }

            $('#pesquisar').ajaxForm(options);

            //Enviando form sem nenhum parametro para ser exibido todos os registros cadastrados
            $('#pesquisar').submit();
        });
    </script>
{% endblock %}

{% block conteudo %}
    <h1>Consultar Colaboradores</h1>
    <div class="container pesquisa-container">
    	<div class="row">
            <div id="filter-panel" class="collapse filter-panel">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <form class="form-inline" action="{% url 'crm:consulta_cadastros' %}" method="POST" role="form" id='pesquisar'>
                            <div class="form-group">
                                {% csrf_token %}
                                {% for campo in form.visible_fields %}
                                    {% if campo|input_type == 'Select' or campo|input_type == 'NumberInput' %}
                                        {{ campo.label }}
                                    {% endif %}
                                    {{ campo }}
                                {% endfor %}

                                <br><br>

                                <button type="submit" class="btn btn-default filter-col">
                                    <span class="glyphicon glyphicon-record"></span> Pesquisar
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#filter-panel">
                <span class="glyphicon glyphicon-cog"></span> Pesquisar Colaboradores
            </button>
    	</div>
        <br><br>
        <div class="row">
                <div class="col-md-12">
                    <h6 class="col-title subTitle">COLABORADORES</h6>
                    <div class="table-responsive">


                        <table id="mytable" class="table table-bordred table-striped">

                            <thead>

                            <th>Tipo</th>
                            <th>Nome</th>
                            <th>RG</th>
                            <th>Nascimento</th>
                            <th>Cidade</th>
                            <th>Endereço</th>
                            <th>Número</th>
                            <th>Bairro</th>
                            <th>CEP</th>
                            <th>Telefone</th>
                            <th>Email</th>
                            <th>Gênero</th>

                            <th>Editar</th>
                            </thead>

                            <tbody></tbody>
                            <script>
                                //Função usada pelos botões editar que são adicionados ao tbody após a chamada do ajax
                                function carregarEditForm(id) {
                                    $('#editar-modal-body').load('/crm/cadastros/'+id+'/ .form-panel', function(){
                                        $('#editarModal').modal('show');
                                    });
                                }
                            </script>

                        </table>

                        <div class="clearfix"></div>
                    </div>

                </div>
        </div>

        <!-- Modal -->
        <div class="modal fade" id="editarModal" role="dialog">
            <div class="modal-dialog">

                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Editar</h4>
                    </div>
                    <div class="modal-body" id="editar-modal-body"></div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                    </div>
                </div>

            </div>
        </div>
    </div>
{% endblock %}