Estoy haciendo un formulario de gestión de una academia de informática (aún ando con el esqueleto) y en la parte del formulario donde introduzco los datos de cada Estudiante me gustaría tener dos botones ("reward" << y "forward" >>) que al hacerle click me muestren a los estudiantes con sus datos. Actualmente lo tengo en un menú desplegable de forma que al seleccionar uno me aparecen sus datos directamente en los campos a rellenar tal que así: [![introducir la descripción de la imagen aquí][1]][1] [1]: https://i.sstatic.net/mtFId.png He estado consultando y lo más parecido a lo que quiero es lo que se llama paginación en PHP, pero no he encontrado hasta el momento ningún ejemplo con lo que me gustaría hacer a mi... ¿me podrían indicar algún ejemplo que conozcan o algún tipo de ayuda (palabras claves de búsqueda de ejemplos similares, ya que no sé muy bien si esto sería paginación u otra cosa)? Muchísimas gracias, Les adjunto las partes del código asociadas a lo que quiero modificar en caso de que sirva de ayuda: <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <header><h1>Gestion de Matriculas</h1></header> <div id="formEstudiantes"> <fieldset> <legend>Formulario de Estudiantes</legend> <form method="post" action="gestionaEstudiantes.php" name="Estudiantes" id="frmEstudiantes" onsubmit="return getTelefonosYCurso()"> <label for="nombre">Nombre:</label> <input type="text" name="nombre" id="nombre" required placeholder="Nombre del Estudiante"> <label for="primerApellido">Primer Apellido:</label> <input type="text" name="primerApellido" id="primerApellido" required placeholder="Apellido del Estudiante"> <label for="segundoApellido">Segundo Apellido:</label> <input type="text" name="segundoApellido" id="segundoApellido" required placeholder="Segundo Apellido del Estudiante"> <label for="email">Correo:</label> <input type="text" name="email" id="email" required placeholder="Correo"> <label for="dni">DNI: </label> <input type="text" name="dni" id="dni" required placeholder="DNI"> <label for="fechaNacimiento">Fecha de Nacimiento: </label> <input type="date" name="fechaNacimiento" required id="fechaNacimiento"> <input type="submit" value="Alta" id="altaEstudiante"> <button type="button" id="update" disabled>Modificar</button> <button type="button" id="delete" disabled>Eliminar</button> <button type="button" id="matricularEnOtroCurso" title="Matricular en otro curso seleccionado"disabled>Matricular</button> <!-- Listado de estudiantes con Nombre y Apellidos que al seleccionar uno se rellenan sus datos en el formulario --> <label for="Estudiantes">Estudiantes: </label> <select name="Estudiantes" id="Estudiantes"> <option></option> <?php //Las opciones de la lista se rellenan con los //campos correspondientes de la tabla Estudiantes //El atributo value debe contener el id del estudiante require_once './dataModel.php'; try { $estudiantes = getEstudiantes($db); } catch (PDOException $exc) { echo $exc->getMessage(); } foreach ($estudiantes as $estudiante) { ?> <option value="<?php echo $estudiante['idEstudiante'] ?>"><?php echo $estudiante['Nombre'] . " " . $estudiante['Primer Apellido'] . " " . $estudiante['Segundo Apellido']; ?></option> <?php } ?> </select> <!--Campos ocultos para almacenar telefonos y curso al cual se va a matricular el estudianta--> <input type="hidden" name="telefonos" value="" id="telefonosDelEstudiante"> <input type="hidden" name="idDelCurso" value="" id="idDelCurso"> <input type="hidden" name="tipoTelefonoEstudiante" value="" id="tipoTelefonoEstudiante"> <input type="hidden" name="idEstudianteSeleccionado" value="" id="idEstudianteSeleccionado"> </form> </fieldset> </div> </hmtl> Parte del código que llamo ajaxMAnager: require_once './dataModel.php'; //Recuperar informacion de un estudiante seleccionado $idEstudiante = filter_input(INPUT_POST, 'estudianteSeleccionado', FILTER_SANITIZE_STRING, FILTER_NULL_ON_FAILURE); if($idEstudiante !== FALSE) { $infoEstudiante = getInfoEstudiante($db, $idEstudiante); echo json_encode($infoEstudiante); } La función que empleo para hacer la consulta a la BBDD: //Recuperar la informacion de un estudiante seleccionado, //conjuntamente con sus telefonos correspondientes function getInfoEstudiante(PDO $conn, $idEstudiante) { $sql = "select e.Nombre as nombre, e.`Primer Apellido` as primerApellido, e.`Segundo Apellido` as segundoApellido, e.DNI as dni, e.`Correo Electronico` as email, e.`Fecha de Nacimiento` as fechaNacimiento, t.idTelefono as idTelefono, t.Numero as numeroDeTelefono from Estudiantes e join Telefonos t on e.idEstudiante = t.idTelefono and e.idEstudiante = :id"; $stmt = $conn->prepare($sql); $stmt->bindValue(":id", $idEstudiante, PDO::PARAM_INT); $stmt->execute(); $estudiante = $stmt->fetchAll(PDO::FETCH_ASSOC); return $estudiante; } y el script en JS que empleo: /* Implementacion de AJAX con JSON en los siguientes métodos */ //Al seleccionar a un Estudiante de la lista desplegable, //se rellenaran los campos del formulario //con los datos del estudiante seleccionado document.getElementById("Estudiantes"). addEventListener("change",function () { //Se necesita el ID del estudiante seleccionado var indice = document.getElementById("Estudiantes").selectedIndex; //Si el indice es igual a cero, limpiamos el formulario y solamente queda habilitado el //boton para dar alta a un nuevo estudiante if (indice === 0) { document.getElementById("frmEstudiantes").reset(); document.getElementById("altaEstudiante").disabled = false; document.getElementById("update").disabled = true; document.getElementById("delete").disabled = true; document.getElementById("addTelefono").disabled = true; document.getElementById("matricularEnOtroCurso").disabled = true; document.getElementById("numerosTelefonos").selectedIndex = 0; document.getElementById("numerosTelefonos").disabled = true; document.getElementById("numeroTelefono").value = ""; document.getElementById("actualizarNumeroTelefono").disabled = true; document.getElementById("eliminarNumeroTelefono").disabled = true; //Borramos el nombre del Estudiante de "Cursos Matriculados por un Estudiante" //y eliminamos los registros con nombres de cursos en la tabla document.getElementById("estudianteCursos").innerHTML = ""; var nombreCursos = document.getElementById("tablaCursos"); while (nombreCursos.hasChildNodes()) { nombreCursos.removeChild(nombreCursos.firstChild); } } else { //Habilitamos los botones para Modificar o Eliminar al Estudiante //y agregar telefonos document.getElementById("altaEstudiante").disabled = true; document.getElementById("update").disabled = false; document.getElementById("delete").disabled = false; document.getElementById("addTelefono").disabled = false; document.getElementById("matricularEnOtroCurso").disabled = false; var idEstudianteSeleccionado = document.getElementById("Estudiantes").options[indice].value; var nombreEstudianteSeleccionado = document.getElementById("Estudiantes").options[indice].text; //Guardamos el ID del estudiante seleccionado en un campo oculto del formulario document.getElementById("idEstudianteSeleccionado").value = idEstudianteSeleccionado; //Mostrar el nombre del Estudiante en "Cursos Matriculados por un Estudiante" //y agregar los nombres de los cursos en los cuales esta matriculado document.getElementById("estudianteCursos").innerHTML = nombreEstudianteSeleccionado; //Recuperar el nombre de los cursos matriculados por el estudiante seleccionado var xhttp1 = new XMLHttpRequest(); xhttp1.onreadystatechange = function () { if (this.readyState === 4 && this.status === 200) { //console.log(this.responseText); var objNombreCursos = JSON.parse(this.responseText); //Rellenamos la tabla con los nombres de los cursos var tablaNombreCursos = "<tr><th>" + "Nombre del Curso" + "</th></tr>"; for (var x in objNombreCursos) { tablaNombreCursos += "<tr><td>" + objNombreCursos[x].NombreCurso + "</td></tr>"; } document.getElementById("tablaCursos").innerHTML = tablaNombreCursos; } }; xhttp1.open("POST", "ajaxManager.php", true); xhttp1.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhttp1.send("nombreCursos=" + idEstudianteSeleccionado); //Crear la peticion con AJAX y enviar el ID para recuperar el resto de los campos //de la tabla Estudiantes y el, o los telefonos que dicho estudiante pueda tener. var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function () { if (this.readyState === 4 && this.status === 200) { // console.log(this.responseText); var infoEstudiantes = JSON.parse(this.responseText); document.getElementById("nombre").value = infoEstudiantes[0].nombre; document.getElementById("primerApellido").value = infoEstudiantes[0].primerApellido; document.getElementById("segundoApellido").value = infoEstudiantes[0].segundoApellido; document.getElementById("email").value = infoEstudiantes[0].email; document.getElementById("dni").value = infoEstudiantes[0].dni; document.getElementById("fechaNacimiento").value = infoEstudiantes[0].fechaNacimiento; //Habilitar la lista de los numeros de telefonos document.getElementById("numerosTelefonos").disabled = false; //Recorrer el objeto infoEstudiantes para //rellenar la lista de los telefonos. //Primero limpiar la lista de telefonos var listadoDeTelefonos = document.getElementById("numerosTelefonos"); while (listadoDeTelefonos.hasChildNodes()) { listadoDeTelefonos.removeChild(listadoDeTelefonos.firstChild); } //Segundo. Rellenar el desplegable con los numeros de telefonos y su id listadoDeTelefonos.appendChild(document.createElement("option")); for (var x in infoEstudiantes) { var opcion = document.createElement("option"); var atributoValue = document.createAttribute("value"); atributoValue.value = infoEstudiantes[x].idTelefono; opcion.setAttributeNode(atributoValue); var textNumeroTelefono = document.createTextNode(infoEstudiantes[x].numeroDeTelefono); opcion.appendChild(textNumeroTelefono); listadoDeTelefonos.appendChild(opcion); } } }; xhttp.open("POST", "ajaxManager.php", true); xhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhttp.send("estudianteSeleccionado=" + idEstudianteSeleccionado); } });