Tema: Busqueda personalisada con input resultado en DataTable
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 29/03/2021, 14:26
Avatar de emilio_viguri
emilio_viguri
 
Fecha de Ingreso: junio-2011
Ubicación: Mexico
Mensajes: 117
Antigüedad: 13 años, 5 meses
Puntos: 3
Pregunta Busqueda personalisada con input resultado en DataTable
E buscado en otros preguntas similaras pero no logro implementar algo que me funcione, tengo problemas para mostrar la información filtrada en un POST y no se cual sea el error, estoy siguiendo las indicaciones de otras pagina, pero no e logrado echar andar por ello acudo a la comunidad, básicamente lo que requiero es mandar los valores de 3 input a la búsqueda y mostrarlos en el DataTable después de hacer clic en el botón buscar.

Si mi función la mando a llamar al inicio todo bien, claro que sin filtros, pero si la pongo en la $('#btnBuscar').click(function() para que me la muestra al dar clic no me muestra nada !

Aquí lo que estoy notando que tengo dos problemáticas por así decir no se mandar a llamar a la DataTable con clic y no se como pasar los parámetros de los input

ME PODRÍA AYUDAR CON ESTO !!!

este es mi HTML con los valores
Código HTML: 
Ver original
  1. <form name="formBuscar" id="formBuscar" method="POST">
  2. <input name="buscar" id="buscar" type="text" placeholder="# Control a buscar...">
  3. <input name="fechainicio" id="fechainicio" type="date" placeholder="Fecha Inicial a buscar...">
  4. <input name="fechafin" id="fechafin" type="date" placeholder="Fecha Final a buscar...">
  5. <button type="submit" class="btn btn-block btn-outline-info" id="btnBuscar">Busca ya</button>
  6. </form>

este es mi archivo JS donde si inicio la DataTable se muestra, pero si la quiero mostrar al dar clic inicia, no lo hace, no se por que y me faltaria mandar los 3 paramento input para trabajarlos en el PHP...

Código Javascript: 
Ver original
  1. var DataTable; //Variable para dataTable.
  2.  
  3. //Funcion que se ejecuta al inicio
  4. function iniciar(){
  5.   // Aquí lista los registros sin problema pero solo al iniciar y sin implementar los input
  6.   //listarRegistros();
  7. }
  8.  
  9. $('#btnBuscar').click(function(){
  10.   //Listar los registros pero al dar clic...
  11.   listarRegistros();
  12. });
  13.  
  14.  
  15. function listarRegistros(){
  16.  
  17.  var formDatos = new FormData($("#formBuscar")[0]); //Para obtener los datos del FormID
  18.  // Después mandarlos  con 
  19.  // data: formDatos, //La variable var formData = new FormData mas arriba
  20.  console.log(formDatos);
  21.  
  22.   DataTable = $('#DataTable').dataTable({
  23.     "aProcessing": true, //Activa el procedimietno del DataTables
  24.     "aServerSide": true, //Paginación y filtrado realizados por el servidor
  25.     dom: 'Bfrtip', //Definimos los elementos del control de tabla
  26.     buttons:['copyHtml5','excelHtml5','csvHtml5','pdf'],
  27.     "ajax":{
  28.       url: 'ajax/buscar.php?op=Buscar', //Obtener los valores desde url
  29.       type: "get",
  30.       dataType: "json", //Datos codificados mediante json
  31.       error:function(e){ //en caso de errores
  32.         console.log(e.responseText);
  33.       }
  34.     },
  35.     "createdRow": function( row, data, dataIndex ) { //Establecer color a las filas
  36.       //condiciones
  37.       var varColn = 6;
  38.       if(data[varColn] === '1'){
  39.         $(row).css('background-color','rgba(0, 123, 255, .1)');
  40.       }
  41.       if(data[varColn] === '2'){
  42.         $(row).css('background-color','rgba(255, 193, 7, .1)');
  43.       }
  44.       if(data[varColn] === '3'){
  45.         $(row).css('background-color','rgba(40, 167, 69, .1)');
  46.       }
  47.       if(data[varColn] === '4'){
  48.         $(row).css('background-color','rgba(220, 53, 69, .1)');
  49.       }
  50.       if(data[varColn] === '5'){
  51.         $(row).css('background-color','rgba(108, 117, 125, .1)');
  52.       }
  53.     },
  54.     "bBestroy": true,
  55.     "iDisplayLength": 10, //Paginacion de X en X registros.
  56.     "order": [[0, "desc"]] //Ordenar (columna,orden).
  57.   }).DataTable();
  58. }
  59.  
  60. //iniciar(); //Ejecuta iniciar, para que siempre se ejecute.
PHP que no e llegado a terminarlo por que no le e pasado las variables por que no e resuelto lo del DataTable pero creo yo que ya teniendo las variables en PHP ya estaré del otro lado ...

[HIGHLIGHT="PHP"]E buscado en otros preguntas similaras pero no logro implementar algo que me funcione, tengo problemas para mostrar la información filtrada en un POST y no se cual sea el error, estoy siguiendo las indicaciones de otras pagina, pero no e logrado echar andar por ello acudo a la comunidad, básicamente lo que requiero es mandar los valores de 3 input a la búsqueda y mostrarlos en el DataTable después de hacer clic en el botón buscar.

Si mi función la mando a llamar al inicio todo bien, claro que sin filtros, pero si la pongo en la $('#btnBuscar').click(function() para que me la muestra al dar clic no me muestra nada !

Aquí lo que estoy notando que tengo dos problemáticas por así decir no se mandar a llamar a la DataTable con clic y no se como pasar los parámetros de los input

ME PODRÍA AYUDAR CON ESTO !!!

este es mi HTML con los valores
Código HTML: 
Ver original
  1. <form name="formBuscar" id="formBuscar" method="POST">
  2. <input name="buscar" id="buscar" type="text" placeholder="# Control a buscar...">
  3. <input name="fechainicio" id="fechainicio" type="date" placeholder="Fecha Inicial a buscar...">
  4. <input name="fechafin" id="fechafin" type="date" placeholder="Fecha Final a buscar...">
  5. <button type="submit" class="btn btn-block btn-outline-info" id="btnBuscar">Busca ya</button>
  6. </form>

este es mi archivo JS donde si inicio la DataTable se muestra pero si la quiero mostrar al dar clic inicia, no lo hace, no se por que y me faltaria mandar los 3 paramento input para trabajarlos en el PHP...

Código Javascript: 
Ver original
  1. var DataTable; //Variable para dataTable.
  2.  
  3. //Funcion que se ejecuta al inicio
  4. function iniciar(){
  5.   // Aquí lista los registros sin problema pero solo al iniciar y sin implementar los input
  6.   //listarRegistros();
  7. }
  8.  
  9. $('#btnBuscar').click(function(){
  10.   //Listar los registros pero al dar clic...
  11.   listarRegistros();
  12. });
  13.  
  14.  
  15. function listarRegistros(){
  16.  
  17.  var formDatos = new FormData($("#formBuscar")[0]); //Para obtener los datos del FormID
  18.  // Después mandarlos  con 
  19.  // data: formDatos, //La variable var formData = new FormData mas arriba
  20.  console.log(formDatos);
  21.  
  22.   DataTable = $('#DataTable').dataTable({
  23.     "aProcessing": true, //Activa el procedimietno del DataTables
  24.     "aServerSide": true, //Paginación y filtrado realizados por el servidor
  25.     dom: 'Bfrtip', //Definimos los elementos del control de tabla
  26.     buttons:['copyHtml5','excelHtml5','csvHtml5','pdf'],
  27.     "ajax":{
  28.       url: 'ajax/buscar.php?op=Buscar', //Obtener los valores desde url
  29.       type: "get",
  30.       dataType: "json", //Datos codificados mediante json
  31.       error:function(e){ //en caso de errores
  32.         console.log(e.responseText);
  33.       }
  34.     },
  35.     "createdRow": function( row, data, dataIndex ) { //Establecer color a las filas
  36.       //condiciones
  37.       var varColn = 6;
  38.       if(data[varColn] === '1'){
  39.         $(row).css('background-color','rgba(0, 123, 255, .1)');
  40.       }
  41.       if(data[varColn] === '2'){
  42.         $(row).css('background-color','rgba(255, 193, 7, .1)');
  43.       }
  44.       if(data[varColn] === '3'){
  45.         $(row).css('background-color','rgba(40, 167, 69, .1)');
  46.       }
  47.       if(data[varColn] === '4'){
  48.         $(row).css('background-color','rgba(220, 53, 69, .1)');
  49.       }
  50.       if(data[varColn] === '5'){
  51.         $(row).css('background-color','rgba(108, 117, 125, .1)');
  52.       }
  53.     },
  54.     "bBestroy": true,
  55.     "iDisplayLength": 10, //Paginacion de X en X registros.
  56.     "order": [[0, "desc"]] //Ordenar (columna,orden).
  57.   }).DataTable();
  58. }
  59.  
  60. //iniciar(); //Ejecuta iniciar, para que siempre se ejecute.
PHP que no e llegado a terminarlo por que no le e pasado las variables por que no e resuelto lo del DataTable, pero creo yo que ya teniendo las variables en PHP ya estaré del otro lado ... con esto me regresa bien los datos para generar una DataTable

Código PHP: 
Ver original
  1. while ($rowX = $row->fetch_object() ) {           
  2.       $data[] = array(
  3.           '0' => $rowX->val0,
  4.           '1' => $rowX->val1,
  5.           '2' => $rowX->val2,
  6.           '3' => $rowX->val3,
  7.           '4' => $rowX->val4,
  8.           '5' => $rowX->val5,
  9.           '6' => $rowX->val6,
  10.       );
  11.     }
  12.         
  13.     $row = array(
  14.     "sEcho" => 1, #Información para el datatables.
  15.     "iTotalRecords" =>count($data), #Envía el total de registros al datatable.
  16.     "iTotalDisplayRecords"=> count($data), #Total de registros a visualizar.
  17.     "aaData"=>$data # Envia el array con todos los registros.               
  18.     );
  19.     echo json_encode($row);
__________________
Ing. Emilio Viguri de NEXCEN Visitamos en lo que podamos ayudarte.