檢查最後和第一頁，並相應地禁用按鈕next-previous按鈕

Question

我有2個彈出窗口來顯示用戶列表&管理員列表，這將顯示每頁10個結果，這是工作正常。

我收到頁面號碼。來自JSON中的java servlet。

注意：有2個參數在url - resType和pageNo中傳遞。 pageNo。返回0，10，20 ...（10的倍數）。 resType：檢查我想要什麼樣的結果。你可以忽略這部分。

所以我在CREATETABLE功能的URL看起來是這樣的，而不是 -

如何禁用之前的按鈕，當它是第一頁？同樣，如果最後一頁是最後一頁，我該如何禁用最後一個按鈕？

這是代碼。

var currentPageNo = 0; // Keep track of currently displayed page 
 

 
\t \t $('.next-btn').unbind("click").on("click",function(){ // Give buttons an ID (include them in HTML as hidden) 
 
\t \t \t userList(currentPageNo+10); 
 
\t \t \t adminList(currentPageNo+10); 
 
\t \t \t 
 
\t \t }); 
 
\t \t $('.prev-btn').unbind("click").on("click",function(){ 
 
\t \t \t userList(currentPageNo-10); 
 
\t \t \t adminList(currentPageNo-10); 
 
\t \t }); 
 

 
\t \t function userList(pageNo) { 
 
\t \t \t var resType="userList"; 
 
\t \t \t createTable(resType,pageNo); 
 
\t \t } 
 
\t \t 
 
\t \t function adminList(pageNo) { 
 
\t \t \t var resType="adminList"; 
 
\t \t \t createTable(resType,pageNo); 
 
\t \t } 
 

 
\t \t function createTable(resType, pageNo) { 
 
\t \t \t // Update global variable 
 
\t \t \t currentPageNo = pageNo; 
 
\t \t \t // Set visibility of the "prev" button: 
 
\t \t \t $('.prev-btn').toggle(pageNo > 0); 
 
\t \t \t // Ask one record more than needed, to determine if there are more records after this page: 
 
\t \t \t $.getJSON("https://api.randomuser.me/?results=11&start="+pageNo, function(data) { 
 
\t \t \t \t $('#datatable tr:has(td)').empty(); 
 
\t \t \t \t // Check if there's an extra record which we do not display, 
 
\t \t \t \t // but determines that there is a next page 
 
\t \t \t \t $('.next-btn').toggle(data.results.length > 10); 
 
\t \t \t \t // Slice results, so 11th record is not included: 
 
\t \t \t \t data.results.slice(0, 10).forEach(function (record, i) { // add second argument for numbering records 
 
\t \t \t \t \t var json = JSON.stringify(record); 
 
\t \t \t \t \t $('#datatable').append(
 
\t \t \t \t \t \t $('<tr>').append(
 
\t \t \t \t \t \t \t $('<td>').append(
 
\t \t \t \t \t \t \t \t $('<input>').attr('type', 'checkbox') 
 
\t \t \t \t \t \t \t \t \t \t \t .addClass('selectRow') 
 
\t \t \t \t \t \t \t \t \t \t \t .val(json), 
 
\t \t \t \t \t \t \t \t (i+1+pageNo) // display row number 
 
\t \t \t \t \t \t \t), 
 
\t \t \t \t \t \t \t $('<td>').append(
 
\t \t \t \t \t \t \t \t $('<a>').attr('href', record.picture.thumbnail) 
 
\t \t \t \t \t \t \t \t \t \t .addClass('imgurl') 
 
\t \t \t \t \t \t \t \t \t \t .attr('target', '_blank') 
 
\t \t \t \t \t \t \t \t \t \t .text(record.name.first) 
 
\t \t \t \t \t \t \t), 
 
\t \t \t \t \t \t \t $('<td>').append(record.dob) 
 
\t \t \t \t \t \t) 
 
\t \t \t \t \t); 
 
\t \t \t \t }); 
 
\t \t \t \t // Show the prev and/or buttons 
 
\t \t \t \t 
 
\t \t \t \t 
 
\t \t \t }).fail(function(error) { 
 
\t \t \t \t console.log("**********AJAX ERROR: " + error); 
 
\t \t \t });    
 
\t \t } 
 

 
\t \t var savedData = []; // The objects as array, so to have an order. 
 

 
\t \t function saveData(){ 
 
\t \t \t var errors = []; 
 
\t \t \t // Add selected to map 
 
\t \t \t $('input.selectRow:checked').each(function(count) { 
 
\t \t \t \t // Get the JSON that is stored as value for the checkbox 
 
\t \t \t \t var obj = JSON.parse($(this).val()); 
 
\t \t \t \t // See if this URL was already collected (that's easy with Set) 
 
\t \t \t \t if (savedData.find(record => record.picture.thumbnail === obj.picture.thumbnail)) { 
 
\t \t \t \t \t errors.push(obj.name.first); 
 
\t \t \t \t } else { 
 
\t \t \t \t \t // Append it 
 
\t \t \t \t \t savedData.push(obj); 
 
\t \t \t \t } 
 
\t \t \t }); 
 
\t \t \t refreshDisplay(); 
 
\t \t \t if (errors.length) { 
 
\t \t \t \t alert('The following were already selected:\n' + errors.join('\n')); 
 
\t \t \t } 
 
\t \t } 
 

 
\t \t function refreshDisplay() { 
 
\t \t \t $('.container').html(''); 
 
\t \t \t savedData.forEach(function (obj) { 
 
\t \t \t \t // Reset container, and append collected data (use jQuery for appending) 
 
\t \t \t \t $('.container').append(
 
\t \t \t \t \t $('<div>').addClass('parent').append(
 
\t \t \t \t \t \t $('<label>').addClass('dataLabel').text('Name: '), 
 
\t \t \t \t \t \t obj.name.first + ' ' + obj.name.last, 
 
\t \t \t \t \t \t $('<br>'), // line-break between name & pic 
 
\t \t \t \t \t \t $('<img>').addClass('myLink').attr('src', obj.picture.thumbnail), $('<br>'), 
 
\t \t \t \t \t \t $('<label>').addClass('dataLabel').text('Date of birth: '), 
 
\t \t \t \t \t \t obj.dob, $('<br>'), 
 
\t \t \t \t \t \t $('<label>').addClass('dataLabel').text('Address: '), $('<br>'), 
 
\t \t \t \t \t \t obj.location.street, $('<br>'), 
 
\t \t \t \t \t \t obj.location.city + ' ' + obj.location.postcode, $('<br>'), 
 
\t \t \t \t \t \t obj.location.state, $('<br>'), 
 
\t \t \t \t \t \t $('<button>').addClass('removeMe').text('Delete'), 
 
\t \t \t \t \t \t $('<button>').addClass('top-btn').text('Swap with top'), 
 
\t \t \t \t \t \t $('<button>').addClass('down-btn').text('Swap with down') 
 
\t \t \t \t \t) \t 
 
\t \t \t \t); 
 
\t \t \t }) 
 
\t \t \t // Clear checkboxes: 
 
\t \t \t $('.selectRow').prop('checked', false); 
 
\t \t \t handleEvents(); 
 
\t \t } 
 

 
\t \t function logSavedData(){ 
 
\t \t \t // Convert to JSON and log to console. You would instead post it 
 
\t \t \t // to some URL, or save it to localStorage. 
 
\t \t \t console.log(JSON.stringify(savedData, null, 2)); 
 
\t \t } 
 

 
\t \t function getIndex(elem) { 
 
\t \t \t return $(elem).parent('.parent').index(); 
 
\t \t } 
 

 
\t \t $(document).on('click', '.removeMe', function() { 
 
\t \t \t // Delete this from the saved Data 
 
\t \t \t savedData.splice(getIndex(this), 1); 
 
\t \t \t // And redisplay 
 
\t \t \t refreshDisplay(); 
 
\t \t }); 
 

 
\t \t /* Swapping the displayed articles in the result list */ 
 
\t \t $(document).on('click', ".down-btn", function() { 
 
\t \t \t var index = getIndex(this); 
 
\t \t \t // Swap in memory 
 
\t \t \t savedData.splice(index, 2, savedData[index+1], savedData[index]); 
 
\t \t \t // And redisplay 
 
\t \t \t refreshDisplay(); 
 
\t \t }); 
 

 
\t \t $(document).on('click', ".top-btn", function() { 
 
\t \t \t var index = getIndex(this); 
 
\t \t \t // Swap in memory 
 
\t \t \t savedData.splice(index-1, 2, savedData[index], savedData[index-1]); 
 
\t \t \t // And redisplay 
 
\t \t \t refreshDisplay(); 
 
\t \t }); 
 
\t \t \t 
 
\t \t /* Disable top & down buttons for the first and the last article respectively in the result list */ 
 
