[英]Datatable not displaying using Django-datatable-view
我正在尝试使用 django-datatable-view 实现 datatables.js,(不要与 django-datatables-view 混淆),并且已经从零配置数据表类型开始:
http://django-datatable-view.appspot.com/zero-configuration/
我已将模板和视图类实现复制到我的应用程序和页面显示中,但没有内容。 标题存在,但内容完全不存在。 如果我将 {{ object_list }} 添加到模板中,则会显示查询集对象的截断列表,但不会呈现表。
这是我的 base.py
{% load static i18n %}
<html>
<head>
{% block static %}
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<title>{% block page_title %}{% endblock %}</title>
<meta name="description" content="{% block description %}{% endblock %}">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="application-name" content="core-Net.uk" />
{# Bootstrap #}
<!-- Bootstrap Core CSS -->
<link href="{% static 'core/site/vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<!-- toastr -->
<link href="{% static 'core/toastr/toastr.min.css' %}" rel="stylesheet" >
<!-- Custom Fonts -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<!-- Star rating -->
<link rel="stylesheet" href="{% static 'star-ratings/css/star-ratings.css' %}">
<!-- Custom CSS -->
<link href="{% static 'core/site/css/site.css' %}" rel="stylesheet" >
{# jQuery #}
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
{# datatables.js #}
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.9/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="{% static 'datatables/datatables.min.css' %}"/>
<script type="text/javascript" src="{% static 'datatables/datatables.min.js' %}></script>
{# django-datatable-view #}
<script type="text/javascript" charset="utf8" src="{% static 'core/js/datatableview.js' %}"></script>
<script type="text/javascript" charset="utf8" src="{% static 'core/js/datatableview.min.js' %}"></script>
{# code highlighting #}
<link href="{% static 'core/syntaxhighlighter/shCore.css' %}" rel="stylesheet" type="text/css" />
<link href="{% static 'core/syntaxhighlighter/shThemeDefault.css' %}" rel="stylesheet" type="text/css" />
<script src="{% static 'core/syntaxhighlighter/shCore.js' %}" type="text/javascript"></script>
<script src="{% static 'core/syntaxhighlighter/shAutoloader.js' %}" type="text/javascript"></script>
<script src="{% static 'core/syntaxhighlighter/shBrushPython.js' %}" type="text/javascript"></script>
<script type="text/javascript" charset="utf8">
datatableview.auto_initialize = true;
$(function(){
datatableview.initialize('.datatable');
});
</script>
</script>
{# test_project helpers #}
<style type="text/css">
.nav.sidebar a {
border-right: 1px solid white;
padding: 5px 10px;
}
.nav.sidebar a.active {
font-weight: bold;
background-color: #f0f0f0;
border-color: #428bca;
}
.nav.sidebar li.divider {
margin: 0.5em;
border-top: 1px solid #dfdfdf;
}
</style>
<script type="text/javascript">
$(function(){
SyntaxHighlighter.all();
var path = window.location.pathname;
$('.nav.sidebar > li > a[href="'+path+'"]').addClass("active");
});
</script>
{% endblock static %}
<!-- Favicon -->
{% block css %}{% endblock %}
{% block extra_head %}{% endblock %}
<!-- Cookie Consent -->
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#edeff5",
"text": "#838391"
},
"button": {
"background": "#4b81e8"
}
},
"theme": "edgeless",
"position": "bottom-right",
"content": {
"href": "/legal/privacy-policy/"
}
})});
</script>
</head>
这是模板:
{% extends 'base.html' %}
{% load static i18n %}
<script type="text/javascript" charset="utf8">
datatableview.auto_initialize = true;
$(function(){
datatableview.initialize('.datatable');
});
</script>
{% block content %}
{{ datatable }}
{{ object_list }}
{% endblock content %}
这是视图:
class ZeroConfigurationDatatableView(DatatableView):
model = SSTnp
template_name = 'core/sstnp_list.html'
class datatable_class(Datatable):
class Meta:
model = SSTnp
structure_template = 'datatableview/default_structure.html'
结果:
ID Name Location
<QuerySet [<SSTnp: SSTnp object (ss )>, <SSTnp: SSTnp object (ss )>, <SSTnp: SSTnp object (ss )>, <SSTnp: SSTnp object (ss )>, <SSTnp: SSTnp object (ss )>, <SSTnp: SSTnp object (ss )>, <SSTnp: SSTnp object (ss )>, <SSTnp: SSTnp object (ss )>, <SSTnp: SSTnp object (ss )>, <SSTnp: SSTnp object (ss )>, <SSTnp: SSTnp object (ss )>, '...(remaining elements truncated)...']>
因为我基本上只是直接从包的示例应用程序中复制了它,所以我希望它能够以类似的方式呈现表格。 然而,很明显,我出了点问题。
所以在经历了很多挫折之后。 我发现问题是由于我的 base.html 文件中的导入顺序造成的。 我希望这可以帮助其他人解决这个问题。
本质上,我收到了两个错误,这些错误阻止了我的表格的正确显示。
第一个错误: Error("Bootstrap's JavaScript requires jQuery")
这是因为 Bootstrap 的 jQuery 导入先于基础 jQuery 导入。
第二个错误: Deferred exception: datatable.DataTable is not a function TypeError
这同样是因为 DataTable.js jQuery 导入在基本 jQuery 导入之前。
简单的细节,但很高兴知道未来。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.