Jquery移动表列切换不起作用[重复]答案

【问题标题】：Jquery mobile table column toggle not working [duplicate]Jquery移动表列切换不起作用[重复]
【发布时间】：2020-04-20 22:53:23
【问题描述】：

我尝试从 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, jquery UI , jquery-mobile js 版本互不兼容。

标签： jquery django jquery-mobile

【解决方案1】：

您的本地静态文件似乎没有加载。尝试以下更改。

在您的settings.py 中添加'django.contrib.staticfiles' 中的INSTALLED_APPS 并将静态目录路径定义为STATIC_URL = '/static/'。在我的例子中，这个/static/ 目录位于 django 应用程序中，它包含所有必需的文件。
在您的 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>

希望这会有所帮助。

【讨论】：