\t \t function handleEvents() { 
 
\t \t \t $(".top-btn, .down-btn").prop("disabled", false).show(); 
 
\t \t \t $(".parent:first").find(".top-btn").prop("disabled", true).hide(); 
 
\t \t \t $(".parent:last").find(".down-btn").prop("disabled", true).hide(); 
 
\t \t } 
 

 
\t \t $(document).ready(function(){ 
 
\t \t \t $('#showExtForm-btn').click(function(){ 
 
\t \t \t \t $('#extUser').toggle(); 
 
\t \t \t }); 
 
\t \t \t $("#extUserForm").submit(function(e){ 
 
\t \t \t \t addExtUser(); 
 
\t \t \t \t return false; 
 
\t \t }); 
 
\t \t }); 
 

 
\t \t function addExtUser() { 
 
\t \t \t var extObj = { 
 
\t \t \t \t name: { 
 
\t \t \t \t \t title: "mr", // No ladies? :-) 
 
\t \t \t \t \t first: $("#name").val(), 
 
\t \t \t \t \t // Last name ? 
 
\t \t \t \t }, 
 
\t \t \t \t dob: $("#dob").val(), 
 
\t \t \t \t picture: { 
 
\t \t \t \t \t thumbnail: $("#myImg").val() 
 
\t \t \t \t }, 
 
\t \t \t \t location: { // maybe also ask for this info? 
 
\t \t \t \t } 
 
\t \t \t }; 
 
\t \t \t savedData.push(extObj); 
 
\t \t \t refreshDisplay(); // Will show some undefined stuff (location...) 
 
\t \t }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#userList" onclick="userList(0)">User List</button> 
 
<button class="btn btn-primary btn-sm" onclick="logSavedData()">Get Saved Data</button> 
 
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#adminList" onclick="adminList(0)">User Admin</button> 
 
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#extUser">Open External Form</button> 
 

 
\t \t \t \t \t <div class="modal fade" id="userList" role="dialog"> 
 
\t \t \t \t \t \t <div class="modal-dialog modal-lg"> 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t <div class="modal-content"> 
 
\t \t \t \t \t \t \t <div class="modal-header"> 
 
\t \t \t \t \t \t \t <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
\t \t \t \t \t \t \t <h4 class="modal-title">User List</h4> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="modal-body"> 
 
\t \t \t \t \t \t \t <div class="table-responsive"> 
 
            <table class="table table-bordered table-hover" id="datatable"> 
 
\t \t \t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t \t \t \t <th>Select</th> 
 
\t \t \t \t \t \t \t \t \t \t <th>Name</th> 
 
\t \t \t \t \t \t \t \t \t \t <th>DOB</th> 
 
\t \t \t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t \t \t </table> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="row"> 
 
\t \t \t \t \t \t \t \t <div class="col-sm-offset-3 col-sm-4"> 
 
\t \t \t \t \t \t \t \t \t <button type="button" class="btn btn-primary prev-btn"><span class="glyphicon glyphicon-chevron-left"></span></button> 
 
\t \t \t \t \t \t \t \t </div> 
 

 
\t \t \t \t \t \t \t \t <div class="col-sm-4"> 
 
\t \t \t \t \t \t \t \t \t <button type="button" class="btn btn-primary next-btn"><span class="glyphicon glyphicon-chevron-right"></span></button> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t </div> 
 
           <hr/> 
 
\t \t \t \t \t \t \t <div class="row"> 
 
\t \t \t \t \t \t \t \t <div class="col-sm-offset-3 col-sm-4"> 
 
\t \t \t \t \t \t \t \t \t <button type="button" class="btn btn-primary btn-sm" onclick="saveData()">Save selected</button> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t <div class="col-sm-4"> 
 
\t \t \t \t \t \t \t \t \t <button type="button" class="btn btn-primary btn-sm close-less-modal" data-dismiss="modal">Close</button> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <br /> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <div class="modal fade" id="adminList" role="dialog"> 
 
\t \t \t \t \t \t <div class="modal-dialog modal-lg"> 
 
\t \t \t \t \t \t <div class="modal-content"> 
 
\t \t \t \t \t \t \t <div class="modal-header"> 
 
\t \t \t \t \t \t \t <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
\t \t \t \t \t \t \t <h4 class="modal-title">Admin List</h4> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="modal-body"> 
 
\t \t \t \t \t \t \t <div class="table-responsive"> 
 
            <table class="table table-bordered table-hover" id="datatable"> 
 
\t \t \t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t \t \t \t <th>Select</th> 
 
\t \t \t \t \t \t \t \t \t \t <th>Name</th> 
 
\t \t \t \t \t \t \t \t \t \t <th>DOB</th> 
 
\t \t \t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t \t \t </table> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="row"> 
 
\t \t \t \t \t \t \t \t <div class="col-sm-offset-3 col-sm-4"> 
 
\t \t \t \t \t \t \t \t \t <button type="button" class="btn btn-primary prev-btn"><span class="glyphicon glyphicon-chevron-left"></span></button> 
 
\t \t \t \t \t \t \t \t </div> 
 

 
\t \t \t \t \t \t \t \t <div class="col-sm-4"> 
 
\t \t \t \t \t \t \t \t \t <button type="button" class="btn btn-primary next-btn"><span class="glyphicon glyphicon-chevron-right"></span></button> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t </div> 
 
           <hr/> 
 
\t \t \t \t \t \t \t <div class="row"> 
 
\t \t \t \t \t \t \t \t <div class="col-sm-offset-3 col-sm-4"> 
 
\t \t \t \t \t \t \t \t \t <button type="button" class="btn btn-primary btn-sm" onclick="saveData()">Save selected</button> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t <div class="col-sm-4"> 
 
\t \t \t \t \t \t \t \t \t <button type="button" class="btn btn-primary btn-sm close-less-modal" data-dismiss="modal">Close</button> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <br /> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <div class="modal fade" id="extUser" role="dialog"> 
 
\t \t \t \t \t \t <div class="modal-dialog modal-lg"> 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t <!-- External User--> 
 
\t \t \t \t \t \t <div class="modal-content"> 
 
\t \t \t \t \t \t \t <div class="modal-header"> 
 
\t \t \t \t \t \t \t <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
\t \t \t \t \t \t \t <h4 class="modal-title">Add External User</h4> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="modal-body"> 
 
\t \t \t \t \t \t \t <form class="form-horizontal" id="extUserForm"> 
 
\t \t \t \t \t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t \t \t \t <label class="control-label col-sm-3" for="name">Name:</label> 
 
\t \t \t \t \t \t \t \t <div class="col-sm-8"> 
 
\t \t \t \t \t \t \t \t \t <input type="text" class="form-control" id="name" name="name" required> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t \t \t \t <label class="control-label col-sm-3" for="myImg">Image:</label> 
 
\t \t \t \t \t \t \t \t <div class="col-sm-8"> 
 
\t \t \t \t \t \t \t \t \t <input type="text" class="form-control" id="myImg" name="myImg" required> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t \t \t \t <label class="control-label col-sm-3" for="dob">DOB:</label> 
 
\t \t \t \t \t \t \t \t <div class="col-sm-8"> 
 
\t \t \t \t \t \t \t \t \t <input type="date" class="form-control" id="dob" name="dob" required> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t <hr /> 
 
\t \t \t \t \t \t \t \t <div class="form-group">   
 
\t \t \t \t \t \t \t \t <div class="col-sm-offset-3 col-sm-3"> 
 
\t \t \t \t \t \t \t \t \t <button class="btn btn-primary btn-sm">Submit</button> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t <div class="col-sm-3"> 
 
\t \t \t \t \t \t \t \t \t <button type="reset" class="btn btn-primary btn-sm">Reset</button> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t <div class="col-sm-3"> 
 
\t \t \t \t \t \t \t \t \t <button type="button" class="btn btn-primary btn-sm close-external-modal" data-dismiss="modal">Close</button> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t </form> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 

 
<div class="container"></div>

Answer 1

在CREATETABLE應該區分要填充的兩個表之間進行。所以，你應該使用這樣一個選擇：

$('#' + resType + ' table') 

同樣的區分應該爲上/下一個按鈕，選擇進行：

$('#' + resType + ' .next-btn') 

而且這也是錯誤的，通話雙方用戶列表和adminList在同一個點擊處理程序中，因爲它會讓你跳過一頁結果（從0到20）。您應該根據選擇器調用適當的一個。因此，改變你的上/下一個點擊處理程序：

// 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); 
}); 

最後，該代碼會隱藏下一個按鈕，如果你在服務器上改變一件事情：讓它迴歸11條記錄，而不是10的JavaScript代碼可以那麼知道10條記錄之後是否還有更多數據（沒有顯示第11條記錄）。

