Пагинация формуляр с PHP

Я делаю формуляр управления академии информатики (еще я иду со скелетом) и в части формуляра, где я ввожу данные каждого Студента, мне хотелось бы иметь две кнопки: "reward" (<<) и "forward" (>>), что, его кликнув, они показали мне студентов с Вашими данными. В настоящее время это у меня есть в просматривать меню, так что, выбрав один, у меня появляются Ваши данные прямо в полях, которые должны наполнять таково, который я схватил:

introducir la descripción de la imagen aquí

Я консультировался и самым похожим на то, что я хочу, является то, что называются пагинация в PHP, но я не нашел до сих пор никакого примера, с которым мне хотелось бы делать меня...

они могли бы показывать мне какой-то пример, который они знали бы или какой-то тип помощи (ключевые слова поисков сходных примеров, так как я не знаю очень хорошо, была ли это пагинация или другая вещь)?

Большое спасибо,

Я присоединяю части кода, ассоциируемые с тем, что я хочу изменить в случае, если он будет служить помощью:

 <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>

Часть кода, который я называю 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);
}

Функция, которую я использую, чтобы делать консультацию в 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;
}

и рукописный шрифт в JS, которого я использую:

/* 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);
}
});
2
задан 16.01.2017, 23:30
0 ответов

мне хотелось бы иметь две кнопки: "reward" (<<) и "forward" (>>), что, его кликнув, они показали мне студентов с Вашими данными. Я консультировался и самым похожим на то, что я хочу, является то, что называются пагинация.

Пагинация - техника, чтобы получать, под требованием, результаты с backend, чтобы так улучшать результат. Ты прав в думании, что техническая приспосабливается к твоей необходимости.

Есть вопросительный знак, который ты должен решать, чтобы реализовывать ésto.

Каков порядок, в котором я должен упорядочивать ученики?

У нас есть какие-то выборы:

  • Упорядочивать из-за кода
  • Упорядочивать из-за фамилий

Лично я нахожу упорядочивать из-за фамилий гораздо натуральнее, чем посредством кода. Тогда, чтобы знать предыдущий или следующий студент, то, что мы были бы должны делать, является консультацией SQL, чтобы это получать.

Получать предыдущий ученик:

select  * from alumnos where concat(apepat, ' ', apemat) < ? LIMIT 1;

Получать предстоящий ученик:

select  * from alumnos where concat(apepat, ' ', apemat) > ? LIMIT 1;

Имея ésto только достаточно получать посредством AJAX ученика и показывать это в формуляре.


Пример

Для практических концов, посылает ученик, подуманный как JSON (echo json_encode($result);

В клиенте мы получаем отцовскую и материнскую фамилию формуляра и это посылаем, чтобы получать предыдущий или следующий ученик:

/*
 * se sobreentiende que para el botón "siguiente"
 * se debe cambiar 'previous' to 'next'
 */
btnPrevious.addEventListener('click', function () {
  getStudentByOrder({
    orientation: 'previous',
    params: {
      apepat: apepatInput.value,
      apemat: apematInput.value
    },
    onDone (student) {
      // estudiante listo en JSON
      // llenar el formulario con su info
    }
  });
});

/**
 * Obtiene el estudiante anterior o próximo.
 * @param {orientation} Orientación para encontrar (previous, next)
 * @param {params} Objeto que contiene "apepat" y "apemat" (apellido paterno y materno respectivamente)
 * @param {onDone} callback al que se le pasará el alumno como objeto
 */
function getStudentByOrder({ onDone, orientation, params }) {
  let xhr = new XMLHttpRequest();
  xhr.open('GET', `ajaxManager.php?apepat=${params.apepat}&apemat=${params.apemat}&orientation=${orientation}`);
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.onload = function () {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        onDone(JSON.parse(xhr.responseText));
      }
    }
  };
  xhr.send();
}

server будет нечто похожим:

$orientation = $_GET["orientation"];
$query = "";

if ($orientation === "previous") {
  $query .= "SELECT * FROM students WHERE CONCAT(apepat, ' ', apemat) < CONCAT(?, '', ?) LIMIT 1;";
} else {
  $query .= "SELECT * FROM students WHERE CONCAT(apepat, ' ', apemat) < CONCAT(?, '', ?) LIMIT 1;";
}

$stmt= $conn->prepare($query);
$stmt->bind_param("ss", $apepat, $apemat);

$apepat = $_GET["apepat"];
$apemat = $_GET["apemat"];

$stmt->execute();
$stmt->bind_result($id, $ap, $am, $name);
$json = array();

if ($stmt->fetch()) {
  $json = array("id" => $id, "apepat" => $ap, "apemat" => $am, "name" => $name);
}

$stmt->close();

echo json_encode($json);
0
ответ дан 03.12.2019, 17:39
  • 1
    Muchí пропасти спасибо я протестирую это и прокомментирую тебе ;) –  16.01.2017, 21:26

То, что ты мог делать, состоит в том, чтобы делать это динамическим, это означает делать характерный шаблон и перемещать его из-за параметра id из-за метода GET, а именно http://localhost/tuProyecto/pagina.php?id=2, ты читаешь id и делаешь консультацию с этим пойдите. В момент давания" <<" o">>" только redireccionas, чтобы менять id на метод GET. Также ты мог бы делать это из-за AJAX, чтобы избегать перезагружать всю страницу и только div, где у тебя есть данные

Если я не объяснил себе добра, или у тебя осталось сомнение ты это комментируешь

0
ответ дан 03.12.2019, 17:39
  • 1
    Большое спасибо отвечать из-за меня!!... я консультируюсь, чтобы видеть как harí в с ajax для того, чтобы это была má s работоспособный возможный и из-за mé весь GET. Если я не нахожу пример ты pediré посмотрим ты знаешь какой-либо. Приветствие! –  16.01.2017, 20:32

Теги

Похожие вопросы