Javascript 数据表无法在Django和HTML中正确显示

我目前正在尝试使用DataTables来解释数据如何保存在Django模型中。但是，我不确定我的HTML代码哪里出了问题，因为它没有显示它应该显示的基本模板表。当前，我的表如下所示：

我希望它看起来像这样：

感谢任何形式的帮助。非常感谢。下面是我与此问题相关的一些代码：

html（应该显示表格的页面）

{%extends“users/base.html”%}
{%load crispy_forms_tags%}
{%load static%}
{%block content%}
网站
标题
链接
{结果中的结果为%}
{{result.website}
{{result.title}
{{result.u details}
{%endfor%}
{%endblock内容%}
{%block script%}
$（文档）.ready（函数（）{
$（'#myTable'）。数据表({
“订单”：[[3，“asc”]]
});
} );
{%endblock script%}

试试这个

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

网站
标题
链接
行动
{结果中的结果为%}
{{result.website}
{{result.title}
{{result.u details}
{{result.website}
{{result.title}
{{result.u details}
{%endfor%}
{%endblock内容%}
{%block script%}
$（文档）.ready（函数（）{
$（'#myTable'）。数据表({
“订单”：[[3，“asc”]]
});
} );

DataTables相当挑剔。您有3个

列，但有4个

列。解决这个问题，看看是否有帮助。另外，请将您的数据

包装在

标签中。您好，谢谢您的建议。但是，在这些更改之后，它似乎不起作用。请使用最新的更改更新您的问题，以便您不会得到相同的答案。请解释您在答案中所做的更改，以及为什么它们不能正确加载workBootstra和Jquery，并且Jquery的版本很旧并且在表中丢失