Paginação: usando um botão "Obter mais" com getJSON

Eu sou completamente novo nisso, então, por favor, me perdoe se eu não conseguir informações suficientes. Estou exibindo potencialmente milhares de registros usando JSON e um listview, no entanto, preciso mostrar apenas 20 de cada vez, com um botão "mostrar mais" na parte inferior. Eu não estou entendendo como eu mudaria meu javascript atual para permitir isso, espero que alguém possa me apontar na direção certa. Eu tenho tentado aplicar este código para fazê-lo funcionar, mas sem sucesso:

http://jsfiddle.net/knuTW/2/

Meu javascript atual para exibir os dados JSON:

function getEmployeeList() {
$.getJSON(serviceURL + 'getmeals.php?calfrom='+ var1 + '&calto=' + var2, function(data) {
    $('#employeeList li').remove();
    employees = data.items;
    $.each(employees, function(index, employee) {
        $('#employeeList').append('<li><a href="employeedetails.html?id=' + employee.id + '">' +
            '<img src="http://www.restaurants.com/assets/img/logos/' + employee.restaurant + '.jpg"/>' +    
                '<h4>' + employee.meal_item + '</h4>' +
                '<p>Calories: ' + employee.calories + '</p>' +
                '<span class="ui-li-count">' + employee.protein + '</span></a></li>');

    });
    $('#employeeList').listview('refresh');
});
}

HTML:

<div id="employeeListPage" data-role="page" >

<div data-role="header" data-position="fixed">
    <h1>Restaurant Meals</h1>
</div>

<div data-role="content">
     <ul id="employeeList" data-role="listview" data-filter="true"></ul>
     <ul class="load-more"><a href="#">Load More</a></ul>
</div>      

questionAnswers(1)

yourAnswerToTheQuestion