个人中心
gpt4 book ai didi

jQuery 插件 (DataTables) 仅在页面刷新时正确加载

转载 作者：行者123 更新时间：2023-12-01 05:58:17 25 4
gpt4 key购买 nike

我在使用数据表时遇到问题。当我从不同页面上的链接转到带有表格的页面时，它只会加载表格的 HTML“文本”版本，没有任何 CSS 格式，也没有 JavaScript(排序、搜索等)。 )。但是，当我刷新页面时，它将完美加载。在寻找这个问题的答案后，我发现我的问题可能与 JQm 有关，因为它在页面之间切换时不会加载“整个”HTML 代码。我已经将样式和 JavaScript 标签移动到各处，但没有成功。我正在使用 DataTables 网站上找到的默认示例，并且没有更改其任何代码。

我对 jQuery 和 Web 开发总体来说是新手，所以如果有人可以帮助我，我将非常感激。另外，如果还有什么需要改变的，我绝对想学习更好的技术!

附注我只需将其链接到一个按钮即可链接到此页面。

这是我的代码:

<?php
require_once 'classes/Membership.php';
$membership = New Membership();

$membership->confirm_EventAdmin();
session_start();
$con = mysql_connect("mysql server","user","pass");
if(!$con){
    die('Could not connect: ' . mysql_error());
    }
mysql_select_db("clip_comp_server1", $con);

mysql_query("ALTER TABLE $_SESSION[adminEvent] ORDER BY Score DESC");

$query = "SELECT CandID,Score,Team FROM $_SESSION[adminEvent]";
$infoList = mysql_query($query);
?>
<!DOCTYPE HTML>
<html>
<head>
<title>Event Scores and Rankings</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <link rel="stylesheet" href="/css/themes/CLIPTheme.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="/clip_v1/DataTables-1.9.4/media/js/jquery.dataTables.js"></script>

<style type="text/css">
    h1 {
        text-align: center;
    }

    h4  {
        line-height: 1.5;
    }

    .ui-btn-active { color: white !important; background: none !important; background-color: #006600 !important;  }
    .ui-btn-inner {border: 0;}
</style>
<style type="text/css">
    @import "/clip_v1/DataTables-1.9.4/media/css/demo_table.css";
    @import "/clip_v1/DataTables-1.9.4/media/css/demo_page.css";
</style>
</head>
<body>

    <div data-role="page" data-theme="a" data-content-theme="a" id="page" data-add-back-btn="true">
    <div data-role="header" data-position="fixed">
    <div>
        <h1>Event Scores and Rankings</h1>
    </div>
    <!--a href="#" data-role="button" data-rel="back" data-icon="arrow-l" style="height: 80%"><span style="font-size: 1.75em">Back</span></a-->


        <div data-role="navbar" data-grid="c" class="ui-navbar ui-mini" role="navigation" style="border: 0;">
            <ul class="ui-grid-c">
                <li class="ui-block-a"><a href="eventRegister.php" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="a" data-inline="true" class="ui-btn ui-btn-inline ui-btn-up-c"><span class="ui-btn-inner"><span class="ui-btn-text" style="font-size: 1.5em">Registration</span></span></a></li>
                <li class="ui-block-b"><a href="teamAssigner.php" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="a" data-inline="true" class="ui-btn ui-btn-inline ui-btn-up-c"><span class="ui-btn-inner"><span class="ui-btn-text" style="font-size: 1.5em">Teams</span></span></a></li>
                <li class="ui-block-c"><a href="scoreDisplay.php" class="ui-btn ui-btn-inline ui-btn-up-c ui-btn-active" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="a" data-inline="true"><span class="ui-btn-inner"><span class="ui-btn-text" style="font-size: 1.5em">Stats</span></span></a></li>
                <li class="ui-block-d"><a href="challengeContent.php" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="a" data-inline="true" class="ui-btn ui-btn-up-c ui-btn-inline"><span class="ui-btn-inner"><span class="ui-btn-text" style="font-size: 1.5em">Challenges</span></span></a></li>
            </ul>
        </div>
    </div>
    <div data-role="content" style="border: 0">     

          <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
        <thead>
          <tr>
            <th>ID</th>
            <th>Score</th>
            <th>Rank</th>
            <th>Team</th>
          </tr>
        </thead>
        <tbody>
          <?php
            $rank = 1;
            while ($index = mysql_fetch_row($infoList)) {
                echo "<tr class=\"odd gradeA\">";
                echo "<td class=\"center\">" . $index[0] . "</td>";
                echo "<td class=\"center\">" . $index[1] . "</td>";
                echo "<td class=\"center\">" . $rank . "</td>";
                echo "<td class=\"center\">" . $index[2] . "</td>";
                echo "</tr>";
                $rank = $rank + 1;
                if ($index = mysql_fetch_row($infoList)) {
                    echo "<tr class=\"even gradeA\">";
                    echo "<td class=\"center\">" . $index[0] . "</td>";
                    echo "<td class=\"center\">" . $index[1] . "</td>";
                    echo "<td class=\"center\">" . $rank . "</td>";
                    echo "<td class=\"center\">" . $index[2] . "</td>";
                    echo "</tr>";
                    $rank = $rank + 1;
                }
            }
          ?>          
        </tbody>
        <tfoot>
          <tr>
            <th>Candidate ID</th>
            <th>Score</th>
            <th>Rank</th>
            <th>Team Assignment</th>
          </tr>
        </tfoot>
      </table>
    </div>
    </div>
<script type="text/javascript" charset="utf-8">
$(document).ready( function () {
    $('#example').dataTable();
} );
</script>
</body>
</html>

谢谢!

最佳答案

尝试在本地托管所有资源(jQmobile css、jQuery、jQmobile)。

旁注:我可以看到您正在使用 PHP。帮自己一个忙，使用 PDO 或 mysqli_* 而不是 mysql_*。更多信息请点击:Advantages Of MySQLi over MySQL

关于jQuery 插件 (DataTables) 仅在页面刷新时正确加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13336269/

25 4 0
文章推荐： php - 如何动态检查div中的单选框是否被选中
文章推荐： macos - 无法从 Docker 容器内 ping 特定子网
文章推荐： unit-testing - 使用 Jenkins 进行 UWP 单元测试
文章推荐： Java、带有 MySQL 的 LDAP 以及用户身份验证
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com