檢查最后一頁和第一頁，並相應地禁用下一個-上一個按鈕

Question

我有2個彈出窗口顯示用戶列表和管理員列表，該列表每頁顯示10條結果，效果很好。

我得到頁面編號。 從JSON中的Java servlet中獲取。

注意：url中傳遞了2個參數-resType和pageNo。 頁面編號 返回0、10、20 ...（10的倍數）。 resType：檢查我想要哪種結果。 您可以忽略此部分。

所以我在createTable函數中的網址看起來像這樣-

當它是第一頁時，如何禁用上一個按鈕？ 同樣，當最后一頁是最后一頁時，如何禁用它？

這是代碼。

 var currentPageNo = 0; // Keep track of currently displayed page $('.next-btn').unbind("click").on("click",function(){ // Give buttons an ID (include them in HTML as hidden) userList(currentPageNo+10); adminList(currentPageNo+10); }); $('.prev-btn').unbind("click").on("click",function(){ userList(currentPageNo-10); 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 "prev" button: $('.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&start="+pageNo, function(data) { $('#datatable tr:has(td)').empty(); // Check if there's an extra record which we do not display, // but determines that there is a next page $('.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); $('#datatable').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') ) ); }) // 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://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> <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> 

Answer 1

在createTable中，應在要填充的兩個表之間進行區分。 因此，您應該使用類似以下的選擇器：

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

上一個/下一個按鈕選擇器應進行相同的區分：

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

在同一單擊處理程序中同時調用userList和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') ) ); }) // 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>