Desativar o primeiro botão anterior nos números de página dynamics

Eu tenho um pop-up para exibir a lista de usuários que exibiria 10 resultados por página, o que está funcionando bem.

Estou recebendo os números da página. do servlet java no JSON. Como faço para desativar o botão anterior, quando é a primeira página? Da mesma forma, como faço para desativar o último botão, quando é a última página?

Aqui está meu código.

function userList(pageNo) { var resType="userList"; createTable(resType,pageNo); $(document).on('click', '.next-btn', function(){ var next = 10+pageNo; userList(next); }); $(document).on('click', '.prev-btn', function(){ var previ = pageNo - 10; userList(previ); }); } function createTable(resType, pageNo) { $.getJSON("https://api.randomuser.me/?results="+pageNo, function(data) { $('#datatable tr:has(td)').remove(); data.results.forEach(function (record) { var json = JSON.stringify(record); $('#datatable').append( $('').append( $('').append( $('').attr('type', 'checkbox') .addClass('selectRow') .val(json) ), $('').append( $('').attr('href', record.picture.thumbnail) .addClass('imgurl') .attr('target', '_blank') .text(record.name.first) ), $('').append(record.dob) ) ); }) }).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( $('
 table, th, td { border: 1px solid #ddd; border-collapse: collapse; padding: 10px; } .parent { height: 25%; width: 90%; padding: 1%; margin-left: 1%; margin-top: 1%; border: 1px solid black; } .parent:nth-child(odd){ background: skyblue; } .parent:nth-child(even){ background: green; } label { float: left; width: 80px; } input { width: 130px; } 
   
SelectNameDOB

Você deve adicionar os botões anterior / seguinte ao seu HTML como oculto e, em seguida, referenciá-los por ID em vez de class (como você só terá um de cada).

Acompanhe o número da página atual em uma variável global.

Mostrar o botão “prev” somente quando o número da página for maior que 0. Para o botão “next” você pode aplicar este truque:

Em vez de carregar 10 registros, carregue mais um, mas não para exibição: se existir, o botão “próximo” deverá estar visível.

Aqui está um trecho com essas mudanças (todas as alterações estão no HTML e na parte superior do script):

 var currentPageNo = 0; // Keep track of currently displayed page $('#next-btn').click(function(){ // Give buttons an ID (include them in HTML as hidden) userList(currentPageNo+10); }); $('#prev-btn').click(function(){ userList(currentPageNo-10); }); function userList(pageNo) { var resType="userList"; 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)').remove(); // 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( $('
 table, th, td { border: 1px solid #ddd; border-collapse: collapse; padding: 10px; } .parent { height: 25%; width: 90%; padding: 1%; margin-left: 1%; margin-top: 1%; border: 1px solid black; } .parent:nth-child(odd){ background: skyblue; } .parent:nth-child(even){ background: green; } label { float: left; width: 80px; } input { width: 130px; } 
     
SelectNameDOB

Verifique se o valor anterior é menor ou igual a 10, se assim for, oculte-o. A mesma lógica inversa aplica-se ao botão seguinte. E no botão seguinte você pode mostrar prev-btn .

 $(document).on('click', '.prev-btn', function(){ var previ = pageNo - 10; if(previ < = 10) $(this).hide(); UserList(previ); });