使用jQuery floatThead插件的问题

时间:2014-06-06 17:07:26

标签: jquery

因此,我尝试创建一个页面顶部,根据数据库中的信息显示表格。我希望在滚动时让表头保持不变。我在其他帖子上看到,floatThead是一个很受欢迎的选项,它看起来就像我正在寻找的那样,我似乎无法让它发挥作用。

这是生成表格的页面的代码。     

    $i =0;

    require '../scripts/dbconnection.php';
    include '../scripts/displayNav.php';

    $username = $_SESSION['username'];

    if (!$username) header('Location: ../index.php');

    $userFullname = $_SESSION['fullName'];
    $accessLevel = $_SESSION['accessLevel'];

    $result = mysql_query("show tables"); // run the query and assign the result to $result
?>

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="../css/nav.css">
        <link rel="stylesheet" type="text/css" href="../css/main.css">
        <link rel="stylesheet" type="text/css" href="../css/viewDB.css">
        <script src="../js/js/jquery-1.10.2.js" type="text/javascript"></script>
        <script type="text/javascript" src="../js/script.js"></script>
        <script type="text/javascript" src="../js/jquery.floatThead.min.js"></script>
        <script type="text/javascript" src="../js/viewDB.js"></script>
        <script type="text/javascript" src="../js/sorttable.js"></script>
    </head>

    <header>
        <title>Database</title>
    </header>
    <body>
        <?php
            echo displayNav();
        ?>

        <div class="sidebarleft">
            <div class ="sidebarleft-inner">
                <div id="tableNames">
                    <ul>
                        <?php
                            while($table = mysql_fetch_array($result)) { // go through each row that was returned in $result
                                if ($table[0] != 'userInformation' && $table[0] != 'DataSubmissions'){
                                    echo '<li><a href="viewDB.php?id='.$i.'">'.$table[0].'</a></li>';
                                    $tableNames [$i] = $table[0];
                                    $i++;
                                }
                            }
                        ?>
                    </ul>
                </div>
            </div>
        </div>

        <div class="main-content">
            <div class="main-content-inner">
                <form action="updateInfo.php" method="get">
                    <?php
                        $idNum = $_GET['id'];
                        displayTable($tableNames,$idNum);
                    ?>
                </form>
            </div>
        </div>
    </body>

</html>

<?php
    function displayTable (&$tableNames, &$idNum){
        $tableName = $tableNames[$idNum];

        $tableQuery = 'SELECT * FROM '.$tableName;
        $tableResult = mysql_query($tableQuery);

        $x = 0;

        $fields = mysql_query("SHOW columns FROM ".$tableName);

        echo '<table class="table demo1 floatThead" border="0">';
            echo '<thead>';
                echo '<tr>';
                while($row = mysql_fetch_array($fields))
                {
                    echo '<th>';
                        echo $row["Field"];
                        $tableNames[$x] = $row["Field"];
                    echo '</th>';
                    $x++;
                }
                echo '</tr>';
            echo '</thead>';

        while ($row=mysql_fetch_array($tableResult)){
            echo "<tr>";
                for ($k = 0;$k < $x;$k++){
                    if ($tableNames[$k] == "StudyName"){
                        echo "<td><a href='showStudyInfo.php?studyname=".$row[$tableNames[$k]]."'>".$row[$tableNames[$k]]."</td>";
                    }
                    else{
                        echo "<td>".$row[$tableNames[$k]]."</td>";
                    }
                }
            echo "</tr>";
        }
        echo '</table>';
    }
?>

我正在努力实现插件

$(document).ready(function() {
    $('table').floatThead({
    scrollingTop: pageTop,
    useAbsolutePositioning: true,
    scrollContainer: function($table){
        return $table.closest(".main-content-inner");
    }
    });
});

有什么想法吗?

0 个答案:

没有答案