Tutorial για Pagination με Ajax στα Ελληνικά!

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
petsoukos
Δημοσιεύσεις: 75
Εγγραφή: 28 Αύγ 2009 02:25
Τοποθεσία: Καστοριά
Επικοινωνία:

Tutorial για Pagination με Ajax στα Ελληνικά!

Δημοσίευση από petsoukos » 10 Δεκ 2009 03:30

Pagination με PHP, MySQL και AJAX!

Σχόλια ευπρόσδεκτα!
Πηγή:www.computerman.gr
Demo: Pagination Demo

Τι είναι η τεχνολογία AJAX.
Το όνομα AJAX είναι ένα ακρώνυμο του Asynchronous JavaScript and XML. Αναλαμβάνει να κάνει αιτήματα (request) στον διακομιστή (server) στο παρασκήνιο ώστε να μην χρειάζεται να φορτωθεί από την αρχή ολόκληρη η ιστοσελίδα, αλλά μόνο ένα μέρος της.

Πριν ξεκινήσουμε το tutorial ας βεβαιωθούμε ότι έχουμε πρόσβαση σε κάποιον server με δυνατότητα PHP και MySQL. Ακόμα καλύτερα θα ήταν να έχουμε στον υπολογιστή μας έναν Apache Server με PHP και MySQL. Επίσης θα χρειαστούμε έναν κειμενογράφο (editor). Υπάρχουν αρκετοί στο διαδίκτυο δωρεάν αλλά μπορείτε να χρησιμοποιήσετε ακόμα και το Notepad των Windoze.

