Tweet
Moin,
ich bin noch ziemlich grün was AJAX/Javascript/jQuery betrifft, aber ich möchte diese Lücke langsam mal schließen, damit ich das in meinen Projekten einsetzen kann.
Das Ziel: Eine Suchseite, das Ergebnisse aus einer MySQL-Datenbank liefert. Angezeigt werden sollen 9 Ergebnisse pro Seite, wobei die Seiten über die Pagination, am Ende der Seite gewählt werden können. Diese Pagination soll allerdings die aktuelle Seite +-2 Seiten anzeigen
(Bsp.: First | ... | 4 | 5 | 6 | 7 | 8 | ... | Last)
siehe als Beispiel: http://robsen.eu/teambonus/teams.php
(zum Testen bitte "vfl" in die Suche eingeben)
Das Problem: Ich weiß nicht wie ich die Pagination dynamisch erzeugen soll. Ich haben den Code zum Erstellen bereits mit in die Datei fetch_pages.php gepackt, aber dann funktioniert der AJAX-Code nicht mehr.
Der Code
Javascript in der Suchseite
Die Pagination-Ausgabe & Funktion: pageBuilder
Die Datei "fetch_pages.php"
ich bin noch ziemlich grün was AJAX/Javascript/jQuery betrifft, aber ich möchte diese Lücke langsam mal schließen, damit ich das in meinen Projekten einsetzen kann.
Das Ziel: Eine Suchseite, das Ergebnisse aus einer MySQL-Datenbank liefert. Angezeigt werden sollen 9 Ergebnisse pro Seite, wobei die Seiten über die Pagination, am Ende der Seite gewählt werden können. Diese Pagination soll allerdings die aktuelle Seite +-2 Seiten anzeigen
(Bsp.: First | ... | 4 | 5 | 6 | 7 | 8 | ... | Last)
siehe als Beispiel: http://robsen.eu/teambonus/teams.php
(zum Testen bitte "vfl" in die Suche eingeben)
Das Problem: Ich weiß nicht wie ich die Pagination dynamisch erzeugen soll. Ich haben den Code zum Erstellen bereits mit in die Datei fetch_pages.php gepackt, aber dann funktioniert der AJAX-Code nicht mehr.
Der Code
Javascript in der Suchseite
Code:
$(document).ready(function() {
$("#results").load("fetch_pages.php", {'page':0, 'q':'<?php echo $_POST['q']; ?>'},function() {$("#1-page").addClass('active');}); //initial page number to load
$(".paginate_click").click(function (e) {
$("#results").prepend('<div class="loading-indication"><img src="ajax-loader.gif" /> Loading...</div>');
var clicked_id = $(this).attr("id").split("-"); //ID of clicked element, split() to get page number.
var page_num = parseInt(clicked_id[0]); //clicked_id[0] holds the page number we need
$('.paginate_click').removeClass('active'); //remove any active class
//post page number and load returned data into result element
//notice (page_num-1), subtract 1 to get actual starting point
$("#results").load("fetch_pages.php", {'page': (page_num-1), 'q':'<?php echo $_POST['q']; ?>'}, function(){
});
$(this).addClass('active'); //add active class to currently clicked element
return false; //prevent going to herf link
});
});
PHP-Code:
if(isset($_POST['q'])) {
$stmt = $dbh->prepare("SELECT count(t.id) as counted FROM table where name LIKE ?");
if ($stmt->execute(array("%$_POST[q]%"))) {
$count = $stmt->fetch();
}
$dbh = null;
$dbm = new dbclass();
$paginator = $dbm->pageBuilder($count['counted'], 9);
echo $paginator;
}
PHP-Code:
function pageBuilder ($maxCount, $perPage) {
$pages = ceil($maxCount/$perPage);
//create pagination
$pagination = '';
if($pages > 1)
{
$pagination .= '<div style="clear: left;">';
$pagination .= '<ul class="paginate">';
$pagination .= '<li><a href="#" class="paginate_click" id="1-page">Erste Seite</a></li>';
for($i = 1; $i<=$pages; $i++)
{
$pagination .= '<li><a href="#" class="paginate_click" id="'.$i.'-page">'.$i.'</a></li>';
}
$pagination .= '<li><a href="#" class="paginate_click" id="'.$i.'-page">Letzte Seite</a></li>';
$pagination .= '</ul></div>';
}
return $pagination;
}
PHP-Code:
$item_per_page = 9;
//sanitize post value
$page_number = filter_var($_POST["page"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);
//validate page number is really numaric
if(!is_numeric($page_number)){die('Invalid page number!');}
//get current starting point of records
$position = ($page_number * $item_per_page);
//Limit our results within a specified range.
$results = $dbh->prepare("SELECT fields FROM table where name LIKE ? LIMIT $position, $item_per_page");
if ($results->execute(array("%$_POST[q]%"))) {
//output results from database
while($row = $results->fetch())
{
echo "<div class='teambox'>";
echo "<a href='team?q=".$row['field]."'>";
echo "<div class='teamimg'>";
echo "<img src='".$row['field']."' />";
echo "</div>";
echo "</a>";
echo "<div class='teamdata'>";
echo "<h4>" . utf8_encode($row['field']) . "</h4>";
echo $row['field'] . " | ";
echo "<span>" . utf8_encode($row['field']) . "</span>";
echo "</div>";
echo "</div>";
}
}
Kommentar