Website pagination [help please]

[Fzero]

I know Wordpress or other CMS makes this type of thing nice and easy, but I am looking to set up pagination into a basic HTML site.


It's not something I have looked into before, I was looking at examples of jquery pagination last night and just cannot see how it is implemented.


Taking this jquery one called jqPaginator as an example, it's really nice looking and allows the visitor to directly enter the page number, which is what I really like about this one compared to many others.


http://beneverard.github.com/jqPagination/


So, on that page, it shows the basic HTML which will get the pagination buttons showing.


Also it shows the JS to initialise it from the HTML.


What I cannot understand is _how_ do you identify which content you want to set as the end of one page and the start of the next?


If I have a load of photos on a page, rather than scrolling down forever I want to show only 10, then to view more you'd have to click on the 'next page' button of the pagination.


I don't see how these scripts recognise that I want the first page to end at my 10th photo, my second page to end at my 20th photo....etc.


I'm baft.


I've no idea but hoping it is not too complicated.


Anyone who uses pagination or can explain this to me please?


Cheers

 

[milkshake]

pagnation is mainly for data coming out of a DB as you can controll the number of rows coming out of the DB per pagnation.


lets say for example you have 1000 rows of data in your DB be it text or links to images etc and if your using mysql for example you can run the following query...

select colname from tablename

this will return all rows for that column, but if you extend your sql to:

select colname from tablename limit 0,10

this will bring back the first 10 rows from the db, you can extend this further by passing html params into sql query assuming your using some sort of scripting i.e. php, perl, python etc

select colname from tablename limit $startfrom,$end

//where $startfrom and $end are which rows you would like to retrieve

as I started to write this I found a link which explains this for me lol so here it is instead.


http://www.phpsimpli...m/tips.php?id=1

 

[Fzero]

Thanks for reply.


That is how I understood it originally too, as I've only ever used it with my Wordpress sites - which are MYSQL driven with PHP.


However, I really wanted to use a non-Wordpress [or any CMS] for a new site.


I plan to have a lot of photos though, and that's when I looked into pagination further.


Take a look at this Fiddle, not done by myself of course, I just found this literally 10 mins ago off StackOverflow:


http://jsfiddle.net/beneverard/2HLZF/


It is from the creator of the jqPagination.


Now that is not using any database is it? Far as I can see, it is somehow recognising to paginate at each paragraph <p> element.


I don't know how though, how it knows to paginate at the <p> element?


I'm sure [somehow] this pagination solution would work for me if I could understand it, ideally to paginate at a specific Class or ID, so I could throw one of those in every 10th photo...


Confusing me though, I can't get it working yet

 

[milkshake]

thats using jquery to hide the <p> elements and show one at a time, relatively simple really.


essentially each <p> has within the container has an index and because of this we could hide or show a <p> block using this index like so

$('#container p').hide(); //this would hide all the p blocks
$('#container p').show(); //this would show all the p blocks

//index starts at 0
$('#container p:eq(0)').hide(); //this would hide the first p block
$('#container p:eq(1)').show(); //this would show the second p block
[/xml]

 

[Fzero]

That's what I thought ... relatively simple ... then I tried it and failed


I got my HTML page...


I got the HTML syntax within that, as per the Fiddle demo...


I got source links to the 3 JS files, the main jquery file, the jqpagination file, and the script file, which is as per the Fiddle demo JS...


But that don't work for me, I see all the <p> elements, none are hidden, and the pagination buttons do nada.


It does seem pretty simple and it's driving me a bit mad trying to see what I'm doing wrong.


My lack of jquery knowledge doesn't help.


I'll upload the simple example I created to my host server, then if you can see anything obvious I done wrong... would you mind taking a look?

 

[milkshake]

sure go ahead

 

[Fzero]

Cheers


Here is the page:


http://vomitingvulture.com/testing/test.html


That links to the 3 javascript files, that's all I have so far so it is pretty simple and no other js that might been conflicting...

 

[milkshake]

the problem is you are introducing the jquery plugin js file before your introduce jquery itself.


also I would put the script tags at the top of the page inside the head tags

 

[Fzero]

:unsure: <-- Shame face,


Thanks, I will re-order the files and place them up in the header and test again.


Makes sense though about the calling order, now you mention it, hadn't considered that before of course.


I typically do always put the links to JS in the headings, but I recently saw code that placed them at the bottom, as I have done here, in order to speed up the page loading time.


I was just copying that trying to be clever...


Cheers though, I'll give that a go now...

 

[Fzero]

Nice one milkshake!


It's working now ... Now I just need to look into making this thing work at another level besides the <p> tag, but I'll back these files up now and play around with it.


I did have to change one other thing too, one of those JS files [script.js] had some alert showing when viewing in my Chrome Inspector, I clicked the link and noticed it had some strange trailing chars on the end, which were not showing when I viewed the file in Sublime [my text editor]


These characters were sitting at the end of the file for some reason:


​


....No idea what they are, unless it's some hidden characters from copy/pasting from the website to my text file, seen similar issues when copying from browser in that apostrophes sometimes don't copy over correct and need manually rewriting.


Anyway thanks for the tip, I'll bear that one in mind for future jquery work ... Note to self, "call the jquery main file before any files are are referencing that"


Thanks mate

 

[milkshake]

did some quick custom code for same html example without pagination plugin in case anyone cares lol


http://jsfiddle.net/9jUUX/8/

get_index = function(){

//get index for visible p element and return it

var pIndex = $('.some-container p[rel="visible"]').index();

return pIndex;

}


set_text = function(){

//set input box value

var pIndex = $('.some-container p[rel="visible"]').index();

var pLength = $('.some-container p').length;

$('input').val('Page '+(pIndex+1)+' of '+pLength);

}


set_binds = function(){


$('.first').click(function(event) {

event.preventDefault(); //prevent default link action

$('.some-container p').hide().removeAttr('rel'); // hide all p elements

$('.some-container p:eq(0)').show()

.attr('rel','visible'); //show the first and set the rel attribute for use with getting the p element index


set_text(); //set input box value

});


$('.previous').click(function(event){

event.preventDefault(); //prevent default link action

var pIndex = get_index(); //current p element index

var nIndex = (pIndex == 0)? 0 : pIndex-1; //next index dont go lower than 0

$('.some-container p').hide().removeAttr('rel'); // hide all p elements

$('.some-container p:eq('+nIndex+')').show()

.attr('rel','visible'); //show the previous and set the rel attribute for use with getting the p element index

set_text(); //set input box value

});


$('.next').click(function(event){

event.preventDefault(); //prevent default link action

var pIndex = get_index(); //current p element index

var pNum = $('.some-container p').length; //number of p elements

var nIndex = (pIndex == (pNum-1))? pIndex : pIndex+1; //next index don''t go higher than total num of p elements

$('.some-container p').hide().removeAttr('rel'); // hide all p elements

$('.some-container p:eq('+nIndex+')').show()

.attr('rel','visible'); //show the next and set the rel attribute for use with getting the p element index

set_text(); //set input box value

});


$('.last').click(function(event) {

event.preventDefault(); //prevent default link action

var pNum = $('.some-container p').length; //number of p elements

$('.some-container p').hide().removeAttr('rel'); // hide all p elements

$('.some-container p:eq('+(pNum-1)+')').show()

.attr('rel','visible'); //show the first and set the rel attribute for use with getting the p element index

set_text(); //set input box value

});

}


$(document).ready(function() {


// hide all but the first of our paragraphs

set_binds(); //attatch click functionality to elements

$('.first').click(); //simulate a click on the << element to set us to the beggining of the pagnation


});