Αυτό που θα χρειαστούμε αρχικά είναι μια βάση δεδομένων για να ανακτήσουμε δεδομένα προς σελιδοποίηση. Ανοίγουμε λοιπόν στον browser μας το phpMyAdmin και κάνουμε login άμα χρειαστεί. (http://localhost/phpmyadmin/)

Εικόνα 1
Εικόνα

Στην αρχική εγκατάσταση της βάσης δεδομένων, την οποία θα αποκαλώ MySQL από εδώ και πέρα, υπάρχει μια βάση με το όνομα test. Την επιλέγουμε (click).

Εικόνα 2
Εικόνα

Πηγαίνουμε στο Create new table on database test και εισάγουμε στο Name: το όνομα ajax_pagination και στο Number of fields: βάζουμε 2. Και πατάμε GO. Στο επόμενο παράθυρο μας δίνει 2 φόρμες προς συμπλήρωση. Βλέπε εικόνα 3-4 και συμπλήρωσε τα ίδια.

Εικόνα 3 & 4
Εικόνα
Εικόνα

Αυτά τα απλά βήματα με την MySQL. Παρακάτω θα εισάγουμε μερικά στοιχεία στην βάση μέσω της PHP για να έχουμε δεδομένα για σελιδοποίηση.

Εισαγωγή στοιχείων στην βάση
Ανοίγουμε τον Editor μας, και ξεκινάμε με ένα κενό έγγραφο. Για την σελιδοποίηση θα χρειαστούμε αρκετά δεδομένα και ένας εύκολος τρόπος να περάσουμε δεδομένα στην βάση μας είναι με ένα FOR LOOP.

1.

Κώδικας: Επιλογή όλων

<?php

// Database connection
$db = @mysqli_connect&#40;'localhost', 'username', 'password', 'test'&#41; or die&#40; 'Σύνδεση με την βάση δεδομένων απέτυχε' &#41;;
// For loop and database population
for &#40;$n = 1; $n <= 100; $n++&#41; &#123;
    $query = "INSERT INTO ajax_pagination &#40;numbers&#41; VALUES &#40;$n&#41;";
    $exec = @mysqli_query&#40;$db, $query&#41;;
&#125;

?>
Δεν θα μπω σε λεπτομέρειες για το τι κάνει ο παραπάνω κώδικας. Όπως είπα και στην αρχή το tutorial αυτό είναι για πιο προχωρημένους και όχι για αρχάριους.
Κάντε Copy-Paste τον κώδικα. Ονομάστε το αρχείο populate.php και βάλτε το στο root φάκελο του server. Ανοίξτε τον browser σας και βάλτε στην γραμμή διευθύνσεως http://localhost/populate.php.

Ανοίξτε πάλι το phpMyAdmin panel και βεβαιωθείτε πώς στην βάση test και στο table ajax_pagination υπάρχουν δεδομένα. Αν υπάρχουν το script μας δούλεψε και πλέον δεν το χρειαζόμαστε, οπότε μπορείτε να το σβήσετε.

Javascript και το Ajax Object
Έδω αρχίζουμε και μπαίνουμε στο "ζουμί" του tutorial. Θα ξεκινήσουμε αυτό το κεφάλαιο με την Javascript και θα δημιουργήσουμε ένα Ajax object το οποίο θα διαχειρίζεται το XMLHttpRequest() με τον server. Το XMLHttpRequest() object είναι η καρδιά όλων των Ajax εφαρμογών. Αυτό είναι που αναλαμβάνει την επικοινωνία με τον server. O παρακάτω κώδικας που θα γράψουμε θα μπορείτε να τον χρησιμοποιήσετε σε όποια Ajax εφαρμογή θα κάνετε μελλοντικά.

Ανοίξτε τον editor σας και δημιουργήστε ένα κενό έγγραφο Javascript.

2.

Κώδικας: Επιλογή όλων

// Create the magic object
var magic = false;
Αρχίζουμε δημιουργώντας μια μεταβλητή με το όνομα magic και δηλώνουμε στο περιεχόμενο false.

3.

Κώδικας: Επιλογή όλων

// Check if the client supports XMLHttpRequest
if&#40;window.XMLHttpRequest&#41; &#123;
      magic = new XMLHttpRequest&#40;&#41;;
Ελέγχουμε αν ο browser του χρήστη υποστηρίζει το XMLHttpRequest object και το περνάμε στην μεταβλητή magic. Οι περισσότεροι browsers το υποστηρίζουν πλην IE6, IE5 κτλ. για αυτούς θα δοκιμάσουμε να φτιάξουμε ένα ActiveXObject.

4.

Κώδικας: Επιλογή όλων

&#125; else if &#40;window.ActiveXObject&#41; &#123; // IE6, IE5
     try &#123;
     magic = new ActiveXObject&#40;"Msxml2.XMLHTTP"&#41;;
     &#125; catch &#40;err1&#41; &#123;
        try &#123;
         magic = new ActiveXObject&#40;"Microsoft.XMLHTTP"&#41;;
     &#125; catch &#40;err2&#41; &#123;&#125;
     &#125;
&#125;
Αν ο χρήστης μας χρησιμοποιεί IE6-5 θα δημιουργήσουμε το ActiveXObject και θα το περάσουμε στην μεταβλητή magic.

5.

Κώδικας: Επιλογή όλων

// Check for the magic object
if&#40;!magic&#41; &#123;
     alert&#40;'Ο browser σας δεν μπορεί να υποστηρίξει κάποιες λειτουργίες του ιστότοπου!'&#41;;
&#125;
Ελέγχουμε αν δημιουργήσαμε το magic object, αν όχι ο χρήστης θα λάβει το μήνυμα ότι δεν θα μπορεί να δει όλες τις δυνατότητες της ιστοσελίδας μας. Αυτό το Javascript είναι έτοιμο πλέον και μπορούμε να το χρησιμοποιήσουμε στην εφαρμογή μας.
Αποθηκεύστε το αρχείο με το όνομα magic.js

Το interface...
Για το πρόγραμμα μας θα χρειαστούμε ένα interface για να εμφανίσουμε τα δεδομένα μας. Ας ξεκινήσουμε:

6.

Κώδικας: Επιλογή όλων

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
</body>
</html>
Ανοίγουμε τον Editor μας (άμα δεν είναι ήδη ανοιχτός) και δημιουργούμε ένα νέο έγγραφο PHP.

7.

Κώδικας: Επιλογή όλων

<title>Ajax Pagination</title>
<script src="magic.js" type="text/javascript" language="javascript"></script>
<script src="pagination.js" type="text/javascript" language="javascript"></script>
Αλλάξτε τον τίτλο σε ότι σας ευχαριστεί, διότι δεν είναι σημαντικό μέρος του προγράμματος μας (ή του tutorial). Επίσης θα συμπεριλάβουμε και τα 2 javascript αρχεία μας, από τα οποία το πρώτο το δημιουργήσαμε ποιο πάνω και το δεύτερο θα το δημιουργήσουμε παρακάτω.

8.

Κώδικας: Επιλογή όλων

<div id="main_wrapper">
<div id="header">
<h3>Σελιδοποίηση με Ajax</h3>
</div>
Μετά το <body> tag δημιουργήστε 2 dividers τα οποία θα περιέχουν το τυπικό interface. Μέσα στο header div δημιουργήστε έναν τίτλο με h3 μέγεθος. Όλα αυτά τα βήματα είναι προαιρετικά διότι είναι μόνο για την εμφάνιση και δεν παίζουν κανέναν ρόλο με το πρόγραμμα της σελιδοποίησης.

9.

Κώδικας: Επιλογή όλων

<p>Πατάμε Play στο Video apo to Youtube για να δούμε ότι όντως τρέχει το Ajax και δεν κάνει reload την σελίδα.</p>
<div align="center">
<object width="425" height="344">
<param name="movie" value="http&#58;//www.youtube.com/v/NxJ75Nla-tU&hl=en_GB&fs=1&"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http&#58;//www.youtube.com/v/NxJ75Nla-tU&hl=en_GB&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>
</object>
</div>
</div>
Ενσωματώνω ένα video από το YouTube εδώ σαν σημείο αναφοράς (visual marker) για αργότερα.

10.

Κώδικας: Επιλογή όλων

<div id="header">
<h3>Σελιδοποίηση με Ajax</h3>
</div>
<div id="place_holder"><?php require_once&#40;'paginator.php'&#41;; ?></div>
Βάζουμε ένα επιπλέον divider με το id place_holder αμέσως μετά header divider. Αυτό το divider θα λειτουργήσει σαν "δέκτης" των δεδομένων μας από το XMLHttpRequest(). Μέσα σε αυτό το divider βάζουμε έναν κώδικα PHP να μας φέρει τα αρχικά δεδομένα. Το αρχείο αυτό θα το δημιουργήσουμε παρακάτω.

11.

Κώδικας: Επιλογή όλων

<style>
* &#123; margin&#58;0; padding&#58;0; &#125;
#main_wrapper &#123; width&#58;500px; margin&#58;auto; overflow&#58;hidden; &#125;
#place_holder &#123; width&#58;160px; margin&#58;auto; padding&#58;10px; &#125;
#header h3 &#123; text-align&#58;center; &#125;
</style>
Μια μικρή παρέμβαση με CSS για να φέρουμε τα στοιχεία μας στο κέντρο της σελίδας. Μετά το </title> tag ανοίγουμε το <style> tag κάνουμε επικόλληση το CSS. Αποθηκεύστε το αρχείο με όνομα ajax_pagination.php στο root folder του server και δοκιμάστε το στον browser σας. (http://localhost/ajax_pagination.php) . Αν όλα πήγανε καλά θα βλέπετε στον browser σας κάτι ανάλογο με την παρακάτω εικόνα.

Εικόνα 5
Εικόνα

Η Σελιδοποίηση
Μέχρι στιγμής έχουμε μια τυπική ιστοσελίδα με μια MySQL βάση δεδομένων και το Ajax object μας στο javascript αρχείο. Τώρα θα πάμε στο πρώτο δύσκολο κομμάτι του tutorial. Αυτό είναι η σελιδοποίηση των δεδομένων μας με PHP. Αρχικά θα φτιάξουμε το πρόγραμμά μας να δουλεύει ακόμα και όταν ο χρήστης έχει αποκλείσει από τον browser του τα javascripts ή στην περίπτωση που δεν υποστηρίζει ο browser XMLHttpRequest object.

12.

Κώδικας: Επιλογή όλων

<?php
// Result limiter
$display = 10;

// get the starting point
if&#40;isset&#40;$_GET&#91;'start'&#93;&#41; && is_numeric&#40;$_GET&#91;'start'&#93;&#41;&#41; &#123;
    $start = &#40;int&#41; $_GET&#91;'start'&#93;;
&#125; else &#123;
    $start = 0;
 &#125;

// Database Connection
$db = @mysqli_connect&#40;'localhost', 'username', 'password', 'test'&#41; or die &#40;'Could not connect'&#41;;

?>
Αρχίζουμε με ένα κενό έγγραφο PHP. Ορίζουμε στην μεταβλητή $display τον αριθμό 10. Αυτό αντιπροσωπεύει πόσα αποτελέσματα θα θέλαμε να εμφανίζουμε σε κάθε σελίδα. Συνεχίζουμε με έναν έλεγχο IF για να δούμε άμα έχουμε στείλει δεδομένα στο script μας μέσω της URL διεύθυνσης. Αν υπάρχουν δεδομένα στο URL τα περνάμε στην μεταβλητή $start, αλλιώς την ορίζουμε με τον αριθμό 0. Η επόμενη μεταβλητή είναι ένα απλό database connection object.

13.

Κώδικας: Επιλογή όλων

<table border="1">
<tr align="center">
<td width="80">ID</td><td width="80">Number</td>
</tr>
Εδώ απλά ξεκινάμε ένα πίνακα.

14.

Κώδικας: Επιλογή όλων

if&#40;isset&#40;$_GET&#91;'page'&#93;&#41; && is_numeric&#40;$_GET&#91;'page'&#93;&#41;&#41; &#123;
      $pages = &#40;int&#41; $_GET&#91;'page'&#93;;
      // Pagination Results
      $q = "SELECT * FROM ajax_pagination ORDER BY numbers ASC LIMIT $start, $display";
      $r = @mysqli_query&#40;$db, $q&#41;;
      while&#40;$results = @mysqli_fetch_assoc&#40;$r&#41;&#41; &#123;
          echo '<tr align="center"><td>'.$results&#91;'id'&#93;.'</td><td>'.$results&#91;'numbers'&#93;.'</td></tr>';
      &#125; // Loop end
Σε αυτό το βήμα πραγματοποιούμε έναν έλεγχο στην URL διεύθυνση για την μεταβλητή page. Αν υπάρχει σημαίνει ότι έχουμε πατήσει ένα από τα link next ή previous και έχουμε στείλει στην διεύθυνση δεδομένα. Δίνουμε στην μεταβλητή $pages την μεταβλητή από το URL, εφόσον υπάρχει. Στην επόμενη γραμμή κώδικα δημιουργούμε μια μεταβλητή που περιέχει ένα ερώτημα για την MySQL. Το σημαντικότερο σημείο στην σελιδοποίηση είναι η εντολή LIMIT στο ερώτημα της SQL. Η πρώτη μεταβλητή μετά το LIMIT λέει στην MySQL να φέρει τα δεδομένα από το ν σημείο και η δεύτερη μεταβλητή ορίζει το όριο τον αποτελεσμάτων. Στην συνέχεια αφού στέλνουμε το ερώτημα στην MySQL, "τρέχουμε" μια while loop στα αποτελέσματα του ερωτήματος και δημιουργούμε μια λίστα στον πίνακα με τα δεδομένα.

15.

Κώδικας: Επιλογή όλων

&#125; else &#123;
      // Initial Results
      $q = "SELECT * FROM ajax_pagination ORDER BY numbers ASC LIMIT $start, $display";
      $r = @mysqli_query&#40;$db, $q&#41;;
      while&#40;$results = @mysqli_fetch_assoc&#40;$r&#41;&#41; &#123;
           echo '<tr align="center"><td>'.$results&#91;'id'&#93;.'</td><td>'.$results&#91;'numbers'&#93;.'</td></tr>';
      &#125; // Loop end
Στην περίπτωση που ο έλεγχος IF από το προηγούμενο βήμα στην γραμμή 4, δεν ισχύει, πράγμα που σημαίνει ότι ο χρήστης μόλις φόρτωσε την σελίδα, εκτελούμε ένα ερώτημα το οποίο μας φέρνει τα πρώτα 10 δεδομένα απο την MySQL. Τρέχουμε ακριβός την ίδια while loop και γεμίζουμε τον πίνακα μας.

16.

Κώδικας: Επιλογή όλων

// Counting data
$q = "SELECT COUNT&#40;*&#41; FROM ajax_pagination";
$r = mysqli_query&#40;$db, $q&#41;;
$count = mysqli_fetch_assoc&#40;$r&#41;;
if&#40;$count > $display&#41; &#123;
$pages = &#40;int&#41; ceil &#40;$count&#91;'COUNT&#40;*&#41;'&#93;/$display&#41;;
&#125; else &#123;
$pages = 1;
&#125;
&#125; // End of &#40;isset&#40;$_GET&#41;&#41;
Έδω είναι το πρώτο σημαντικότερο κομμάτι όλων των προγραμμάτων σελιδοποίησης. Το μέτρημα τον γραμμών (rows) του πίνακα που περιέχει τα δεδομένα μας στην MySQL. Με την εντολή SELECT COUNT(*) λέμε στην βάση να μετρήσει όλα τα δεδομένα του πίνακα ajax_pagination. Στην γραμμή 21 και 22 εκτελούμε το ερώτημα και λαμβάνουμε το αποτέλεσμα του ερωτήματος στην μεταβλητή $count. Στο βήμα 23 κάνουμε τον έλεγχο ότι τα δεδομένα μας είναι περισσότερα από το όριο που έχουμε θέσει και περνάμε στην μεταβλητή $pages το αποτέλεσμα της διαίρεσης του αποτελέσματος με το όριο. Αυτό μας δίνει τον αριθμό σελίδων που θα χρειαστούμε. Στην περίπτωση που τα αποτελέσματα είναι λιγότερα του ορίου τότε απλά χρειαζόμαστε μόνο μία σελίδα και δίνουμε στην μεταβλητή $pages τον αριθμό 1. Στο βήμα 28 κλείνουμε τον αρχικό έλεγχο IF.

17.

Κώδικας: Επιλογή όλων

<tr><?php
// Create Next & Previous Links
if &#40;$pages > 1&#41; &#123;
$current_page = &#40;$start/$display&#41;+1;
?>
Αυτό το κομμάτι κώδικα είναι αρκετά περίπλοκο μόνο οπτικά στο να το αποκωδικοποιήσει κάποιος. Είναι ένα μείγμα PHP και HTML tags. Δεν θα μπω σε πολλές λεπτομέρειες εδώ. Στο πρώτο βήμα κάνουμε έναν έλεγχο με την μεταβλητή $pages ώστε να δούμε πως έχουμε να κάνουμε με περισσότερες από μία σελίδες και να δημιουργήσουμε τους συνδέσμους Previous και Next. Αυτός ο έλεγχος δεν έχει ELSE διότι δεν χρειάζεται να εκτελέσουμε τίποτα άμα δεν έχουμε περισσότερες από μία σελίδες. Ορίζουμε και μια μεταβλητή $current_page με το αποτέλεσμα της διαίρεσης συν 1.

18.

Κώδικας: Επιλογή όλων

if &#40;$current_page != 1&#41; &#123;
?><td align="left">
<a href="ajax_pagination.php?start=<?php echo &#40;$start-$display&#41;;?>&page=<?php echo $pages;?>" onClick="return get_pagination&#40;'<?php echo &#40;$start-$display&#41;;?>', '<?php echo $pages;?>'&#41;" >Previous</a></td><?php
&#125; else &#123; echo '<td></td>'; &#125;?
>Σε αυτό το βήμα δημιουργούμε τον σύνδεσμο Previous κάνοντας πρώτα τον έλεγχο if ($current_page != 1) ώστε να συνεχίσει η δημιουργία του συνδέσμου. Όταν η μεταβλητή δεν είναι ίση με το 1, π.χ. 2,3,4 κτλ, δεν βρισκόμαστε στην πρώτη σελίδα και χρειαζόμαστε το Previous link για να δούμε τα αποτελέσματα της προηγούμενης σελίδας. Στην γραμμή 35-36 φτιάχνουμε τον σύνδεσμο Previous μέσα στον πίνακα μας και στην τελευταία γραμμή του. Το συμαντικό κομμάτι εδώ είναι η εντολή onClick="return get_pagination()", με αυτήν θα εκτελεστεί το Javascript, το οποίο θα φτιάξουμε στο τέλος, και θα φέρουμε τα δεδομένα μέσω Ajax. Επίσης βάζουμε στο href="" το URL μαζί με τις μεταβλητές ?start= και &=page για την περίπτωση που κάποιος χρήστης δεν έχει δυνατότητα javascript στον browser του.

19.

Κώδικας: Επιλογή όλων

<?php
if &#40;$current_page != $pages&#41; &#123; ?>
<td align="right">
<a href="ajax_pagination.php?start=<?php echo &#40;$start+$display&#41;;?>&page=<?php echo $pages; ?>" onClick="return get_pagination&#40;'<?php echo &#40;$start+$display&#41;;?>', '<?php echo $pages; ?>'&#41;">Next</a></td><?php &#125; ?>
<?php &#125; ?>
</tr>
</table>
Και στο τελευταίο βήμα της PHP θα δημιουργηθεί ο σύνδεσμος Next για την προβολή τον επόμενων αποτελεσμάτων. Κάνουμε πάλι έναν έλεγχο με την μεταβλητή $current_page, αλλά σε αυτήν την περίπτωση ελέγχουμε αν ήμαστε στην τελευταία σελίδα και αν ήμαστε δεν δημιουργούμε τον σύνδεσμο Next. Σε κάθε άλλη περίπτωση τον δημιουργούμε. Και εδώ χρησιμοποιούμε την εντολή onClick="return get_pagination()" και επίσης βάζουμε και το URL στο href="" μαζί με τις μεταβλητές ?start= και &=page.

Αυτά είναι τα βήματα από την πλευρά της PHP. Αποθηκεύουμε το αρχείο με όνομα paginator.php και το βάζουμε μαζί με το ajax_pagination.php στον ίδιο φάκελο (root). Τώρα έχουμε σύστημα σελιδοποίησης χωρίς δυνατότητα χρήσης Ajax. Δοκιμάστε το πρόγραμμα τώρα να βεβαιωθούμε πως δουλεύει.

Ενεργοποίηση του Ajax
Φτάσαμε και στο τελευταίο κομμάτι του tutorial. Εδώ θα δημιουργήσουμε τις λειτουργίες του προγράμματός μας σε javascript.

20.

Κώδικας: Επιλογή όλων

function get_pagination&#40;start, page&#41; &#123;
if&#40;magic&#41; &#123;
Ξεκινάμε ορίζοντας ένα javascript function με το όνομα get_paginator() και 2 μεταβλητές start και page. Και Κάνουμε έλεγχο άμα έχει δημιουργηθεί το magic object.

21.

Κώδικας: Επιλογή όλων

magic.open&#40;'get', 'paginator.php?start=' + encodeURIComponent&#40;start&#41; + '&page=' + encodeURIComponent&#40;page&#41;&#41;;
magic.onreadystatechange = status_check;
magic.send&#40;null&#41;;
return false;
&#125;
&#125; // end of get_stores&#40;&#41;
Εφόσον υπάρχει το magic object ξεκινάμε την δημιουργία του URL. Με αυτό το URL θα "καλέσει" το Ajax object τα δεδομένα. Μετά θα δηλώσουμε με ποιο function θα κάνουμε τον έλεγχο του readyState του server. Στην επόμενη γραμμή στέλνουμε το request και αποτρέπουμε με το return false την αποστολή του URL στον browser ώστε να μην κάνει reload.

22.

Κώδικας: Επιλογή όλων

function status_check&#40;&#41; &#123;
if &#40; &#40;magic.readyState == 4&#41; && &#40;magic.status == 200&#41; &#41; &#123;
document.getElementById&#40;'place_holder'&#41;.innerHTML = magic.responseText;
&#125;
&#125; // End of status_check&#40;&#41; function
Δημιουργούμε το function που θα ελέγξει το state του server. Άμα απαντήσει ο server με readyState 4 και status 200 όλα πήγαν καλά και μας έστειλε τα δεδομένα τα οποία τα φορτώνουμε στο divider place_holder.

Τα αρχεία μας είναι σχεδόν έτοιμα. Αποθηκεύστε το αρχείο μαζί με τα άλλα και ονομάστε το pagination.js. Ανοίξτε στον browser σας το αρχείο ajax_pagination.php πατήστε Play στο video του YouTube και αμέσως μετά το Next link. Άμα όλα πήγανε καλά, τα αποτελέσματα θα αλλάξουν χωρίς να κάνει refresh η ιστοσελίδα.

Ευχαριστούμε που διαβάσατε το tutorial μας. Θα ήμασταν ευγνώμον εάν αφήνατε κάποιο σχόλιο και τυχών προβλήματα και ερωτήσεις.
Τελευταία επεξεργασία από το μέλος petsoukos την 10 Δεκ 2009 15:59, έχει επεξεργασθεί 3 φορές συνολικά.

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

Tutorial για Pagination με Ajax στα Ελληνικά!

Δημοσίευση από Basilakis » 10 Δεκ 2009 10:47

Ορίστε
http://www.freestuff.gr/forums/viewtopic.php?t=38954

θα ήταν καλό να μην βάζεις ένα link προς ένα tutorial... Μπορείς να μας το γράψεις και εδω και να βάλεις link προς το δικό σου Site (εάν είναι δικό σου site). Το Freestuff.gr δεν έιναι agregator ούτε bookmark service :)

petsoukos
Δημοσιεύσεις: 75
Εγγραφή: 28 Αύγ 2009 02:25
Τοποθεσία: Καστοριά
Επικοινωνία:

Tutorial για Pagination με Ajax στα Ελληνικά!

Δημοσίευση από petsoukos » 10 Δεκ 2009 15:06

ΟΚ.. θα το κάνω paste από το site μου εδώ.

Άβαταρ μέλους
manolism
Super Moderator
Δημοσιεύσεις: 6652
Εγγραφή: 25 Ιαν 2004 16:01
Τοποθεσία: Wild West
Επικοινωνία:

Tutorial για Pagination με Ajax στα Ελληνικά!

Δημοσίευση από manolism » 10 Δεκ 2009 15:41

Ωραία θα ήταν να βλέπαμε και ένα demo για την λειτουργία του

petsoukos
Δημοσιεύσεις: 75
Εγγραφή: 28 Αύγ 2009 02:25
Τοποθεσία: Καστοριά
Επικοινωνία:

Tutorial για Pagination με Ajax στα Ελληνικά!

Δημοσίευση από petsoukos » 10 Δεκ 2009 15:59


Άβαταρ μέλους
telas
Honorary Member
Δημοσιεύσεις: 1594
Εγγραφή: 12 Μαρ 2004 12:54
Τοποθεσία: Kastoria
Επικοινωνία:

Tutorial για Pagination με Ajax στα Ελληνικά!

Δημοσίευση από telas » 10 Δεκ 2009 17:06

Σωστός ο πετσούκος!
Web Design - Δημιουργία Ιστοσελίδας - http://www.computerman.gr/
My Photography - http://www.tilaveridis.com/
Τεχνολογικά προιόντα - http://www.bigbox.gr/

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Tutorial για Pagination με Ajax στα Ελληνικά!

Δημοσίευση από korgr » 10 Δεκ 2009 22:03

Καλο θα ηταν να το εμπλουτσισεις και με αριθμο σελιδων, γειτονικες σελιδες, αρχικη, τελικη κλπ

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Tutorial για Pagination με Ajax στα Ελληνικά!

Δημοσίευση από dimsis » 10 Δεκ 2009 23:18

Πάρα πολύ καλό βοήθημα. Μπράβο και ευχαριστούμε που το μοιράστηκες μαζί μας.

Άβαταρ μέλους
greek_manager
Honorary Member
Δημοσιεύσεις: 1243
Εγγραφή: 21 Οκτ 2002 19:01
Τοποθεσία: Back to Greece
Επικοινωνία:

Tutorial για Pagination με Ajax στα Ελληνικά!

Δημοσίευση από greek_manager » 11 Δεκ 2009 00:14

Πολύ καλό, ειδικά το κομμάτι με το javascript / AJAX που με τόσο λίγο κώδικα έχεις το επιθυμητό αποτέλεσμα
aka thkouk
Football Manager - H ελληνική κοινότητα
παιχνιδια στρατηγικης - Παίξε Δωρεάν

petsoukos
Δημοσιεύσεις: 75
Εγγραφή: 28 Αύγ 2009 02:25
Τοποθεσία: Καστοριά
Επικοινωνία:

Tutorial για Pagination με Ajax στα Ελληνικά!

Δημοσίευση από petsoukos » 11 Δεκ 2009 00:46

Ε ναι.. για ποιο "hardcore", δηλαδή animations και τέτοια βάζεις έτοιμα libraries JQuery, Mootools κτλ...

petsoukos
Δημοσιεύσεις: 75
Εγγραφή: 28 Αύγ 2009 02:25
Τοποθεσία: Καστοριά
Επικοινωνία:

Tutorial για Pagination με Ajax στα Ελληνικά!

Δημοσίευση από petsoukos » 15 Δεκ 2009 22:49

korgr έγραψε:Καλό θα ήταν να το εμπλουτίσεις και με αριθμό σελίδων, γειτονικές σελίδες, αρχική, τελική κλπ
Πως γίνετε αυτό; Με ενδιαφέρει να το οργανώσω λίγο καλύτερα το άρθρο.

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες