Überprüfen Sie die letzte und die erste Seite und deaktivieren Sie die Schaltfläche Next-vorherige Tasten entsprechend

Ich habe 2 Pop-ups zur Anzeige der Benutzerliste & Admin-Liste, die 10 Ergebnisse pro Seite anzeigen würde, die gut funktioniert.Überprüfen Sie die letzte und die erste Seite und deaktivieren Sie die Schaltfläche Next-vorherige Tasten entsprechend

Ich bekomme die Seite Nr. aus dem Java-Servlet im JSON.

Hinweis: In der URL sind zwei Parameter übergeben - resType und pageNo. SeiteNr. gibt 0, 10, 20 ... (Vielfache von 10) zurück. resType: überprüft, welche Art von Ergebnis ich möchte. Sie können diesen Teil ignorieren.

meine url in der Funktion create sieht so etwas wie folgt statt -

Wie kann ich die vorherige Taste zu deaktivieren, wenn es die erste Seite? Ebenso, wie deaktiviere ich die letzte Taste, wenn es die letzte Seite ist?

Hier ist der Code.

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>

Quelle

2017-04-13 Sunny

In create sollte unterschieden werden Sie auffüllen möchten, zwischen denen der beiden Tabellen vorgenommen werden. So sollten Sie einen Selektor wie verwenden:

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

Die gleiche Unterscheidung sollte für die prev/next Taste Selektoren vorgenommen werden:

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

Und es ist auch falsch beide zu nennen userlist und Adminlist im selben Click-Handler, da Sie damit eine Seite mit Ergebnissen überspringen (von 0 bis 20). Sie sollten den entsprechenden auf dem Selektor anrufen. So Ihre i.Vj./zum nächsten Klick-Handler ändern:

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

Schließlich wird der Code die nächsten Schaltfläche ausblenden, wenn Sie eine Sache auf dem Server ändern: lassen Sie es 11 Datensätze zurück, statt 10. Der JavaScript-Code kann dann wissen Sie, ob nach den 10 Datensätzen noch mehr Daten vorhanden sind (ohne den 11. Datensatz anzuzeigen). Hier

wird Code aktualisiert:

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>

Quelle

2017-04-13 14:16:01 trincot

Ich habe genau das gleiche, aber aus irgendeinem Grund kann ich nicht die vorherigen und nächsten Schaltflächen in beide sehen die Pop-ups, wenn ich meine URL und JSON! Könnte das das Problem mit dem pageIndex sein, wie ich oben in meiner Anmerkung erwähnte? – Sunny

Ich versuche auch, die Anzeige basierend auf dem neuen JSON zu aktualisieren, der meine savedData hat. Aber es wirft einen Fehler auf. Könnten Sie bitte einen Blick darauf werfen? Hier ist meine Frage - http://stackoverflow.com/questions/43446315/saving-new-json-recieded-through-ajax-to-the-existing-array – Sunny

Ich denke pageIndex hier unterscheidet sich von data.results.length. – Sunny

Überprüfen Sie die letzte und die erste Seite und deaktivieren Sie die Schaltfläche Next-vorherige Tasten entsprechend

Antwort

Verwandte Themen