Question

我想为我的tablesorter表创建分页。然而，我的分页不起作用，但prev，下一个按钮就在那里。只有它不起作用。每当我尝试删除$(Document).ready.....时，它都有效，但我的所有数据行都消失了。它只是空白，只剩下唯一的东西是我的表头和分页按钮。我的代码有问题吗？

这是我的index.php

<head>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/jquery.tablesorter.pager.css">
<link rel="stylesheet" href="css/jquery.dataTables.min.css">
<!----
---->
<script type="text/javascript" src="js/jquery-latest.js"></script> 
<script type="text/javascript" src="js/jquery.tablesorter.js"></script> 
<script type="text/javascript" src="js/jquery.tablesorter.pager.js"></script> 
<!--<script type="text/javascript" src="js/jquery.dataTables.min.js"></script> -->



    <script type="text/javascript">
        $(document).ready(function() 
        { 
            $("#myTable")
            .tablesorter({widthFixed: true, widgets: ['zebra']})
            .tablesorterPager({container: $("#pager")}); 
        } 
        ); 
    </script>

    </head>

    <?php 

        // First we execute our common code to connection to the database and start the session 
        require("common.php"); 

    ?>

    <form class="login, reminder">
            <h1>Search your data...</h1>
    <p style="text-align: center">Enter your search here: <input type="text" id="search" name="search" placeholder="Enter your search here">&nbsp;&nbsp;
    Select education level: <select id="edulevel">
    <option value="ALL">ALL</option>
    <option value="PHD">PHD</option>
    <option value="MASTER">MASTER</option>
    <option value="DEGREE">DEGREE</option></select></p>    
    <div id="contentBox" class="login, reminder" style="margin:0px auto; width:95%; overflow-y: auto; height:304px;">


    <div id="result" class="login"></div>
    <script type="text/javascript">

        /*
        setInterval(function(){
            //alert('Refreshing database');
            $("#result").load("res.php", "update=true").fadeIn("slow").text("Refreshing Database");
        }, 10000);
        */


        function update() {
            $.ajax({
                url: 'userres.php',
                dataType: 'text',
                success: function(data) {
                    if (parseInt(data) == 0) {
                        $("#result").css({ color: "red" }).text("offline");
                    } else {
                        $("#result").css({ color: "green" }).text("online");
                    }
                }
            });    // properly end the ajax() invocation
        }


        function ajaxSearchUpdater(){
            $("#result").show();
            var x = $("#search").val();
            var y = $("#edulevel").val();
            $.ajax({
                type:'POST',
                url:'userres.php',
                data:'q='+x+'&e='+y,
                cache:false,
                success:function(data){
                    $("#result").html(data)
                }
            });
        }

        $(document).ready(function(e) {
            ajaxSearchUpdater();               // fires on document.ready
            $("#search").keyup(function() {
                ajaxSearchUpdater();           // your function call
            });
            $("#edulevel").click(function() {
                ajaxSearchUpdater();           // your function call
            });
        });
    </script>

这是我的表userres.php

<html>
<head>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/jquery.tablesorter.pager.css">
<link rel="stylesheet" href="css/jquery.dataTables.min.css">
<!----
---->
<script type="text/javascript" src="js/jquery-latest.js"></script> 
<script type="text/javascript" src="js/jquery.tablesorter.js"></script> 
<script type="text/javascript" src="js/jquery.tablesorter.pager.js"></script> 
<script type="text/javascript" src="js/jquery.dataTables.min.js"></script> 


<script type="text/javascript">
    $(function() 
    { 
        $("#myTable")
        .tablesorter({widthFixed: true, widgets: ['zebra']})
        .tablesorterPager({container: $("#pager")}); 
    } 
    ); 
</script>

</head>

<?php

require("common.php"); 
error_reporting( error_reporting() & ~E_NOTICE );


//print_r($_GET);
$q=$_POST['q'];
if(isset($_POST['e'])){
    $e=$_POST['e'];
    //echo $q;
    //echo $e;
}

echo '<div id="pager" class="pager">
    <form>
        <img src="css/first.png" class="first"/>
        <img src="css/prev.png" class="prev"/>
        <input type="text" class="pagedisplay"/>
        <img src="css/next.png" class="next"/>
        <img src="css/last.png" class="last"/>
        <select class="pagesize">
            <option value="">LIMIT</option>
            <option value="2">2 per page</option>
            <option value="5">5 per page</option>
            <option value="10">10 per page</option>

        </select>
    </form>
