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

Posted

技术标签:

【中文标题】Jquery移动表列切换不起作用[重复]【英文标题】：Jquery mobile table column toggle not working [duplicate] 【发布时间】：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 版本互不兼容。 【参考方案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>

希望这会有所帮助。

【讨论】：

以上是关于Jquery移动表列切换不起作用[重复]的主要内容，如果未能解决你的问题，请参考以下文章

根据值更改表列颜色在剃须刀文件中使用 jquery 不起作用

jQuery .next('div') 切换不起作用

第二次单击时的 jQuery 不起作用 - 移动设备

Laravel 导航栏切换在 bootstrap 4.4.1 和 jquery 3.3 上不起作用

Jquery UI Touch Punch点击事件在Android应用程序中不起作用[重复]

jquery next plus 切换不起作用。这是一个错误吗？