jQuery移动表列切换不起作用[重复]

问题描述 投票:0回答:1

我已经尝试从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>

如果我错过任何补充,请建议我。

jquery django jquery-mobile
1个回答
0
投票

看来您的本地静态文件未加载。请尝试以下更改。

  1. settings.py中,在'django.contrib.staticfiles'中添加INSTALLED_APPS,并将静态目录路径定义为STATIC_URL = '/static/'。在我的情况下,此/static/目录位于django应用程序内部,并且包含所有需要的文件。
  2. 在您的html文件中,添加以下代码。

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

希望这会有所帮助。

© www.soinside.com 2019 - 2024. All rights reserved.