</div>';

if($stmt->rowCount() > 0){
    $r=$stmt->fetchAll();
    echo "<table class='tablesorter-blackice' id='myTable' style='width:97%; table-border: 1'>";
        echo "<thead>";
        echo "<tr>";
        echo "<th>No.</th>";
        echo "<th>No.Matric</th>";
        echo "<th>Name</th>";
        echo "<th>Programme</th>";
        echo "<th>Title</th>";
        echo "<th>Education Level</th>";
        echo "<th>Serial Number</th>";
        echo "<th>Availability</th>";
        echo "</tr>";
        echo "</thead>";
        echo "<tbody>";

    foreach($r as $row){

            echo "<tr align='center'><td>". ($a+1) ."</td><td>". $row['matricno'] ."</td><td>". $row['studentname'] ."</td><td>". $row['programme'] ."</td><td>". $row['title'] ."</td><td>". $row['education_level'] ."</td><td>". $row['serialno'] ."</td><td>". $row['bavailable'] ."</td></tr>";
            $a++;
            //echo $row['education_level'];
    }
    echo "</tbody>";
    echo "</table>";
}
else{
    echo "<p align='center'>Nothing to show you :( I am really sorry for this T_T </p>";
}

?>

我对数据库没有任何问题。只有当我从函数中删除$(Document).ready....时才会发生这种情况，因为有些教程没有使用它而有些教程没有。我想念的任何线索？ *注意我有意不包括我的查询，因为太多的评论和东西。另外，我在两个页面上调用tablesorter是因为我不确定哪个页面应该调用tablesorter函数。这是因为我的桌子是在php文件上。不是HTML

Answer 1

我已经通过在userres.php中手动创建它来解决它。我认为它不起作用是因为我在index.php中使用Ajax来从userres.php请求数据。因此返回的数据变成了DOM，它是文档对象模型，它与HTML有关（如果有人能比我更清楚这一点，我会很高兴）。所以我必须像这样创建手册。（数学内容T_T）

在userres.php

中执行查询后开始

text

----然后另一个查询----我排除查询

下面的代码是稍微设置页码的动画并进行自定义。

$stmt2 = $db->prepare($totalrow); 
$stmt2->bindValue(':q','%'.$q.'%');
$stmt2->bindValue(':e',$e);
$stmt2->execute();

$row = $stmt2->rowCount();

$limitrow = 1;
if(isset($_POST['pagelim'])){
    $limitrow = $_POST['pagelim'];

    if($limitrow == 0){
        $limitrow = $row;
    }

}


if($row != 0){
    $baki = $row%$limitrow;
}
else{
    $baki = 0;
    $limitrow = 1;
    $row = 1;
}

$maxpage = (($row-$baki)/$limitrow);
$startrow = $limitrow*($pageno-1);

if($baki!=0)
    $maxpage++;

对于我的index.php，我把它像这样

$startPage = ($pageno <5) ? 1 : $pageno -4;
$endPage = 8 + $startPage;
$endPage = ($maxpage < $endPage) ? $maxpage : $endPage;
$diff = $startPage - $endPage + 8;
$startPage -=($startPage - $diff > 0) ? $diff : 0;

$a = $startPage;
echo "<ol id='olpoint'>";


if($startPage > 1) echo "<a href='#' onclick='ajaxSearchUpdater(1);'><li>First</li></a>";

while($a<=$endPage){

        echo "<a href='#' onclick='ajaxSearchUpdater(".$a.");'";
        if($pageno == $a){
            echo "style='color:grey;'";
        }   
        echo "><li>".$a."</li></a>";
        $a++;
};

if($endPage < $maxpage) echo "<a href='#' onclick='ajaxSearchUpdater(".$maxpage.");'><li>End</li></a>";

echo "</ol>";

注意：我可能不会说这是性能方面的最佳解决方案，因为即使我自己也不太了解Ajax和DOM的东西。此外，在这个userres.php的内部，我使用了大量的查询，在查询中还有另一个查询。所以我觉得它不太好。关键是我需要让这个分页工作，无论性能如何，但如果有更好的方式，我希望任何人都可以提供更多:)。

创建tablesorter分页时，表行消失

1 个答案: