Next and previous buttons in form / php query

Question

Next and previous buttons in form / php query

Navigation

#1 by (0 votes)

1

I have connected my database to my html page, I made it in the form of a query using <input> text labels, which only show a data of each column in the table (they are 5), they are around 1810 records and I need the buttons to show me the next or the previous data, like the two buttons to go to the first record and for the last one, beforehand thanks.

This is my code:

<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<script src="Jquery.min.js"></script>
<?php
$conexion = mysqli_connect("localhost","u677991360_pined","exanime123");
mysqli_select_db($conexion, "u677991360_calnd");

$consulta = "SELECT * FROM BDCALENDARIO";
$query = mysqli_query($conexion, $consulta);

$return_arr = array();

while ($row = mysqli_fetch_assoc($query)) {
  $row_array['cct'] = $row['CCT'];
  $row_array['centroTrab'] = $row['CENTRO_DE_TRABAJO'];
  $row_array['municipio'] = $row['MUNICIPIO'];
  $row_array['modalidad'] = $row['MODALIDAD'];
  $row_array['calendario'] = $row['CALENDARIO'];

  array_push($return_arr,$row_array);
}
//esta linea es la que te imprime todo el json 
//echo json_encode($return_arr);
//Agrego la linea para guardarlo en una variable
$objJSON=json_encode($return_arr);
?>
<script src="Jquery.min.js"></script>
<form  action='#' id="formu">
  CCT: <input type='text' size='30' id='cct' />
  <br/> Centro de Trabajo: <input type='text' id='centroTrab' />
  <br/> Municipio: <input type='text' size='30' id='municipio' />
  <br/> Modalidad: <input type='text' id='modalidad' />
  <br/> Calendario: <input type='text' id='calendario' />
  <br/>
  <button id="ini">Inicio</button>
  <button id="atr">Atras</button>
  <button id="sig">Sig</button>
  <button id="fin">Final</button>

</form>
</form>
</body>
</html>

and so is the Script js:

$(document).ready(function(){

  var objJSON=JSON.parse(<?= $objJSON ?>);
  var i=0;
  var tam=objJSON.length;

  $("#cct").val(objJSON[i].cct);
    $("#centroTrab").val(objJSON[i].centroTrab);
    $("#municipio").val(objJSON[i].municipio);
    $("#modalidad").val(objJSON[i].modalidad);
    $("#calendario").val(objJSON[i].calendario);

  $("#ini").click(function(){
    i=0;
    $("#cct").val(objJSON[i].cct);
    $("#centroTrab").val(objJSON[i].centroTrab);
    $("#municipio").val(objJSON[i].municipio);
    $("#modalidad").val(objJSON[i].modalidad);
    $("#calendario").val(objJSON[i].calendario);

  });
  $("#sig").click(function(){

    if(i<tam-1){
      i++;
      $("#cct").val(objJSON[i].cct);
      $("#centroTrab").val(objJSON[i].centroTrab);
      $("#municipio").val(objJSON[i].municipio);
      $("#modalidad").val(objJSON[i].modalidad);
      $("#calendario").val(objJSON[i].calendario);
    }

  });
  $("#atr").click(function(){
    if(i>0){
      i--;
      $("#cct").val(objJSON[i].cct);
      $("#centroTrab").val(objJSON[i].centroTrab);
      $("#municipio").val(objJSON[i].municipio);
      $("#modalidad").val(objJSON[i].modalidad);
      $("#calendario").val(objJSON[i].calendario);
    }
  });
  $("#fin").click(function(){
    i=tam-1;
    $("#cct").val(objJSON[i].cct);
    $("#centroTrab").val(objJSON[i].centroTrab);
    $("#municipio").val(objJSON[i].municipio);
    $("#modalidad").val(objJSON[i].modalidad);
    $("#calendario").val(objJSON[i].calendario);



  });

});
#prim,#ulti{
  visibility: hidden;
}

This would be the database in PHPMyAdmin:

And this is my page that I still do not give it style but at least shows the data: link

and as you can see shows the first record of the database (2DJN0160K), the button would serve to show the next (23DJN058Q) and likewise with the "previous" button return or show a record before that .

html php

asked by Brayan Pineda 23.03.2017 в 18:15

source

1 answer

Access to SQL file from Java and DriverManager Problem Left join mysql [closed]

score 0 · Accepted Answer

Assuming that you receive all the data in the database correctly and that the columns of the database have the name of the input. When you receive the data you can pass it to a JSON. With this information array we can work with JQuery (js) and do interesting things. then let's see in parts what needs to be done.

<?php
 $conexion = mysqli_connect("localhost","Ususario","Contraseña");
 mysqli_select_db($conexion, "BasedeDatos");
 $consulta = "SELECT * FROM BDCALENDARIO";
 $query = mysqli_query($conexion, $consulta);
?>

Assuming that the above is correct and gives us in $query the info we need. we can pass it to a JSON in the following way.

$return_arr = array(); 

while ($row = mysqli_fetch_assoc($query)) {
  $row_array['cct'] = $row['CCT'];
  $row_array['centroTrab'] = $row['CENTRO_DE_TRABAJO'];
  $row_array['municipio'] = $row['MUNICIPIO'];
  $row_array['modalidad'] = $row['MODALIDAD'];
  $row_array['calendario'] = $row['CALENDARIO'];

  array_push($return_arr,$row_array);
}

$objJSON=json_encode($return_arr);

With this we already have a json, now we only have to pass it to JQuery, suppose that what returns to us is something like this. (ignore the values, because I do not know what they are)

[

{
    "ctt": "1",
    "centroTrab": "Manzana",
    "municipio": "100",
    "modalidad": "1",
    "calendario": "Manza"
  },
  {
    "ctt": "1",
    "centroTrab": "pera",
    "municipio": "300",
    "modalidad": "1f",
    "calendario": "Mzana"
  },
  {
    "ctt": "1",
    "centroTrab": "NAranja",
    "municipio": "200",
    "modalidad": "1g",
    "calendario": "Maa"
  }
]

Once with this we can work with JQuery in the following way

$(document).ready(function(){
  
  //supon que ya tienes tu variable que guarda el json en php 
  //solo harias lo siguiente
  //var objJson=JSON.parse(<?= "'".addslashes($objJSON)."'" ?>);
  //para emular esto voy a poner el json aqui en crudo.
  
  var objJSON=JSON.parse('[{"cct":"1","centroTrab":"Manzana","municipio":"100","modalidad":"1","calendario":"Manza"},{"cct":"2","centroTrab":"pera","municipio":"300","modalidad":"1f","calendario":"Mzana"},{"cct":"3","centroTrab":"NAranja","municipio":"200","modalidad":"1g","calendario":"Maa"}]');
  
  //ahora ya lo manipulamos dependiendo del boton que apretamos
  var i=0; //vamos a usar un iterador para saber en que registro estamos
  var tam=objJSON.length; //tamaño de registros en el JSON
  
  $("#cct").val(objJSON[i].cct);
    $("#centroTrab").val(objJSON[i].centroTrab);
    $("#municipio").val(objJSON[i].municipio);
    $("#modalidad").val(objJSON[i].modalidad);
    $("#calendario").val(objJSON[i].calendario);
  
  $("#ini").click(function(){
    i=0;
    $("#cct").val(objJSON[i].cct);
    $("#centroTrab").val(objJSON[i].centroTrab);
    $("#municipio").val(objJSON[i].municipio);
    $("#modalidad").val(objJSON[i].modalidad);
    $("#calendario").val(objJSON[i].calendario);
    
  });
  $("#sig").click(function(){
    
    if(i<tam-1){
      i++;
      $("#cct").val(objJSON[i].cct);
      $("#centroTrab").val(objJSON[i].centroTrab);
      $("#municipio").val(objJSON[i].municipio);
      $("#modalidad").val(objJSON[i].modalidad);
      $("#calendario").val(objJSON[i].calendario);
    }
  
  });
  $("#atr").click(function(){
    if(i>0){
      i--;
      $("#cct").val(objJSON[i].cct);
      $("#centroTrab").val(objJSON[i].centroTrab);
      $("#municipio").val(objJSON[i].municipio);
      $("#modalidad").val(objJSON[i].modalidad);
      $("#calendario").val(objJSON[i].calendario);
    }
  });
  $("#fin").click(function(){
    i=tam-1;
    $("#cct").val(objJSON[i].cct);
    $("#centroTrab").val(objJSON[i].centroTrab);
    $("#municipio").val(objJSON[i].municipio);
    $("#modalidad").val(objJSON[i].modalidad);
    $("#calendario").val(objJSON[i].calendario);
    
    
  
  });

});

#prim,#ulti{
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form  action='#' id="formu">
  CCT: <input type='text' size='30' id='cct' />
  <br/> Centro de Trabajo: <input type='text' id='centroTrab' />
  <br/> Municipio: <input type='text' size='30' id='municipio' />
  <br/> Modalidad: <input type='text' id='modalidad' />
  <br/> Calendario: <input type='text' id='calendario' />
  <br/>
  <button id="ini">Inicio</button>
  <button id="atr">Atras</button>
  <button id="sig">Sig</button>
  <button id="fin">Final</button>

</form>

and well with that you would have the effect you want, it is a matter of adding things to make it look more striking.

The addslashes($str) function serves to escape all the special characters that the json might have. and I concatenated a single quote so that it will be interpreted as a String.