Paginierung mit JavaScript (jQuery)

Hat man mehrere Elemente von einem Typ, so zum Beispiel mehrere Artikel-Teaser, kann man diese einfach mit jQuery auf mehrere Seiten teilen.

Mit jQuery Plugins schnell ans Ziel kommen

Als ich mit jQuery zu arbeiten anfing, gefiel mir, wie schnell man zum Ergebnis kommt. Plugins können den Entwicklungsprozess noch stärker beschleunigen,

Viele kostenlose Erweiterungen gibt es auf der jQuery Seite selbst zum Download. Davon abgesehen gibt es zum Beispiel noch jQuery UI oder jQuery Tools.

Paginierung

Zutaten:

Zubereitung:

Man nehme ein HTML Dokument mit folgendem Aufbau:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.     <head>
  5.         <title>Paginierung</title>
  6.         <link rel="stylesheet" type="text/css" href="css/pagination.css"/>
  7.     </head>
  8.  
  9.     <body>
  10.         <div class="element">
  11.             <p>Dies ist ein Element.</p>
  12.         </div>
  13.         <div class="element">
  14.             <p>Dies ist ein Element.</p>
  15.         </div>
  16.         <div class="element">
  17.             <p>Dies ist ein Element.</p>
  18.         </div>
  19.         <div class="element">
  20.             <p>Dies ist ein Element.</p>
  21.         </div>
  22.         <div class="element">
  23.             <p>Dies ist ein Element.</p>
  24.         </div>
  25.         <div class="element">
  26.             <p>Dies ist ein Element.</p>
  27.         </div>
  28.         <div class="element">
  29.             <p>Dies ist ein Element.</p>
  30.         </div>
  31.         <div class="element">
  32.             <p>Dies ist ein Element.</p>
  33.         </div>
  34.         <div class="element">
  35.             <p>Dies ist ein Element.</p>
  36.         </div>
  37.         <div class="element">
  38.             <p>Dies ist ein Element.</p>
  39.         </div>
  40.         <div class="element">
  41.             <p>Dies ist ein Element.</p>
  42.         </div>
  43.         <div class="element">
  44.             <p>Dies ist ein Element.</p>
  45.         </div>
  46.         <div id="paginierung"></div>
  47.         <script type="text/javascript" src="js/jquery.js"></script>
  48.         <script type="text/javascript" src="js/jquery.pagination.js"></script>
  49.         <script type="text/javascript" src="js/mypagination.js"></script>
  50.     </body>
  51. </html>

In der JavaScript Datei muss man nun zunächst eine Funktion schreiben, in der man sagt, was bei Klick auf eine Zahl in der Paginierung passieren soll:

  1. // Anzahl der Elemente pro Seite
  2. var elPerPage = 7;
  3.  
  4. // Callback Funktion bei Klick auf einen Link der Paginierung
  5. function handlePaginationClick(new_page_index, pagination_container) {
  6. 	// Alle vorhandenen Elemente verstecken
  7. 	$('.element').hide();
  8. 	// new_page_index ist die Seitenzahl -1
  9. 	// Nummer des letzten Elements berechnen
  10. 	var lastItem = new_page_index + 1;
  11. 	lastItem *= elPerPage;
  12. 	// Nummer des ersten Elements berechnen
  13. 	var firstItem = new_page_index * elPerPage;
  14. 	// Alle auf der Seite befindlichen Elemente anzeigen
  15. 	for (var i=firstItem; i<lastItem; i++) {
  16. 	    $($('.element')[i]).show();
  17. 	}
  18. 	return false;
  19. }

Danach müssen wir noch bestimmen, wie der Container für die Paginierung heißt und stellen die gewünschten Optionen ein:

  1. // sobald der Inhalt der Seite geladen ist
  2. $(document).ready(function() {
  3. 	// Wenn mindestens ein Element vorhanden ist
  4. 	if ($('.element').size() > 0) {
  5. 		// Alle Elemente verstecken
  6. 		$('.element').hide();
  7.  
  8. 		// Erster Parameter: Anzahl von Elementen
  9. 		// Zweiter Parameter: Optionen
  10. 		$("#paginierung").pagination(
  11. 			$('.element').size(), {
  12. 				// Anzahl der Elemente pro Seite 
  13. 				items_per_page: elPerPage,
  14. 				// Callback Funktion
  15. 				callback: handlePaginationClick,
  16. 				// Text für den letzten Link
  17. 				next_text: 'N&auml;chste',
  18. 				// Text für den ersten Link
  19. 				prev_text: 'Vorherige'
  20. 		});
  21. 	}
  22. });
  23.  

Und schon hat man eine Paginierung, wie die, die zur Zeit hier auf ProgSource vorhanden ist.

von mona am 14.05.2010

Tweet this bookmark on delicious

Kommentare

Es sind keine Kommentare zu diesem Artikel vorhanden.