var currentPageNo = 0; // Keep track of currently displayed page // Select button that is descendant of userList $('#userList .prev-btn').click(function(){ userList(currentPageNo-10); }); $('#userList .next-btn').click(function(){ userList(currentPageNo+10); }); $('#adminList .prev-btn').click(function(){ adminList(currentPageNo-10); }); $('#adminList .next-btn').click(function(){ adminList(currentPageNo+10); }); function userList(pageNo) { var resType="userList"; createTable(resType,pageNo); } function adminList(pageNo) { var resType="adminList"; createTable(resType,pageNo); } function createTable(resType, pageNo) { // Update global variable currentPageNo = pageNo; // Set visibility of the correct "prev" button: $('#' + resType + ' .prev-btn').toggle(pageNo > 0); // Ask one record more than needed, to determine if there are more records after this page: $.getJSON("https://api.randomuser.me/?results=11&resType="+resType + "&pageIndex=" + pageNo, function(data) { var $table = $('#' + resType + ' table'); $('tr:has(td)', $table).empty(); // Check if there's an extra record which we do not display, // but determines that there is a next page $('#' + resType + ' .next-btn').toggle(data.results.length > 10); // Slice results, so 11th record is not included: data.results.slice(0, 10).forEach(function (record, i) { // add second argument for numbering records var json = JSON.stringify(record); $table.append( $('
').append(record.dob) ) ); }); // Show the prev and/or buttons }).fail(function(error) { console.log("**********AJAX ERROR: " + error); }); } var savedData = []; // The objects as array, so to have an order. function saveData(){ var errors = []; // Add selected to map $('input.selectRow:checked').each(function(count) { // Get the JSON that is stored as value for the checkbox var obj = JSON.parse($(this).val()); // See if this URL was already collected (that's easy with Set) if (savedData.find(record => record.picture.thumbnail === obj.picture.thumbnail)) { errors.push(obj.name.first); } else { // Append it savedData.push(obj); } }); refreshDisplay(); if (errors.length) { alert('The following were already selected:\n' + errors.join('\n')); } } function refreshDisplay() { $('.container').html(''); savedData.forEach(function (obj) { // Reset container, and append collected data (use jQuery for appending) $('.container').append( $('