2
Ich möchte Seitenumbrüche für meine Tablesorter-Tabellen erstellen. Meine Paginierung funktioniert jedoch nicht, aber die vorherige, nächste Schaltfläche ist da. Nur es funktioniert nicht. Immer wenn ich versuche, $(Document).ready..... zu entfernen, funktionierte es, aber alle meine Datenzeile ist verschwunden. Es ist nur leer und nur das einzige, was übrig bleibt, ist meine Tabellenüberschrift und diese Seitentaste. Stimmt etwas mit meinem Code nicht?Tabellenzeile verschwindet beim Erstellen der TablesOrter-Seitennummerierung
Das ist mein 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>
Dies ist, wo mein Tisch userres.php ist
<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>";
}
?>
Ich habe keine Probleme mit Datenbanken. Nur dass es passiert, wenn ich die $(Document).ready.... von der Funktion entferne, weil irgendein Tutorium das nicht benutzt und einiges tut. Irgendwelche Ahnung was ich vermisse? * HINWEIS Ich bin absichtlich nicht meine Abfrage enthalten, weil zu viele Kommentare und Zeug. Außerdem rufe ich setsorter auf beiden Seiten auf, weil ich nicht sicher bin, auf welcher Seite die Funktion salesorter aufgerufen werden soll. Es liegt daran, dass meine Tabelle in der PHP-Datei ist. nicht html
Der document ready function wrapper ist nur notwendig, wenn das Javascript irgendwo über dem unteren Rand der Seite geladen oder ausgeführt wird. Wenn der Container "# result" aktualisiert wird, ist die Tabelle darin? – Mottie