1

Estou realizando a passagem de linhas que irão compor uma tabela no padrão do DataTables através do Django.

Se eu fizer a inserção na DOM, consigo tratar normalmente chamando a função do DataTables atraves do JS.

O problema é que vou precisar atualizar essa tabela, assim sendo eu decidi fazer a passagem das linhas no formato JSON, pois posso fazer uma requisição AJAX para o meu backend, pegar o novo JSON e atualizar a tabela.

No meu views.py eu estou retornando um JSON na requisição POST:

from django.views.generic.list import ListView
from django.http import JsonResponse
from django.shortcuts import render

from django.utils import timezone

from .models import Convenio


class ListaConveniosView(ListView):
    model = Convenio
    template_name = '_convenio01.html'

    # def get_context_data(self, **kwargs):
    #     print(self)
    #     context = super().get_context_data(**kwargs)
    #     context['now'] = timezone.now()
    #     return context

    def get(self, request, *args, **kwargs):
        print("O GET:")

        if request.is_ajax():
            return JsonResponse({'method': 'get'}, status=200)
        else:
            return render(request, self.template_name)

    def post(self, request, *args, **kwargs):     
        print("O POST")
        card_text = request.POST.get('uma_chave')
        print(card_text)
        return JsonResponse(            
            {
                "data": 
                [
                    {
                    "codigo": "1",
                    "titulo": "Tiger",
                    "faturavel": "0"
                    },
                    {
                    "codigo": "21",
                    "titulo": "HHH",
                    "faturavel": "1"
                    }
                ]
            },
            status=200)

Pra brincar eu deixei também um arquivo de texto data.json com os dados:

{
"data": 
[
    {
    "codigo": "1",
    "titulo": "Unimed",
    "faturavel": "0"
    },
    {
    "codigo": "2",
    "titulo": "Outro",
    "faturavel": "1"
    }
]
}

Meu front esta recebendo um Javascript com duas funções. A primeira envia para o datatables o caminho do arquivo data.json, que pega a alimenta a tabela.

function dataVai(passou=0, listaJson) {
    console.log('Passou = ' + passou)
    console.log('listaJson = ' + listaJson)

    var convenio_root = $("#link-assets")[0].href
    var link_static = $("#link-static")[0].href
    console.log(convenio_root)

    if(passou===0){
        listaJson = link_static + 'rotinas/convenios/data.json'
    }

    console.log('ListaFull: ' +listaJson)

    // Coloca uma caixa de busca em cada coluna
    $('#convenioLista tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );

    // DataTable
    var table = $('#convenioLista').DataTable({

        "language": {
            "url": "//cdn.datatables.net/plug-ins/1.10.22/i18n/Portuguese-Brasil.json"
        },
        'ajax': listaJson,
        "columns": [
            { "data": "codigo" },
            { "data": "titulo" },
            { "data": "faturavel" }
        ],
        // dom: 'Bfrtip',
        buttons: [
            'copy', 'excel', 'pdf'
        ],
        initComplete: function () {
            // Executa a busca
            this.api().columns().every( function () {
                var that = this;

                $( 'input', this.footer() ).on( 'keyup change clear', function () {
                    if ( that.search() !== this.value ) {
                        that
                            .search( this.value )
                            .draw();
                    }
                } );
            } );                
        }
    });

}

A segunda função faz um post que é recebido pela minha view lá em cima e vai ter o JSON que foi retornado por ela na variável resposta.

function serverSide() {
    $('#convenioLista').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "",
            "type": "POST",
            data: {
                uma_chave: 'um texto enviado por ajax',
                csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val()
            },
            success: function(response){
                resposta = response
                console.log('Deu certo meu amigo, a resposta voltou!')
                console.log(response)
                //Aqui eu tenho resposta, como o meu json. Só preciso chamar o DataTables e repassar essa variável/JSON
                
                
            }
        },
        "columns": [
            { "data": "codigo" },
            { "data": "titulo" },
            { "data": "faturavel" }
        ]
    } )
}

Quando abro o console do chrome, se eu chamar a função dataVai(), minha tabela é preenchida.

DataTables - dataVai()

No entanto se eu chamar a função serverSide() ele fica processando infinitamente e não preenche a tabela.

DataTables - serverSide()

Tenho impressão que o problema é com o formato de dados que o Django devolve. Acredito que não está no padrão esperado pelo DataTables.

Fiz um console.log jogando na variável resposta: Variável Resposta

Fico muito grato se alguém puder me apontar um caminho, estou com muitas dúvidas e pesquisando faz dois dias já.

1 Resposta 1

0

Consegui resolver o problema.

Tive que mudar o formato dos dados de retorno na minha view:

from django.views.generic.list import ListView
from django.http import JsonResponse
from django.shortcuts import render

from django.utils import timezone

from .models import Convenio


class ListaConveniosView(ListView):
    model = Convenio
    template_name = '_convenio01.html'

    # def get_context_data(self, **kwargs):
    #     print(self)
    #     context = super().get_context_data(**kwargs)
    #     context['now'] = timezone.now()
    #     return context

    def get(self, request, *args, **kwargs):
        print("O GET:")

        if request.is_ajax():
            return JsonResponse({'method': 'get'}, status=200)
        else:
            return render(request, self.template_name)

    def post(self, request, *args, **kwargs):     
        print("O POST")
        card_text = request.POST.get('uma_chave')
        print(card_text)

        lista = [[ "99", "SUS", "1"],
                [ "88", "Unimed", "0"]]

        return JsonResponse(            
            {
                "data": lista
            },
            status=200, safe=False)

Depois de fazer uma requisição POST, eu recebo os dados numa variável dataSet e repasso para a função, exemplo:

var dataSet = [
    [ "55", "Architect", "1"],
    [ "77", "Accountant", "0"]
];

function dt() {
    $('#convenioLista').DataTable( {
        data: dataSet,
        columns: [
            { title: "Código" },
            { title: "Título" },
            { title: "Faturável" }
        ]
    } );
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .