我想为我的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">
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
答案 0 :(得分：0)
我已经通过在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的内部，我使用了大量的查询，在查询中还有另一个查询。所以我觉得它不太好。关键是我需要让这个分页工作，无论性能如何，但如果有更好的方式，我希望任何人都可以提供更多:)。