我已经尝试从jquery-mobile.js实现列切换。我引用了w3school中的代码。当我将其集成到django时,列切换不会出现。
当我在本地提供jquery,jquery-mobile文件时,代码无法正常工作。如果我提供外部链接,其工作。jQuery v3.3.1,jquery.mobile-1.4.5
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Project</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{% static 'bfslite/css/jquery.mobile-1.4.5.min.css' %}">
<script src="{% static 'bfslite/js/jquery.min.js"></script>
<script src="{% static 'bfslite/js/jquery.mobile-1.4.5.min.js' %}"></script>
<script src="{% static 'bfslite/js/sorttable.js' %}"></script>
<script src="{% static 'bfslite/js/bootstrap.min.js' %}"></script>
<script src="{% static 'bfslite/js/popper.min.js' %}"></script>
<link rel="stylesheet" type="text/css" media="screen" href="{% static 'bfslite/css/main.css' %}" />
<link rel="stylesheet" type="text/css" media="screen" href="{% static 'bfslite/css/bootstrap.min.css' %}" />
<link rel="stylesheet" type="text/css" media="screen" href="{% static 'bfslite/chosen/docsupport/style.css' %}">
<link rel="stylesheet" type="text/css" media="screen" href="{% static 'bfslite/chosen/docsupport/prism.css' %}">
<link rel="stylesheet" type="text/css" media="screen" href="{% static 'bfslite/chosen/chosen.css' %}">
<link rel="stylesheet" type="text/css" media="screen" href="{% static 'bfslite/css/jquery-ui.css' %}">
<script src="{% static 'bfslite/js/jquery-ui.js' %}"></script>
</head>
<body>
<div class="container-fluid table-responsive">
<table class="sortable table table-striped table-hover table-sm" data-role="table" data-mode="columntoggle"
id="my-table">
<thead>
<tr>
<th>Project Code</th>
<th>Project Name</th>
<th>Date Created</th>
<th data-priority="1">Type</th>
<th data-priority="2">Internal Status</th>
<th data-priority="3">External Status</th>
</tr>
</thead>
<tbody>
{% for entry in entry %}
<tr class="content">
<td>{{ entry.bfs_project_code }}</td>
<td>{{ entry.bfs_project_name }}</td>
<td>{{ entry.bfs_project_created_date }}</td>
<td>{{ entry.bfs_project_type }}</td>
<td>{{ entry.bfs_project_internal_status }}</td>
<td>{{ entry.bfs_project_external_status }}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
如果我错过任何补充,请建议我。
看来您的本地静态文件未加载。请尝试以下更改。
settings.py
中,在'django.contrib.staticfiles'
中添加INSTALLED_APPS
,并将静态目录路径定义为STATIC_URL = '/static/'
。在我的情况下,此/static/
目录位于django应用程序内部,并且包含所有需要的文件。<head>
{% load static %}
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="{% static 'bfslite/js/jquery-1.11.3.min.js' %}"></script>
<script src="{% static 'bfslite/js/jquery-1.11.3.min.js' %}"></script>
<script src="{% static 'bfslite/js/jquery.mobile-1.4.5.min.js' %}"></script>
</head>
希望这会有所帮助。