Problems in handling pagination in jquery - php

Question

I have a mysql database and I am using jquery to do a live search which is working like a charm. But I have tried alot of ways to have a pagenation for my search results.
Below is my jquery code
$(document).ready(function(){
/*
Set the inner html of the table, tell the user to enter a search term to get started.
We could place this anywhere in the document. I chose to place it
in the table.
*/
$.get('data/search-data.php', function(returnData) {
$('#results').html(returnData);
});
/* When the user enters a value such as "j" in the search box
* we want to run the .get() function. */
$('#searchData').keyup(function() {
/* Get the value of the search input each time the keyup() method fires so we
* can pass the value to our .get() method to retrieve the data from the database */
var searchVal = $(this).val();
/* If the searchVal var is NOT empty then check the database for possible results
* else display message to user */
if(searchVal !== '') {
/* Fire the .get() method for and pass the searchVal data to the
* search-data.php file for retrieval */
$.get('data/search-data.php?searchData='+searchVal, function(returnData) {
/* If the returnData is empty then display message to user
* else our returned data results in the table. */
if (!returnData) {
$('#results').html('<p style="padding:5px;">Search term entered does not return any data.</p>');
} else {
$('#results').html(returnData);
}
});
} else {
$.get('data/search-data.php?searchData='+searchVal, function(returnData) {
$('#results').html(returnData);
});
}
});
});

Answer 1

A simple solution, without delving into javascript object and/or templating is returning the pages from the server like this:
<div data-page="1" class="results">
<ul>
<li>Result 1</li>
<li>Result 2</li>
</ul>
</div>
<div data-page="2" class="hidden results">
<ul>
<li>Result 3</li>
<li>Result 4</li>
</ul>
</div>
<div data-page="3" class="hidden results">
<ul>
<li>Result 4</li>
<li>Result 5</li>
</ul>
</div>
<div id="pager"></div>
then create the pager links with jquery on the ajax callback:
var links = [];
$('.results').each(function(i) {
var link = $('<a />', {
text: i+1,
href: '#'
});
links.push(link);
});
$('#pager').html(links);
then a click handler will toggle the display of the pages:
$('#pager').on('click', 'a', function() {
var i = $(this).index();
$('.results').eq(i).removeClass('hidden').siblings('.results').addClass('hidden');
return false;
});
DEMO: http://jsfiddle.net/Ry7NJ/1/