Check The Last And The First Page And Disable Button Next-previous Buttons Accordingly

I've 2 pop-ups to display the user list & admin list which would display 10 results per page, which is working fine. I'm getting the page nos. from the java servlet in the JSON

Solution 1:

In createTable a distinction should be made between which of the two tables you want to populate. So you should use a selector like:

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

The same distinction should be made for the prev/next button selectors:

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

And it is also wrong to call both userList and adminList in the same click handler, as it will make you skip a page of results (from 0 to 20). You should call the appropriate one based one the selector. So change your prev/next click handlers to:

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

Finally, the code will hide the next button if you change one thing on the server: let it return 11 records instead of 10. The JavaScript code can then know if after the 10 records there is still more data (without showing the 11th record).

Here is updated code:

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

functionuserList(pageNo) {
    var resType="userList";
    createTable(resType,pageNo);
}

functionadminList(pageNo) {
    var resType="adminList";
    createTable(resType,pageNo);
}

functioncreateTable(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 recordsvar 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.functionsaveData(){
    var errors = [];
    // Add selected to map
    $('input.selectRow:checked').each(function(count) {
        // Get the JSON that is stored as value for the checkboxvar 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'));
    }
}

functionrefreshDisplay() {
    $('.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')
            )	
        );
    })
    // Clear checkboxes:
    $('.selectRow').prop('checked', false);
    handleEvents();
}

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

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

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

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

$(document).on('click', ".top-btn", function() {
    var index = getIndex(this);
    // Swap in memory
    savedData.splice(index-1, 2, savedData[index], savedData[index-1]);
    // And redisplayrefreshDisplay();
});
    
/* Disable top & down buttons for the first and the last article respectively in the result list */functionhandleEvents() {
    $(".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();
        returnfalse;
   });
});

functionaddExtUser() {
    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...)
}

<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"/><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><buttonclass="btn btn-primary btn-sm"data-toggle="modal"data-target="#userList"onclick="userList(0)">User List</button><buttonclass="btn btn-primary btn-sm"onclick="logSavedData()">Get Saved Data</button><buttonclass="btn btn-primary btn-sm"data-toggle="modal"data-target="#adminList"onclick="adminList(0)">User Admin</button><buttonclass="btn btn-primary btn-sm"data-toggle="modal"data-target="#extUser">Open External Form</button><divclass="modal fade"id="userList"role="dialog"><divclass="modal-dialog modal-lg"><divclass="modal-content"><divclass="modal-header"><buttontype="button"class="close"data-dismiss="modal">&times;</button><h4class="modal-title">User List</h4></div><divclass="modal-body"><divclass="table-responsive"><tableclass="table table-bordered table-hover"id="datatable"><tr><th>Select</th><th>Name</th><th>DOB</th></tr></table></div><divclass="row"><divclass="col-sm-offset-3 col-sm-4"><buttontype="button"class="btn btn-primary prev-btn"><spanclass="glyphicon glyphicon-chevron-left"></span></button></div><divclass="col-sm-4"><buttontype="button"class="btn btn-primary next-btn"><spanclass="glyphicon glyphicon-chevron-right"></span></button></div></div><hr/><divclass="row"><divclass="col-sm-offset-3 col-sm-4"><buttontype="button"class="btn btn-primary btn-sm"onclick="saveData()">Save selected</button></div><divclass="col-sm-4"><buttontype="button"class="btn btn-primary btn-sm close-less-modal"data-dismiss="modal">Close</button></div></div><br /></div></div></div></div><divclass="modal fade"id="adminList"role="dialog"><divclass="modal-dialog modal-lg"><divclass="modal-content"><divclass="modal-header"><buttontype="button"class="close"data-dismiss="modal">&times;</button><h4class="modal-title">Admin List</h4></div><divclass="modal-body"><divclass="table-responsive"><tableclass="table table-bordered table-hover"id="datatable"><tr><th>Select</th><th>Name</th><th>DOB</th></tr></table></div><divclass="row"><divclass="col-sm-offset-3 col-sm-4"><buttontype="button"class="btn btn-primary prev-btn"><spanclass="glyphicon glyphicon-chevron-left"></span></button></div><divclass="col-sm-4"><buttontype="button"class="btn btn-primary next-btn"><spanclass="glyphicon glyphicon-chevron-right"></span></button></div></div><hr/><divclass="row"><divclass="col-sm-offset-3 col-sm-4"><buttontype="button"class="btn btn-primary btn-sm"onclick="saveData()">Save selected</button></div><divclass="col-sm-4"><buttontype="button"class="btn btn-primary btn-sm close-less-modal"data-dismiss="modal">Close</button></div></div><br /></div></div></div></div><divclass="modal fade"id="extUser"role="dialog"><divclass="modal-dialog modal-lg"><!-- External User--><divclass="modal-content"><divclass="modal-header"><buttontype="button"class="close"data-dismiss="modal">&times;</button><h4class="modal-title">Add External User</h4></div><divclass="modal-body"><formclass="form-horizontal"id="extUserForm"><divclass="form-group"><labelclass="control-label col-sm-3"for="name">Name:</label><divclass="col-sm-8"><inputtype="text"class="form-control"id="name"name="name"required></div></div><divclass="form-group"><labelclass="control-label col-sm-3"for="myImg">Image:</label><divclass="col-sm-8"><inputtype="text"class="form-control"id="myImg"name="myImg"required></div></div><divclass="form-group"><labelclass="control-label col-sm-3"for="dob">DOB:</label><divclass="col-sm-8"><inputtype="date"class="form-control"id="dob"name="dob"required></div></div><hr /><divclass="form-group"><divclass="col-sm-offset-3 col-sm-3"><buttonclass="btn btn-primary btn-sm">Submit</button></div><divclass="col-sm-3"><buttontype="reset"class="btn btn-primary btn-sm">Reset</button></div><divclass="col-sm-3"><buttontype="button"class="btn btn-primary btn-sm close-external-modal"data-dismiss="modal">Close</button></div></div></form></div></div></div></div><divclass="container"></div>