Populate a div depending on link pressed


If you use this plugin you have to do a few more things:

  • get the number of total pages for that particular product (using COUNT(*) WHERE product_id=...) and store it into items varialble
  • prepare a php script that will return the records for one page, using itemsOnPage parameter (or modify existing script)
  • use onPageClick function which will call above mentioned php script to fetch pages

But documentation for this plugin is not very comprehensive. So maybe you try this one, which has a nice tutorial along with it.

I have never done any jquery/ajax pagination so I can not give you any finished code. I used PEAR Pager class for this purpose and it was doing it's job very well.


So I have been doing a bit of reading about pear pager. To be honest I'm none the wiser!

Can it put pagination on a div? Will it work with my existing code?

I'm really struggling to paginate this div!



Yes, but then you have to forget all the ayax stuff. This means that on each click (either on one of the links for categories or links for pages) the wholepage will be refreshed/reloaded. This in your case is OK since about 90% of page contents gets refreshed anyway.

To use Pager for paginating DB results see this link (from the maintainer of the package) and use method #2 which is simpler.


If you do not have many results for each div you can also fake pagging. You read all the product data but display only a portion of it and hide the rest (using CSS display:none). On clicking page links you can then unhide another portion and hide previous.


I eventually got this sorted.

This is what my final code looks like

// whenever a link with clategory class is clicked
$('a.category').click(function(e) {
// first stop the link to go anywhere
//get the text of the link by converting the clicked object to string
var linkText = new String(this);
// the value after the last / is the category ID
var categoryValue = linkText.substring(linkText.lastIndexOf('/') + 1);
// send the category ID to the getProductData.php script using jquery ajax post method
// send along a category ID
// on success insert the returned text into the chosen div
$.post('showproducts.php', {category: categoryValue}, function(data) {
//find total number of records
var totalRecords = $(data).length;
//define how many records shown per page
var pageSize = 8;
//work out number of pages needed to hold records
var numOfPages = Math.ceil(totalRecords / pageSize);
//make page links
var i,
  pageLinks = '<div class="pageLinks">';
for (i = 0; i < numOfPages; i++) {
  pageLinks += '<a href="#" onclick="showToyPage(' + i + ');return false;">' + (i + 1) + '<\/a> ';
pageLinks += '<\/div>';
//display returned data and page links in chosen div ('info)
$('#info').html(pageLinks + data);
//function to slice up records into pages
function showToyPage( pageNo ) { 
    var perPage = 8; 
    var start = pageNo * perPage; 
    var end = start + perPage; 
    $('.image1').hide().filter(function(index) { 
        return ( (index > (start-1)) && ( index < end ) ); 
    } ).show(); 

Question Answered as of 1 Year Ago by broj1 and Atli
This question has already been solved: Start a new discussion instead
Start New Discussion
Tags Related to this Article