SO - Pagination of an array

http://stackoverflow.com/q/8518885/1011582

by dzejkej

HTML

<a href="#" id="next">NEXT</a>
<ul id="list"></ul>

JavaScript

// just preparing some data
var arr = [];
for (var i = 1; i <= 100; i++) {
  arr.push({ name: 'name' + i, id: 'id' + i });
}

// our variable holding starting index of this "page"
var index = 0;

// display our initial list
displayNext();

$("#next").click(function() {
  // display next elements
  displayNext();
});

function displayNext() {
  // get the list element
  var list = $('#list');
  
  // get index stored as a data on the list, if it doesn't exist then assign 0
  var index = list.data('index') % arr.length || 0;
  
  // save next index - for next call
  list.data('index', index + 20);
  
  // 1) get 20 elements from array - starting from index, using Array.slice()
  // 2) map them to array of li strings
  // 3) join the array into a single string and set it as a HTML content of list
  list.html($.map(arr.slice(index, index + 20), function(val) {
    return '<li id=' + val.id + '>' + val.name + '</li>';
  }).join(''));
}