DataTables - Картографические данные и корректирующий макет таблицы.

Question

Я интегрирую DataTables в Django 2.1. Но таблица не работает, и я не могу отобразить данные, отправленные сервером в JS.

Это моя конфигурация 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>

Мой код Views.py:

@login_required
def get_users(request):
    object_list = CustomUser.objects.all()
    data = serializers.serialize('json', object_list)
    return JsonResponse(data, safe=False)

Это Json, сгенерированный Views.py, который я вижу в 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": []}
        }, 
 }
 ]

Как мне сопоставить эти данные в JS DataTable для правильного отображения в столбцах?

Answer 1

Я использую загруженную тему dssboard для использования в приложении, и у нее есть bootstrap4 css для таблиц данных. По какой-то причине это не правильно рендеринг. Я удалил импорт этих CSS и добавил их с сайта DataTables:

Удаление:

<link href="{% static 'datatables.net-bs4/css/dataTables.bootstrap4.min.css' %}" type="text/css" rel="stylesheet">

Добавление:

<link href="{% static 'datatables/media/css/jquery.dataTables.min.css' %}" type="text/css" rel="stylesheet">

Таблица теперь отображается правильно.

Answer 2

Кроме того, у вас слишком много закрывающей фигурной скобки (предположим, что это ошибка копирования-вставки), вам не нужно отображать или изменять JSON. Он красиво разделен на массив fields. Единственное беспокойство - это last_login, который, кажется, иногда пропускается, defaultContent решает, что:

columns: [
  { data: 'fields.name'},
  { data: 'fields.email'},
  { data: 'fields.last_login', defaultContent: ''},
  { data: 'fields.is_active'}    
]

Установите "serverSide": false, ваш скрипт все равно не поддерживает обработку на сервере. Если вам нужна обработка на стороне сервера, https://github.com/izimobil/django-rest-framework-datatables, кажется, поддерживает по крайней мере django 2.0.