DataTables -映射数据和更正表格布局
DataTables -映射数据和更正表格布局
提问于 2018-09-03 19:57:29
我在Django 2.1中集成了DataTables。但是表坏了，我无法将服务器发送的数据映射到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)这是由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中映射此数据以正确显示在列中？
回答 2
Stack Overflow用户
发布于 2018-09-03 20:38:58
此外，右花括号太多(假设是复制粘贴错误)，不需要对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似乎至少支持Django2.0。
Stack Overflow用户
发布于 2018-09-04 01:09:44
我使用在应用程序中下载的仪表板主题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">现在，该表已正确呈现。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52155607
复制相关文章
相似问题
腾讯云开发者
