【发布时间】：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>标记中。 -
您好，谢谢您的建议。但是，在进行这些更改后，它似乎无法正常工作。
-
用您的最新更改更新您的问题，以免得到相同的答案。
标签： javascript jquery html django datatables