DataTables - Map Data and correcting table layout - ajax

Question

I am integrating the DataTables in Django 2.1. But the table is broken and I can not map the data sent by the server to JS.
This is my configuration JS:
<!-- Bootstrap CSS Section -->
<link href="{% static 'bootstrap/dist/css/bootstrap.min.css' %}" type="text/css" rel="stylesheet">
<link href="{% static 'datatables.net-bs4/css/dataTables.bootstrap4.min.css' %}" type="text/css" rel="stylesheet">
<!-- Bootstrap core JavaScript-->
<script src="{% static 'jquery/dist/jquery.min.js' %}"></script>
<script src="{% static 'bootstrap/dist/js/bootstrap.min.js' %}"></script>
<!-- Datatables plugin JavaScript-->
<script src="{% static 'datatables.net/js/jquery.dataTables.js' %}"></script>
<script src="{% static 'datatables.net-bs4/js/dataTables.bootstrap4.js' %}"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('#user-datatable').DataTable({
language: {
"sEmptyTable": "Nenhum registro encontrado",
"sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
"sInfoEmpty": "Mostrando 0 até 0 de 0 registros",
"sInfoFiltered": "(Filtrados de _MAX_ registros)",
"sInfoPostFix": "",
"sInfoThousands": ".",
"sLengthMenu": "_MENU_ Resultados por página",
"sLoadingRecords": "Carregando...",
"sProcessing": "Processando...",
"sZeroRecords": "Nenhum registro encontrado",
"sSearch": "Pesquisar",
"oPaginate": {
"sNext": "Próximo",
"sPrevious": "Anterior",
"sFirst": "Primeiro",
"sLast": "Último"
},
"oAria": {
"sSortAscending": ": Ordenar colunas de forma ascendente",
"sSortDescending": ": Ordenar colunas de forma descendente"
}
},
"processing": true,
"serverSide": true,
"ajax": {
"url": "{% url 'authentication:get_users' %}",
"type": "GET",
"dataSrc": ""
},
"columns": [
{"data": 'name'},
{"data": "email"},
{"data": "last_login"},
{"data": "is_active"},
]
});
});
</script>
My Views.py code:
#login_required
def get_users(request):
object_list = CustomUser.objects.all()
data = serializers.serialize('json', object_list)
return JsonResponse(data, safe=False)
This is the Json generated by Views.py that I can see in Firefox:
[
{
"model": "authentication.customuser",
"pk": 1,
"fields":
{"password": "1234",
"last_login": "2018-09-03T15:17:29.007Z",
"is_superuser": true,
"name": "John",
"username": "john",
"email": "john#mail.com",
"is_staff": true,
"is_active": true,
"groups": [],
"user_permissions": []}
},
{
"model": "authentication.customuser",
"pk": 2,
"fields":
{"password": "12345",
"is_superuser": false,
"name": "Ana",
"username": "ana",
"email": "ana#mail.com",
"is_staff": false,
"is_active": true,
"groups": [],
"user_permissions": []}
},
}
]
How do I map this data in JS DataTable to display correctly in columns?

Answer 1

Besides you have a closing curly brace too many (assume it is a copy paste error) you do not need any mapping or change to the JSON. It is nicely sectioned in an array of fields. The only concern is last_login which seem to be left out occasionally, defaultContent solves that :
columns: [
{ data: 'fields.name'},
{ data: 'fields.email'},
{ data: 'fields.last_login', defaultContent: ''},
{ data: 'fields.is_active'}
]
Set "serverSide": false, your script does not support serverside processing anyway. If you must have serverside processing https://github.com/izimobil/django-rest-framework-datatables seems to support at least django 2.0.

Answer 2

I use the dashboard theme css that I downloaded to use in the application and it has bootstrap4 css for datatables. For some reason it was not rendering correctly. I removed the import of these css and added those from the DataTables site:
Removing:
<link href="{% static 'datatables.net-bs4/css/dataTables.bootstrap4.min.css' %}" type="text/css" rel="stylesheet">
Adding:
<link href="{% static 'datatables/media/css/jquery.dataTables.min.css' %}" type="text/css" rel="stylesheet">
The table is now rendered correctly.