检查最后一页和第一页并相应地禁用下一个上一个按钮

我有两个弹出窗口显示用户列表和管理列表，每页显示10个结果，这很好。

我得到的页面没有。 来自JSON中的java servlet。

注意：url中传递了2个参数 – resType和pageNo。 您做生意。 返回0,10,20 ……（10的倍数）。 resType：检查我想要的结果类型。 你可以忽略这部分。

所以我在createTable函数中的url看起来像这样 –

当它是第一页时，如何禁用上一个按钮？ 同样，如果它是最后一页，如何禁用最后一个按钮？

这是代码。

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( $('').append( $('').append( $('').attr('type', 'checkbox') .addClass('selectRow') .val(json), (i+1+pageNo) // display row number ), $('').append( $('').attr('href', record.picture.thumbnail) .addClass('imgurl') .attr('target', '_blank') .text(record.name.first) ), $('').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( $('
').addClass('parent').append( $('').addClass('dataLabel').text('Name: '), obj.name.first + ' ' + obj.name.last, $('
'), // line-break between name & pic $('').addClass('myLink').attr('src', obj.picture.thumbnail), $('
'), $('').addClass('dataLabel').text('Date of birth: '), obj.dob, $('
'), $('').addClass('dataLabel').text('Address: '), $('
'), obj.location.street, $('
'), obj.location.city + ' ' + obj.location.postcode, $('
'), obj.location.state, $('
'), $('').addClass('removeMe').text('Delete'), $('').addClass('top-btn').text('Swap with top'), $('').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...) } 

    User List Get Saved Data User Admin Open External Form 
 
 
 
 × 
User List
 
 
 
 
 
 
Select
 
Name
 
DOB
 
 
 
 
 
  
 
  
 
 
 
 
 Save selected 
 
 Close 
 
 
 
 
 
 
 
 
 
 
 × 
Admin List
 
 
 
 
 
 
Select
 
Name
 
DOB
 
 
 
 
 
  
 
  
 
 
 
 
 Save selected 
 
 Close 
 
 
 
 
 
 
 
 
  
 
 × 
Add External User
 
 
 
 
 Name: 
  
 
 
 Image: 
  
 
 
 DOB: 
  
 
 
 
 
 Submit 
 
 Reset 
 
 Close 
 
 
 
 
 
 
 
 

Answer 1

在createTable中，应区分要填充的两个表中的哪一个。 所以你应该使用一个选择器，如：

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

应该对prev / next按钮选择器进行相同的区分：

 $('#' + 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( $('').append( $('').append( $('').attr('type', 'checkbox') .addClass('selectRow') .val(json), (i+1+pageNo) // display row number ), $('').append( $('').attr('href', record.picture.thumbnail) .addClass('imgurl') .attr('target', '_blank') .text(record.name.first) ), $('').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( $('
').addClass('parent').append( $('').addClass('dataLabel').text('Name: '), obj.name.first + ' ' + obj.name.last, $('
'), // line-break between name & pic $('').addClass('myLink').attr('src', obj.picture.thumbnail), $('
'), $('').addClass('dataLabel').text('Date of birth: '), obj.dob, $('
'), $('').addClass('dataLabel').text('Address: '), $('
'), obj.location.street, $('
'), obj.location.city + ' ' + obj.location.postcode, $('
'), obj.location.state, $('
'), $('').addClass('removeMe').text('Delete'), $('').addClass('top-btn').text('Swap with top'), $('').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...) } 

    User List Get Saved Data User Admin Open External Form 
 
 
 
 × 
User List
 
 
 
 
 
 
Select
 
Name
 
DOB
 
 
 
 
 
  
 
  
 
 
 
 
 Save selected 
 
 Close 
 
 
 
 
 
 
 
 
 
 
 × 
Admin List
 
 
 
 
 
 
Select
 
Name
 
DOB
 
 
 
 
 
  
 
  
 
 
 
 
 Save selected 
 
 Close 
 
 
 
 
 
 
 
 
  
 
 × 
Add External User
 
 
 
 
 Name: 
  
 
 
 Image: 
  
 
 
 DOB: 
  
 
 
 
 
 Submit 
 
 Reset 
 
 Close