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)

这是我在Firefox中看到的Views.py生成的Json：

[
{
"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

除了右花括号过多（假设这是复制粘贴错误）之外，您不需要任何映射或更改为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。

Answer 2

我使用下载的仪表板主题CSS来在应用程序中使用，它具有用于数据表的bootstrap4 css。由于某种原因，它无法正确渲染。我删除了这些CSS的导入，并从DataTables站点添加了这些CSS：

正在移除：

<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">

表格现在可以正确呈现。

DataTables-地图数据和校正表布局

2 个答案: