Question

这是我的index.php，点击排序时首先工作

<html>   
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="jquery-latest.js"></script>
    <script type="text/javascript" src="jquery.tablesorter.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#tablesorter-demo").trigger("update");
            $("#tablesorter-demo").tablesorter({
                sortList: [
                    [0, 0],
                    [2, 1]
                ],
                widgets: ['zebra']
            });
            $("#options").tablesorter({
                sortList: [
                    [0, 0]
                ],
                headers: {
                    3: {
                        sorter: false
                    },
                    4: {
                        sorter: false
                    }
                }
            });
        });


        function showUser(str) {
            if (str == "") {
                document.getElementById("subjtable").innerHTML = "";
                return;
            }
            if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            } else { // code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    document.getElementById("subjtable").innerHTML = xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET", "getSubject.php?q=" + str, true);
            xmlhttp.send();
        }
    </script>
    <title>Faculty Subject</title>
</head>

<body>
    <form>
         <h1 align="center">Faculty Subject Offerings</h1>

        <br/>
         <h1>Faculty</h1>

         <h1>
        <select name="typeselector" onchange="showUser(this.value)">
            <option value="Arts">Arts</option>
            <option value="Science">Science</option>
        </select>
    </h1>

        <div id="subjtable">
            <table id="tablesorter-demo" class="tablesorter" border="1" cellpadding="0" cellspacing="1">
                <thead>
                    <tr>
                        <th>Subject Code</th>
                        <th>Subject Title</th>
                        <th>Lecturer</th>
                        <th>Description</th>
                    </tr>
                </thead>
                <tbody>
                <?php
                $mysqli = new mysqli( 'localhost', 'root', '9876543210', 'jye');
                $stmt = $mysqli->prepare("select subjectcode,title,lecturer,description from erehwonsubjects");
                $stmt->execute();
                $stmt->bind_result($subjcode,$subjtitle,$lecturer,$description);
                while($stmt->fetch()) {
                    echo <<<TABLE
                    <tr>
                        <td>$subjcode</td>
                        <td>$subjtitle</td>
                        <td>$lecturer</td>
                        <td>$description</td>
                        </tr>
                    TABLE;
                } ?>
                </tbody>
            </table>
        </div>
    </form>
</body>

运行此php并连接数据库时它正在运行。再提一次。在这个PHP中完美地工作

然后我更改了我的选择框值，它会将方法POST发送到另一个php namegetSubject.php

<html>  
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script type="text/javascript" src="jquery-latest.js"></script>
        <script type="text/javascript" src="jquery.tablesorter.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $("#tablesorter-demo").trigger("update");
                $("#tablesorter-demo").tablesorter({
                    sortList: [
                        [0, 0],
                        [2, 1]
                    ],
                    widgets: ['zebra']
                });
                $("#options").tablesorter({
                    sortList: [
                        [0, 0]
                    ],
                    headers: {
                        3: {
                            sorter: false
                        },
                        4: {
                            sorter: false
                        }
                    }
                });
            });
        </script>
    </head>
    
    <body>
        <div id="subjtable">
            <table id="tablesorter-demo" class="tablesorter" border="1" cellpadding="0" cellspacing="1">
                <thead>
                    <tr>
                        <th>Subject Code</th>
                        <th>Subject Title</th>
                        <th>Lecturer</th>
                        <th>Description</th>
                    </tr>
                </thead>
                <tbody>
                    <?php $q=$ _GET[ "q"]; $mysqli=n ew mysqli( 'localhost', 'root', '9876543210', 'jye'); $stmt=$ mysqli->prepare("select subjectcode,title,lecturer,description from erehwonsubjects where course = '".$q."'"); $stmt->execute(); $stmt->bind_result($subjcode,$subjtitle,$lecturer,$description); while($stmt->fetch()) { echo
                    <<<TABLE <tr>
                        <td>$subjcode</td>
                        <td>$subjtitle</td>
                        <td>$lecturer</td>
                        <td>$description</td>
                        </tr>TABLE; } ?></tbody>
            </table>
        </div>
    </body>
</html>

然后在第二个PHP那里。我的Jquery排序已经无法正常工作了。我的Jquery做的是基于这个网站 http://tablesorter.com/docs/

任何答案都会受到赞赏。第一次在这里的用户我已经搜索了答案，但在这里找不到任何东西

Answer 1

我不认为你的代码符合你的想法。

您激活<select name="typeselector" onchange="showUser(this.value)">
onchange正在使用XMLHttpRequest
请求已发送至"getSubject.php?q="+str
您要发回的“回复”是整个HTML网页（<html>...content...</html>）
然后，您尝试使用document.getElementById("subjtable").innerHTML=xmlhttp.responseText;

基本上，您正试图将网页粘贴到其他网页中。

为了给你正确的方向，将getSubject.php更改为仅以下内容，然后测试它：

       <table id="tablesorter-demo" class="tablesorter" border="1" cellpadding="0" cellspacing="1">
            <thead>
                    <tr>
                        <th>Subject Code</th>
                        <th>Subject Title</th>
                        <th>Lecturer</th>
                        <th>Description</th>
                    </tr>
            </thead>
            <tbody>
            <?php
            $q=$_GET["q"];

                    $mysqli = new mysqli('localhost','root','9876543210','jye');
                    $stmt = $mysqli->prepare("select subjectcode,title,lecturer,description from erehwonsubjects where course = '".$q."'");
                    $stmt->execute();
                    $stmt->bind_result($subjcode,$subjtitle,$lecturer,$description);
                    while($stmt->fetch())
                    {

                          echo <<<TABLE
                            <tr>
                                <td>$subjcode</td>
                                <td>$subjtitle</td>
                                <td>$lecturer</td>
                                <td>$description</td>
                            </tr> 

TABLE;

                    }

                    ?>
            </tbody>
        </table>

请注意，这不是处理它的“正确”方式，但应该能够让您了解错误。

第一次排序后，JQuery停止响应

1 个答案: