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.
No entanto se eu chamar a função serverSide() ele fica processando infinitamente e não preenche a tabela.
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:
Fico muito grato se alguém puder me apontar um caminho, estou com muitas dúvidas e pesquisando faz dois dias já.