JavaScript: Retrieve and paginate JSON-encoded data

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: a�olistitemsa��. 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() { A�A�A� $.getJSON('data.json', function(data) { A�A�A�A�A�A�A� var items = []; A�A�A�A�A�A�A� $.each(data.items, function(i, item) { A�A�A�A�A�A�A�A�A�A�A� items.push('

' + item + '

'); A�A�A�A�A�A�A� }); A�A�A�A�A�A�A� $('#listitems').append(items.join('')); A�A�A�A�A�A�A� $('#listitems').paginate({itemsPerPage: 5}); A�A�A� }); });

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

Filed under: Open-source, Programming, Web Services

• Read the original article at Planet PHP