Functie pentru paginarea tabelelor doar cu jQuery

Nu intotdeauna lucram la proiecte cu PHP, uneori ne limitam doar la limbajul client-side JavaScript. Sa nu mai spun si de viteza inceata(incetinita si de factorul hosting) pe care o are o paginare cu PHP, insa una cu javascript pe o medie de 200 rezultate consider ca este buna. Desigur eu am paginat cu aceasta functie si 2000 de rows-uri fara probleme.
Facilitati:

Viteza schimbare intre pagini
Simliplitate in folosire
Design
Ordonare

Aveti nevoie de:

libraria jQuery(puteti downloada jQuery de aici)

Live Demo

Aveti un live demo la pagina http://programam.ro/paginare.php

Instructiuni de folosire

Pentru a pagina un tabel folosim functia:

$( selector_tabel ).pagineaza( randuri_per_pagina = 10, pagina_curenta = 1, cautare = 'null', initiare = '1');

Realizati ca (,) cand folosim randuri_per_pagina = 10 ne referim la argumentul randuri_per_pagina dar cu valoarea default 10. Un exemplu in care paginam tabelul cu id-ul exemple:

$('#exemple').pagineaza()

Daca dorim sa avem cate 20 de randuri(tr-uri) per pagina folosim:

$('#exemple').pagineaza(10);

Daca dorim sa sarim direct la o anume pagina, de exemplu 5 folosim:

$('#exemple').pagineaza(10, 5);

Daca dorim sa afisam doar rezultate care corespund unei cautari folosim

$('#exemple').pagineaza(10, 5, 'cauta dupa asta');

Download

Varianta necomprimata recomandata daca doriti sa faceti modificari sau sa o studiati o puteti downloada de aici( 5.7Kb )

CSS:

ul.schimba_pagina{
	float: right;
	margin-right: 15px;
	list-style: none;
}
ul.schimba_pagina li{
	display: inline;
	margin-left: 1px;
	background-color: #2D2D2D;
}
ul.schimba_pagina a{
	border: 3px solid #1E1E1E;
	padding: 1px 5px;
	cursor: pointer;
	-webkit-transition: none !important;
	-moz-transition: none !important;
	-ms-transition: none !important;
	-o-transition: none !important;
	transition: none !important;
}
ul.schimba_pagina a.active{ color:red !important; }
ul.schimba_pagina a.disabled{
	cursor: not-allowed;
	border: 3px solid #1E1E1E;
	color: #494141 !important;
}

Bonus

In caz ca doriti ca pagina de start a paginarii sa fie cea dintr-un parametru get(de exemplu page), mai exact daca viziteaza paginare.php?page=3 sa-l duca la pagina 3 adaugati urmatoarea functie in codul vostru:

function getQueryVariable(variable){
   var query = window.location.search.substring(1);
   var vars = query.split("&");
   for (var i=0;i<vars.length;i++) {
           var pair = vars[i].split("=");
           if(pair[0] == variable){return pair[1];}
   }
   return(false);
}

Si porniti paginarea cu un cod asemanator cu:

$('#exemple').pagineaza(10, getQueryVariable('page'));

Tags: Tutoriale, Programare Web, Javascript Si Jquery