Foros del Web » Programando para Internet » Jquery »

Busqueda personalisada con input resultado en DataTable

 Estas en el tema de Busqueda personalisada con input resultado en DataTable en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 29/03/2021, 14:26
Avatar de emilio_viguri  
Fecha de Ingreso: junio-2011
Ubicación: Mexico
Mensajes: 117
Antigüedad: 13 años, 6 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.
  #2 (permalink)  
Antiguo 29/03/2021, 18:12
 
Fecha de Ingreso: abril-2006
Mensajes: 583
Antigüedad: 18 años, 7 meses
Puntos: 120
Respuesta: Busqueda personalisada con input resultado en DataTable
no especificas que tipo de libreria estas usando ni la URL de donde la estas sacando por lo que supongo es de datetables.com y segun su manual no lo estas implementado adecuadamente. leete el manual y empieza por simples columnas

https://datatables.net/manual/server-side
__________________
Mis aportes te ayudaron??, te hicieron ahorrar valiosos tiempo??, si quieres puedes agradecerme con un Gracias o con una donacion
https://paypal.com/pools/c/8lmNLmWnG9
  #3 (permalink)  
Antiguo 30/03/2021, 11:35
Avatar de emilio_viguri  
Fecha de Ingreso: junio-2011
Ubicación: Mexico
Mensajes: 117
Antigüedad: 13 años, 6 meses
Puntos: 3
Pregunta Respuesta: Busqueda personalisada con input resultado en DataTable


Cuando te refieres a librerías serán estas
Código HTML: 
Ver original
  1. <!-- DataTables -->
  2.   <link rel="stylesheet" href="public/plugins/datatables/jquery.dataTables.min.css">
  3.   <link rel="stylesheet" href="public/plugins/datatables/buttons.dataTables.min.css">
  4.   <link rel="stylesheet" href="public/plugins/datatables/responsive.dataTables.min.css">

Estas las tome de un curso y así las use...
__________________
Ing. Emilio Viguri de NEXCEN Visitamos en lo que podamos ayudarte.
  #4 (permalink)  
Antiguo 30/03/2021, 14:47
Avatar de emilio_viguri  
Fecha de Ingreso: junio-2011
Ubicación: Mexico
Mensajes: 117
Antigüedad: 13 años, 6 meses
Puntos: 3
Información Respuesta: Busqueda personalisada con input resultado en DataTable
Ya lo solucione no se si sea la mejor manera de mandar las cosas por el ajax DataTable pero ya me funciona

Primero cambie el type = submit del botón? y le puse type = button en mi linea 5 del HTML

Código HTML: 
Ver original
  1. <button type="button" id="btnBuscar">Busca ya</button>

Para mandar los datos no pude con var formDatos = new FormData($("#formBuscar")[0]) no pude lo puse así pero no funciono:
Código Javascript: 
Ver original
  1. var formDatos = new FormData($("#formBuscar")[0]); //Para obtener los datos del FormID
  2.   DataTable = $('#DataTable').dataTable({
  3.     "aProcessing": true, //Activa el procedimietno del DataTables
  4.     "aServerSide": true, //Paginación y filtrado realizados por el servidor
  5.     dom: 'Bfrtip', //Definimos los elementos del control de tabla
  6.     buttons:['copyHtml5','excelHtml5','csvHtml5','pdf'],
  7.     "ajax":{
  8.       url: 'ajax/buscar.php?op=Buscar', //Obtener los valores desde url
  9.       type: "POST",
  10.       data: formDatos, //La variable var formData = new FormData mas arriba
  11.       dataType: "json", //Datos codificados mediante json
  12.       error:function(e){ //en caso de errores
  13.         console.log(e.responseText);
  14.       }
  15.     },

Mejor las mando por GET no se si fuera lo mejor que opinan y agregue una linea "destroy": true, para evitar un error que me daba el DataTable.
DataTables warning: table Cannot reinitialise DataTable.

Y así esta solucionado ....

Código Javascript: 
Ver original
  1. function listarRegistros(){
  2.   var c = $('#buscar').val();
  3.   var fi = $('#fechainicio').val();
  4.   var ff = $('#fechafin').val();
  5.   
  6.   DataTable = $('#DataTable').dataTable({
  7.     "aProcessing": true, //Activa el procedimietno del DataTables
  8.     "aServerSide": true, //Paginación y filtrado realizados por el servidor
  9.     dom: 'Bfrtip', //Definimos los elementos del control de tabla
  10.     buttons:['copyHtml5','excelHtml5','csvHtml5','pdf'],
  11.     "ajax":{
  12.       url: 'ajax/' +ajaxFile+ '.php?op=Buscar&c='+c+'&fi='+fi+'&ff='+ff, //Obtener los valores desde url
  13.       type: "get",
  14.       dataType: "json", //Datos codificados mediante json
  15.       error:function(e){ //en caso de errores
  16.         console.log(e.responseText);
  17.       }
  18.     },
  19.     "bBestroy": true,
  20.     "destroy": true,
  21.     "iDisplayLength": 10, //Paginacion de X en X registros.
  22.     "order": [[0, "desc"]] //Ordenar (columna,orden).
  23.   }).DataTable();
  24. }
__________________
Ing. Emilio Viguri de NEXCEN Visitamos en lo que podamos ayudarte.

Etiquetas: datatable, javascript, php+ajax
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 10:57.