下面是更新後的代碼：

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(
 
       $('<tr>').append(
 
        $('<td>').append(
 
         $('<input>').attr('type', 'checkbox') 
 
            .addClass('selectRow') 
 
            .val(json), 
 
         (i+1+pageNo) // display row number 
 
        ), 
 
        $('<td>').append(
 
         $('<a>').attr('href', record.picture.thumbnail) 
 
           .addClass('imgurl') 
 
           .attr('target', '_blank') 
 
           .text(record.name.first) 
 
        ), 
 
        $('<td>').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(
 
      $('<div>').addClass('parent').append(
 
       $('<label>').addClass('dataLabel').text('Name: '), 
 
       obj.name.first + ' ' + obj.name.last, 
 
       $('<br>'), // line-break between name & pic 
 
       $('<img>').addClass('myLink').attr('src', obj.picture.thumbnail), $('<br>'), 
 
       $('<label>').addClass('dataLabel').text('Date of birth: '), 
 
       obj.dob, $('<br>'), 
 
       $('<label>').addClass('dataLabel').text('Address: '), $('<br>'), 
 
       obj.location.street, $('<br>'), 
 
       obj.location.city + ' ' + obj.location.postcode, $('<br>'), 
 
       obj.location.state, $('<br>'), 
 
       $('<button>').addClass('removeMe').text('Delete'), 
 
       $('<button>').addClass('top-btn').text('Swap with top'), 
 
       $('<button>').addClass('down-btn').text('Swap with down') 
 
      ) \t 
 
     ); 
 
    }) 
 
    // Clear checkboxes: 
 
    $('.selectRow').prop('checked', false); 
 
    handleEvents(); 
 
} 
 

 
function logSavedData(){ 
 
    // Convert to JSON and log to console. You would instead post it 
 
    // to some URL, or save it to localStorage. 
 
    console.log(JSON.stringify(savedData, null, 2)); 
 
} 
 

 
function getIndex(elem) { 
 
    return $(elem).parent('.parent').index(); 
 
} 
 

 
$(document).on('click', '.removeMe', function() { 
 
    // Delete this from the saved Data 
 
    savedData.splice(getIndex(this), 1); 
 
    // And redisplay 
 
    refreshDisplay(); 
 
}); 
 

 
/* Swapping the displayed articles in the result list */ 
 
$(document).on('click', ".down-btn", function() { 
 
    var index = getIndex(this); 
 
    // Swap in memory 
 
    savedData.splice(index, 2, savedData[index+1], savedData[index]); 
 
    // And redisplay 
 
    refreshDisplay(); 
 
}); 
 

 
$(document).on('click', ".top-btn", function() { 
 
    var index = getIndex(this); 
 
    // Swap in memory 
 
    savedData.splice(index-1, 2, savedData[index], savedData[index-1]); 
 
    // And redisplay 
 
    refreshDisplay(); 
 
}); 
 
    
 
/* Disable top & down buttons for the first and the last article respectively in the result list */ 
 
