I’m trying to implement a simple paginate but I’m falling at the last hurdle! I’m using http://botmonster.com/jquery-bootpag/#.Ua3glthYBI0
My code is thus;
<div class="box-250">
<h2><span>News</span></h2>
<div id="content-p">
<div class="news-item small" id="newsitem-antrim-youth-fair">
<div>
<h3>The Antrim Youth Fair 1</h3>
<p><span>April 2013</span>
</p>
<p>The Antrim Youth Fair is taking place on Wednesday 1st May 2011 from 9.30am – 3.30pm at Parkhall Integrated College – Senior School [<a href="http://goo.gl/maps/G75NK" style="color:#0000FF;text-align:left">Directions</a>]</p> <a href="publications/locality-groups/antrim/antrim_youth_fair_flyer.pdf"
target="_blank">See flyer here</a>
</p>
</div>
</div>
<div class="news-item small" id="newsitem-antrim-youth-fair">
<div>
<h3>The Antrim Youth Fair 1</h3>
<p><span>April 2013</span>
</p>
<p>The Antrim Youth Fair is taking place on Wednesday 1st May 2011 from 9.30am – 3.30pm at Parkhall Integrated College – Senior School [<a href="http://goo.gl/maps/G75NK" style="color:#0000FF;text-align:left">Directions</a>]</p> <a href="publications/locality-groups/antrim/antrim_youth_fair_flyer.pdf"
target="_blank">See flyer here</a>
</p>
</div>
</div>
<div class="news-item small" id="newsitem-antrim-youth-fair">
<div>
<h3>The Antrim Youth Fair 1</h3>
<p><span>April 2013</span>
</p>
<p>The Antrim Youth Fair is taking place on Wednesday 1st May 2011 from 9.30am – 3.30pm at Parkhall Integrated College – Senior School [<a href="http://goo.gl/maps/G75NK" style="color:#0000FF;text-align:left">Directions</a>]</p> <a href="publications/locality-groups/antrim/antrim_youth_fair_flyer.pdf"
target="_blank">See flyer here</a>
</p>
</div>
</div>
<div class="news-item small" id="newsitem-antrim-youth-fair">
<div>
<h3>The Antrim Youth Fair 1</h3>
<p><span>April 2013</span>
</p>
<p>The Antrim Youth Fair is taking place on Wednesday 1st May 2011 from 9.30am – 3.30pm at Parkhall Integrated College – Senior School [<a href="http://goo.gl/maps/G75NK" style="color:#0000FF;text-align:left">Directions</a>]</p> <a href="publications/locality-groups/antrim/antrim_youth_fair_flyer.pdf"
target="_blank">See flyer here</a>
</p>
</div>
</div>
<div class="news-item small last" id="newsitem-antrim-youth-fair">
<div>
<h3>The Antrim Youth Fair 1</h3>
<p><span>April 2013</span>
</p>
<p>The Antrim Youth Fair is taking place on Wednesday 1st May 2011 from 9.30am – 3.30pm at Parkhall Integrated College – Senior School [<a href="http://goo.gl/maps/G75NK" style="color:#0000FF;text-align:left">Directions</a>]</p> <a href="publications/locality-groups/antrim/antrim_youth_fair_flyer.pdf"
target="_blank">See flyer here</a>
</p>
</div>
</div>
</div>
<div id="page-selection">Pagination goes here</div>
</div>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
<script src="//raw.github.com/botmonster/jquery-bootpag/master/lib/jquery.bootpag.js"></script>
<script>
// init bootpag
$('#page-selection').bootpag({
total: 3
}).on("page", function (event, /* page number here */ num) {
$("#content-p").html("Insert content"); // some ajax content loading...
});
</script>
Hi stephen,
You need to replace this line:
$("#content-p").html("Insert content"); // some ajax content loading...
with code that makes an ajax request to get the next page of results. You need to set up a URL on your server that will take the page number as a parameter, and return the correct results that you can insert into the page.
Could I add an ID or class to the content that needs paginated, they are all separated divs with the class “news-item small”?
You mean after you’ve got the content from the server, but before you insert it into the page?
I’m over complicating it i think by using ajax - i’ll only need to paginate a few divs - possibly this solution would be better - http://www.script-tutorials.com/how-to-create-easy-pagination-with-jquery/
Just out of interest, is it a variable amount of content you want to paginate or a fixed amount?
Are you pulling the content from a DB (or similar) or are you adding it directly to your page by hand?
Hi Pullo - I’m only adding it to the page - I don’t think a DB will be needed.
Hi,
Could you not then use something like this?
Tabs are great but not for this - its a news feed. But thanks for the advice
Oh ok, no problem.
But now I’m a bit lost about what you’re trying to do.
Could you elaborate slightly?
Oh, and this might be worth taking a look at: http://beneverard.github.io/jqPagination/
Is this the kind of thing you’re after?
I’ve used your example code from the beginning of the thread, but changed the title of each news item so that you can tell when the page has updated. This uses the code you linked earlier, from: http://www.script-tutorials.com/how-to-create-easy-pagination-with-jquery/
Perfect gentleman thanks for your time on this - I really like the UI of http://beneverard.github.io/jqPagination/ how could I implement it to paginate a load of divs akin to the example you provided fretbuner?
I’ll try and do this first and come back to you - need to learn this as well… as always many thanks guys your doing a load of people benefit here!
Okay so i need to change
$('.pagination').jqPagination({
link_string : '/?page={page_number}',
max_page : 40,
paged : function(page) {
$('.log').prepend('<li>Requested page ' + page + '</li>');
}
});
To allow my div’s all id’ with news-item to be paginated. Fretburner in his example has this;
var pager = new Imtech.Pager();
$(document).ready(function () {
pager.paragraphsPerPage = 1; // set amount elements per page
pager.pagingContainer = $('#content'); // set of main container
pager.paragraphs = $('div.news-item', pager.pagingContainer); // set of required containers
pager.showPage(1);
});
I now need to find a way of changing the
$('.log').prepend('<li>Requested page ' + page + '</li>');
to pick up divs id’ ‘news-item’ within the ‘content’ div block to be paginated.
Please tell me I’m on the right lines!
Hi,
Here’s an example of how to paginate three div elements using the plugin.
Demo
Code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery Paginate</title>
<link rel="stylesheet" type="text/css" href="./css/jqpagination.css" />
<style>
.wrapper{ padding:15px; }
.container > div{
width:250px;
padding:15px 0;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<div>My first div</div>
<div>My second div</div>
<div>My third div</div>
</div>
<div class="pagination">
<a href="#" class="first" data-action="first">«</a>
<a href="#" class="previous" data-action="previous">‹</a>
<input type="text" readonly="readonly" />
<a href="#" class="next" data-action="next">›</a>
<a href="#" class="last" data-action="last">»</a>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="./js/jquery.jqpagination.js"></script>
<script>
$(function(){
$('.container div:not(:first)').hide();
$('.pagination').jqPagination({
max_page : $('.container div').length,
paged : function(page) {
// a new 'page' has been requested
// hide all paragraphs
$('.container div').hide();
// but show the one we want
$($('.container div')[page - 1]).show();
}
});
});
</script>
</body>
</html>
Initial example found here: http://stackoverflow.com/questions/11362445/how-to-use-jqpagination
Hope that helps.
Very kind for the help it is something that will work perfectly. As soon as the page is ‘live’ i’ll send you & fretburner a link - you may not be interested but when you see why i’m doing this you’ll be glad to have helped out!
No probs 
That’d be great and I am interested.
It’s always nice to see what projects people are working on.
I look forward to it.
Thanks again- Pullo last thing if I wanted to show 2 divs on each page do I edit
max_page : $('.paginate-container div').length,
Is this the idea?
Sorry, I don’t quite understand.
What do you mean by “show two divs”?
Could you elaborate a little.
Instead of 1 paragraph (div) on each page 2 paragraphs would show on each paginated page.