DataTables 无法在 Django 和 HTML 中正确显示
Posted
技术标签:
【中文标题】DataTables 无法在 Django 和 HTML 中正确显示【英文标题】：DataTables unable to show properly in Django and HTML 【发布时间】：2020-04-11 14:41:12 【问题描述】：我目前正在尝试使用 DataTables 来了解数据在我的 Django 模型中的保存方式。但是，我不确定我的 html 代码哪里出了问题，因为它没有显示它应该显示的基本模板表。目前，我的表如下所示： enter image description here
我期待它看起来像这样：enter image description here
感谢任何形式的帮助。谢谢你。以下是我与此问题相关的一些代码：
results.html（应该显示表格的页面）
% extends "users/base.html" %
% load crispy_forms_tags %
% load static %
<!------ Side nav bar ---------->
% block content %
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class='container'>
<table id='myTable' class='display' style="width:100%">
<thead>
<tr>
<th>Website</th>
<th>Title</th>
<th>Link</th>
</tr>
</thead>
% for result in results %
<tr>
<td> result.website </td>
<td> result.title </td>
<td> result.anomaly_details </td>
<td class="text-center"><a class='btn btn-info btn-xs' href="#"><span class="glyphicon glyphicon-edit"></span></a></td>
</tr>
% endfor %
</table>
</div>
% endblock content %
% block script %
<script type="text/javascript">
$(document).ready( function ()
$('#myTable').DataTable(
"order": [[ 3, "asc" ]]
);
);
</script>
% endblock script %base.html（results.html 继承了这个模板）
% load static %
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
% if title %
<title>Django Blog - title </title>
% else %
<title>Django Blog</title>
% endif %
</head>
<body>
<header class="site-header">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header ml-20">
<a class="navbar-brand" href="#">OPS Web Scrape</a>
% if user.is_authenticated %
<a class="navbar-brand" href="% url 'logout' %">Logout</a>
% endif %
</div>
</div>
</nav>
</header>
<main role="main" class="container">
<div class="row">
<div class="col-md-8">
% block content %% endblock %
</div>
</div>
</main>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
% block script %% endblock script %
</body>
</html>views.py
class PostListView(ListView):
model = ResultsTable
template_name = 'app/results.html'
context_object_name = 'results'
def get_context_data(self, *args, **kwargs):
global name
context = super().get_context_data(*args, **kwargs)
context['name'] = name
return context
【问题讨论】：
DataTables 比较挑剔。您有 3 个<th> 列，但有 4 个 <td>s。修复它，看看它是否有帮助。还将您的数据 <tr>s 包装在 <tbody> 标记中。
您好，谢谢您的建议。但是，在进行这些更改后，它似乎无法正常工作。
用您的最新更改更新您的问题，以免得到相同的答案。
【参考方案1】：
试试这个
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<div class='container'>
<table id='myTable' class='display' style="width:100%">
<thead>
<tr>
<th>Website</th>
<th>Title</th>
<th>Link</th>
<th>Action</th>
</tr>
</thead>
% for result in results %
<tr>
<td> result.website </td>
<td> result.title </td>
<td> result.anomaly_details </td>
<td class="text-center"><a class='btn btn-info btn-xs' href="#"><span class="glyphicon glyphicon-edit"></span></a></td>
</tr>
<tr>
<td> result.website </td>
<td> result.title </td>
<td> result.anomaly_details </td>
<td class="text-center"><a class='btn btn-info btn-xs' href="#"><span class="glyphicon glyphicon-edit"></span></a></td>
</tr>
% endfor %
</table>
</div>
% endblock content %
% block script %
<script type="text/javascript">
$(document).ready( function ()
$('#myTable').DataTable(
"order": [[ 3, "asc" ]]
);
);
</script>
【讨论】：
请解释您在回答中做了哪些更改以及它们为什么起作用 Bootstra 和 Jquery 未正确加载，并且 jquery 版本旧且表中缺少以上是关于DataTables 无法在 Django 和 HTML 中正确显示的主要内容，如果未能解决你的问题，请参考以下文章
DataTables 在 CRUD 操作上刷新 Django Ajax 数据
django-rest-framework-datatables 和 Django Parler 的翻译字段
django 和 dataTables - 加速查询和页面显示