News Archive
Related Articles
PhpRiot Newsletter
Your Email Address:

More information

JavaScript: Retrieve and paginate JSON-encoded data

Note: This article was originally published at Planet PHP on 10 October 2011.
Planet PHP

The jquery.paginate.js plugin allows you to retrieve a large data set in JSON format from a server script and load the data into a unordered list (or table) with client side pagination enabled. To use this plugin you need to:

Include jquery.min.js and jquery.paginate.min.js in your document:

Include a small css to skin the navigation links:

a.disabled { text-decoration: none; color: black; cursor: default; }

Define an ID on the element you want to paginate, for example: aolistitemsa. If you have a more than 10 child elements and you want to avoid displaying them before the javascript is executed, you can set the element as hidden by default:

    Place a div in the place you want to display the navigation links:

    « Previous Next »

    Finally, include an initialization script at the bottom of your page like this:

    $(document).ready(function() { AAA $.getJSON('data.json', function(data) { AAAAAAA var items = []; AAAAAAA $.each(data.items, function(i, item) { AAAAAAAAAAA items.push('
  • ' + item + '
  • '); AAAAAAA }); AAAAAAA $('#listitems').append(items.join('')); AAAAAAA $('#listitems').paginate({itemsPerPage: 5}); AAA }); });

    That's all. You can view a demo here, fork the code on GitHub or download it.

    Filed under: Open-source, Programming, Web Services