MakingajQuerypaginationsystem

ForpaginatingpurposePHPseemslikealogicalsolution,butifyoudonthaveahugeamountofdata
youwanttopaginate,iwouldsuggestpaginatingwithjQuery.Itsnothardatall,andinthistutorialwe
willmakeajQuerypaginationsystem.
WhypaginatewithjQuery?
itsmuchmuchmuchfaster
doesntmakeadatabasequeryforeachpage
easytoimplement
andagainmuchFASTERthenPHP
WhyNOTpaginatewithjQuery?
Welltheonlythereasonnottopaginateusingjavascriptisthatthereisapossibilitythatjavascriptis
turnedoffinthebrowseroftheuserbutthatsareallysmallpossibility.
Letsstart
HTML
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.

<!theinputfieldsthatwillholdthevariableswewilluse>
<inputtype='hidden'id='current_page'/>
<inputtype='hidden'id='show_per_page'/>

<!
Contentdiv.Thechildelementswillbeusedforpaginating(theydon'thavetobeallthesame,
youcanusedivs,paragraphs,spans,orwhateveryoulikemixedtogether).'>
<divid='content'>
<p>Loremipsumdolorsitamet,consecteturadipiscingelit.</p>
<p>Vestibulumconsecteturipsumsitameturnaeuismodimperdietaliquamurnalaoreet.</p>
<p>Curabituraipsumutelitporttitoregestasnonvitaelibero.</p>
<p>Pellentesqueacsemacsemtincidunteuismod.</p>
<p>Duishendreritpurusvitaenibhtinciduntbibendum.</p>
<p>Nullaminnisisitametvelitplaceratlaoreet.</p>
<p>Vestibulumposuereligulanondolorsempervelfacilisisorciultrices.</p>
<p>Donectinciduntloremetdolorfringillautbibendumlacusfringilla.</p>
<p>Innoneroseulacusvestibulumsodales.</p>
<p>Duisultricesmetussitametsemadipiscingsitametblanditorciconvallis.</p>
<p>Proinullamcorperestvitaeloremmollisbibendum.</p>
<p>Maecenasconguefringillaenim,tristiquelaoreettortoradipiscingeget.</p>
<p>Duisimperdietmetusetloremvenenatisnecportaliberoporttitor.</p>
<p>Maecenaslacinialectusacnullacommodolacinia.</p>
<p>Maecenasquismassanisl,sedaliquettortor.</p>
<p>Quisqueporttitortellusutligulamattisluctus.</p>
<p>Inatmidolor,atconsecteturrisus.</p>
<p>Etiamideratutloremfringilladictum.</p>
<p>Curabitursagittisdoloracnisiinterdumsedposueretelluscommodo.</p>
<p>Pellentesquequismagnavitaequammalesuadaaliquet.</p>
<p>Curabiturtempustellusquisorciegestascondimentum.</p>
<p>Maecenaslaoreeterosacorciadipiscingpharetra.</p>
<p>Nuncnonmauriseunibhtinciduntiaculis.</p>
<p>Utsemperleolaciniapurushendreritfacilisis.</p>

32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.

