个人中心
gpt4 book ai didi

php - 创建表排序器分页时表行消失

转载 作者：行者123 更新时间：2023-12-01 05:28:47 24 4
gpt4 key购买 nike

我想为我的表格排序表创建分页。然而，我的分页不起作用，但上一个、下一个按钮都在那里。只是它不起作用。每当我尝试删除 $(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

最佳答案

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

在userres.php内执行查询后启动

$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++;

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

下面的代码是对页码进行一些动画处理并对其进行自定义。

$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>";

对于我的index.php，我是这样写的

function ajaxSearchUpdater(p){
        $("#result").show();
        var x = $("#search").val();
        var y = $("#edulevel").val();
        var pagelim = $("#pagefpe").val();
        var pagenumber = p;

        $.ajax({
            type:'POST',
            url:'userres.php',
            data:'q='+x+'&e='+y+'&pagelim='+pagelim+'&pageno='+pagenumber,
            cache:false,
            success:function(data){
                $("#result").html(data)
            }
        });
    }

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

注意:我可能不会说这在性能方面是最好的解决方案，因为即使我自己也不太了解 Ajax 和 DOM 的东西。另外，在这个 userres.php 内部，我使用了很多查询，并且在查询内部还有另一个查询。所以我认为这不好。重点是我需要使这个分页正常工作，无论性能如何，但如果有更好的方法，我希望任何人都可以提供更多:)。

关于php - 创建表排序器分页时表行消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38579463/

24 4 0
文章推荐： java - LWJGL Slick Java OS X native
文章推荐： jms - 低延迟消息队列
文章推荐： javascript - 图像未正确裁剪或调整大小
文章推荐： perl - 如何将参数传递给模板工具包函数中的子例程
行者123
个人简介

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

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