function handleEvents() { 
 
    $(".top-btn, .down-btn").prop("disabled", false).show(); 
 
    $(".parent:first").find(".top-btn").prop("disabled", true).hide(); 
 
    $(".parent:last").find(".down-btn").prop("disabled", true).hide(); 
 
} 
 

 
$(document).ready(function(){ 
 
    $('#showExtForm-btn').click(function(){ 
 
     $('#extUser').toggle(); 
 
    }); 
 
    $("#extUserForm").submit(function(e){ 
 
     addExtUser(); 
 
     return false; 
 
    }); 
 
}); 
 

 
function addExtUser() { 
 
    var extObj = { 
 
     name: { 
 
      title: "mr", // No ladies? :-) 
 
      first: $("#name").val(), 
 
      // Last name ? 
 
     }, 
 
     dob: $("#dob").val(), 
 
     picture: { 
 
      thumbnail: $("#myImg").val() 
 
     }, 
 
     location: { // maybe also ask for this info? 
 
     } 
 
    }; 
 
    savedData.push(extObj); 
 
    refreshDisplay(); // Will show some undefined stuff (location...) 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#userList" onclick="userList(0)">User List</button> 
 
<button class="btn btn-primary btn-sm" onclick="logSavedData()">Get Saved Data</button> 
 
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#adminList" onclick="adminList(0)">User Admin</button> 
 
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#extUser">Open External Form</button> 
 

 
    <div class="modal fade" id="userList" role="dialog"> 
 
    <div class="modal-dialog modal-lg"> 
 
    
 
     
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
      <h4 class="modal-title">User List</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
      <div class="table-responsive"> 
 
       <table class="table table-bordered table-hover" id="datatable"> 
 
       <tr> 
 
        <th>Select</th> 
 
        <th>Name</th> 
 
        <th>DOB</th> 
 
       </tr> 
 
      </table> 
 
      </div> 
 
      <div class="row"> 
 
      <div class="col-sm-offset-3 col-sm-4"> 
 
       <button type="button" class="btn btn-primary prev-btn"><span class="glyphicon glyphicon-chevron-left"></span></button> 
 
      </div> 
 

 
      <div class="col-sm-4"> 
 
       <button type="button" class="btn btn-primary next-btn"><span class="glyphicon glyphicon-chevron-right"></span></button> 
 
      </div> 
 
     </div> 
 
      <hr/> 
 
     <div class="row"> 
 
      <div class="col-sm-offset-3 col-sm-4"> 
 
       <button type="button" class="btn btn-primary btn-sm" onclick="saveData()">Save selected</button> 
 
      </div> 
 
      <div class="col-sm-4"> 
 
       <button type="button" class="btn btn-primary btn-sm close-less-modal" data-dismiss="modal">Close</button> 
 
      </div> 
 
     </div> 
 
     <br /> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="modal fade" id="adminList" role="dialog"> 
 
    <div class="modal-dialog modal-lg"> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
      <h4 class="modal-title">Admin List</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
      <div class="table-responsive"> 
 
       <table class="table table-bordered table-hover" id="datatable"> 
 
       <tr> 
 
        <th>Select</th> 
 
        <th>Name</th> 
 
        <th>DOB</th> 
 
       </tr> 
 
      </table> 
 
      </div> 
 
      <div class="row"> 
 
      <div class="col-sm-offset-3 col-sm-4"> 
 
       <button type="button" class="btn btn-primary prev-btn"><span class="glyphicon glyphicon-chevron-left"></span></button> 
 
      </div> 
 

 
      <div class="col-sm-4"> 
 
       <button type="button" class="btn btn-primary next-btn"><span class="glyphicon glyphicon-chevron-right"></span></button> 
 
      </div> 
 
     </div> 
 
      <hr/> 
 
     <div class="row"> 
 
      <div class="col-sm-offset-3 col-sm-4"> 
 
       <button type="button" class="btn btn-primary btn-sm" onclick="saveData()">Save selected</button> 
 
      </div> 
 
      <div class="col-sm-4"> 
 
       <button type="button" class="btn btn-primary btn-sm close-less-modal" data-dismiss="modal">Close</button> 
 
      </div> 
 
     </div> 
 
     <br /> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="modal fade" id="extUser" role="dialog"> 
 
    <div class="modal-dialog modal-lg"> 
 
    
 
     <!-- External User--> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
      <h4 class="modal-title">Add External User</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
      <form class="form-horizontal" id="extUserForm"> 
 
      <div class="form-group"> 
 
       <label class="control-label col-sm-3" for="name">Name:</label> 
 
       <div class="col-sm-8"> 
 
       <input type="text" class="form-control" id="name" name="name" required> 
 
       </div> 
 
      </div> 
 
      <div class="form-group"> 
 
       <label class="control-label col-sm-3" for="myImg">Image:</label> 
 
       <div class="col-sm-8"> 
 
       <input type="text" class="form-control" id="myImg" name="myImg" required> 
 
       </div> 
 
      </div> 
 
              
 
      <div class="form-group"> 
 
       <label class="control-label col-sm-3" for="dob">DOB:</label> 
 
       <div class="col-sm-8"> 
 
       <input type="date" class="form-control" id="dob" name="dob" required> 
 
       </div> 
 
      </div> 
 
      <hr /> 
 
      <div class="form-group">   
 
       <div class="col-sm-offset-3 col-sm-3"> 
 
       <button class="btn btn-primary btn-sm">Submit</button> 
 
       </div> 
 
       <div class="col-sm-3"> 
 
       <button type="reset" class="btn btn-primary btn-sm">Reset</button> 
 
       </div> 
 
       <div class="col-sm-3"> 
 
       <button type="button" class="btn btn-primary btn-sm close-external-modal" data-dismiss="modal">Close</button> 
 
       </div> 
 
      </div> 
 
      </form> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
<div class="container"></div>