<p>Praesenteteroslaciniamassasollicitudinconsequat.</p>
<p>Proinnonmaurisinsemiaculisiaculisvelseddiam.</p>
<p>Nuncquisquampulvinarnibhvolutpataliquetegetinante.</p>
<p>Inultriciesduiidliberopretiumullamcorper.</p>
<p>Morbilaoreetmetusvitaeipsumlobortisultrices.</p>
<p>Donecvenenatisegestasarcu,quiseleifenderattempusullamcorper.</p>
<p>Morbinecleononenimmollisadipiscingsedetdolor.</p>
<p>Crasnontellusenim,velmollisdiam.</p>
<p>Phasellusluctusquamidligulacommodoeufringillaestcursus.</p>
<p>Utluctusauguetortor,involutpatenim.</p>
<p>Crasbibendumantesederatpharetrasodales.</p>
<p>Donecsollicitudinenimeumisuscipitluctusposuereerosimperdiet.</p>
<p>Vestibulummollistortorquisipsumsuscipitinvenenatisnullafermentum.</p>
<p>Proinvehiculasuscipitfelis,vitaefacilisisnullabibendumac.</p>
<p>Crasiaculisnequeetorcisuscipitidportarisusfeugiat.</p>
<p>Suspendisseegettelluspurus,acpulvinarenim.</p>
<p>Morbihendreritultricesenim,acrutrumfeliscommodoin.</p>
<p>Suspendissesagittismattissem,sitametfaucibusnislfermentumvitae.</p>
<p>Nullasedpurusettellusconvallisscelerisque.</p>
<p>Namatjustoutanteconsecteturfaucibus.</p>
<p>Proindapibusnisiaquaminterdumlobortis.</p>
<p>Nuncornarenisisedmivehiculaeuluctusmaurisinterdum.</p>
<p>Maurisauctorsuscipittellus,atsodalesnisiblanditsed.</p>

</div>

<!AnemptydivwhichwillbepopulatedusingjQuery>
<divid='page_navigation'></div>

jQuery
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.

$(document).ready(function(){

//howmuchitemsperpagetoshow
varshow_per_page=5;
//gettingtheamountofelementsinsidecontentdiv
varnumber_of_items=$('#content').children().size();
//calculatethenumberofpageswearegoingtohave
varnumber_of_pages=Math.ceil(number_of_items/show_per_page);

//setthevalueofourhiddeninputfields
$('#current_page').val(0);
$('#show_per_page').val(show_per_page);

//nowwhenwegotallweneedforthenavigationlet'smakeit'

/*
whatarewegoingtohaveinthenavigation?
linktopreviouspage
linkstospecificpages
linktonextpage
*/
varnavigation_html='<aclass="previous_link"href="javascript:previous();">Prev</a>';
varcurrent_link=0;
while(number_of_pages>current_link){
navigation_html+='<aclass="page_link"href="javascript:go_to_page('+current_link+')"
longdesc="'+current_link+'">'+(current_link+1)+'</a>';
current_link++;
}
navigation_html+='<aclass="next_link"href="javascript:next();">Next</a>';

$('#page_navigation').html(navigation_html);

//addactive_pageclasstothefirstpagelink
$('#page_navigation.page_link:first').addClass('active_page');

//hidealltheelementsinsidecontentdiv

36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.

$('#content').children().css('display','none');

//andshowthefirstn(show_per_page)elements
$('#content').children().slice(0,show_per_page).css('display','block');

});

functionprevious(){

new_page=parseInt($('#current_page').val())1;
//ifthereisanitembeforethecurrentactivelinkrunthefunction
if($('.active_page').prev('.page_link').length==true){
go_to_page(new_page);
}

functionnext(){
new_page=parseInt($('#current_page').val())+1;
//ifthereisanitemafterthecurrentactivelinkrunthefunction
if($('.active_page').next('.page_link').length==true){
go_to_page(new_page);
}

}
functiongo_to_page(page_num){
//getthenumberofitemsshownperpage
varshow_per_page=parseInt($('#show_per_page').val());

//gettheelementnumberwheretostarttheslicefrom
start_from=page_num*show_per_page;

//gettheelementnumberwheretoendtheslice
end_on=start_from+show_per_page;

//hideallchildrenelementsofcontentdiv,getspecificitemsandshowthem
$('#content').children().css('display','none').slice(start_from,end_on).css('display','block
');

/*getthepagelinkthathaslongdescattributeofthecurrentpageandaddactive_pageclasst
oit
andremovethatclassfrompreviouslyactivepagelink*/
$('.page_link[longdesc='+page_num+']').addClass('active_page').siblings('.active_page').remo
veClass('active_page');

//updatethecurrentpageinputfield
$('#current_page').val(page_num);
}

Final words
Thats it. I hope you like this tutorial, and if you didnt understand some part of it just say so and i will try to
further explain it.