DataTable无法在Django中使用Bootstrap 4

我是DJango的新手，但有Python的经验。我正在创建一个Notes共享网站。想法是用户将上传笔记，管理员将接受它，只有接受的笔记是公开的。用户可以看到它的所有笔记，包括挂起的和被拒绝的笔记。

问题：管理员可以查看所有用户。我大量使用引导程序进行设计，因为我试图专注于后端。我使用引导表来查看用户和注释(查看注释非常有效，因为我没有在该表中使用数据表(。真正的问题是在查看用户(通过管理员(时，正常的引导表工作得很好，但它并没有被数据表修改。我以前并没有使用过数据，这是我第一次使用。

HTML代码：

view_users.html

{% extends 'admin_core.html' %} 
{% load static %} 
{% block head %}
<style>
td {
text-transform: capitalize;
}
</style>
<scirpt type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></scirpt>
<scirpt type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></scirpt>
<scirpt type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap4.min.js"></scirpt>
<link rel="stylesheet" href="cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap4.min.css">
<script>
$(document).ready(function() {
$('#user-table').DataTable();
});
</script>
{% endblock head %} 
{% block body %}
<div class="container">
<h2 class="text-center my-4">Users</h2>
<div class="table-responsive">
<table class="table table-bordered md-2" id="user-table">
<thead class="thead-dark">
<tr>
<th>Sr. No.</th>
<th>Full Name</th>
<th>Email Address</th>
<th>Contact</th>
<th>Branch</th>
<th>Role</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{% for user in users %}
<tr>
<td>{{ forloop.counter }}</td>
<td>
{{ user.user.first_name }} {{ user.user.last_name }}
</td>
<td
class="align-middle"
style="text-transform: none !important"
>
{{ user.user.username }}
</td>
<td>{{ user.contact }}</td>
<td>{{ user.branch }}</td>
<td>{{ user.role }}</td>
<td>
<a
role="button"
class="btn btn-danger btn-sml"
href="{% url 'delete_user' user.user.id %}"
onclick="return confirm('Are you sure?')"
>Delete</a
>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
{% endblock body %}

由于此页面扩展了admin_core.html，其代码为：

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required ( not really ) meta data tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Title -->
<title>Notes Sharing Site - Admin</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<!-- Our own CSS -->
<link rel="stylesheet" href="{% static 'css/style.css' %}" />
<!-- Head Block ( to extend the page ) -->
{% block head %}
{% endblock head %}
</head>
<body style="padding-top: 50px;">
<!-- Bootstrap Navigation Bar -->
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand mb-0 h1" href="{% url 'admin_home' %}">
<img src="{% static 'images/icon.png' %}" width="30" height="30" class="d-inline-block align-top" alt="">
Notes Sharing Site - Admin
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- <span class="sr-only">(current) -->
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'home' %}">Public Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'admin_home' %}">Admin Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="admin/">DJango Admin</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="view-notes" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
View Notes
</a>
<div class="dropdown-menu" aria-labelledby="view-notes">
<a class="dropdown-item" href="#">All</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Pending</a>
<a class="dropdown-item" href="#">Accepted</a>
<a class="dropdown-item" href="#">Rejected</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'view_users' %}">View Users</span></a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<a class="btn btn-danger my-2 my-sm-0" href="{% url 'logout' %}">Logout</a>
</form>
</div>
</nav>
<!-- Body Block ( to extend the page ) -->
{% block body %}
{% endblock body %}

<!-- Bootstrap JavaScript and JQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

<!--
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
-->
</body>
</html>

很抱歉拼写错误(英语不是我的第一语言(和任何noob编码问题。谢谢

您是否遵循静态文件的调试或生产版本？如果是调试的，那么你需要特殊的url路径，如果是生产的，那么在你的settings.py中需要有STATIC_ROOT路径，它指向静态目录，在那里文件将被collectstatic命令收集。

或者尝试检查添加这些

导入模拟类型mimetypes.add_type("text/css"，".css"，True(

相关内容

最新更新

热门标签：