entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

1voto

buscador por filtros

hola que tal, estoy haciendo un buscador por filtros. El primer filtro me elige el distrito donde quiero buscar, y el segundo filtro es para establecer otro criterio de busqueda(ambos a la vez). Al ingresar el texto quiero que el resultado de esa busqueda se muestre en una tabla usando el plugin de datatable. El problema es que al pulsar enter me sale como datos json invalidos, probe el archivo php que me genera el json y me funciona correctamente pero cuando voy a hacer la busqueda doble me sale el cartel de json invalido. Si alguno me podria iluminar se lo agradeceria. Saludos PD: ingreso fragmento de codigo utilizado:
el html:

        <select  data-placeholder="Elija una Localidad..." class="chosen-select" tabindex="2" id="txt_distrito">        
            <option value="123">San Miguel de Tucuman</option>
            <option value="002">Aguilares</option>
            <option value="010">El Manantial</option>
            <option value="011">San Pablo</option>
            <option value="029">Concepcion</option>
            <option value="085">Monteros</option>
            //simplifique un par de distritos para ser mas legible   
        </select>
        <select data-placeholder="Buscar por..." class="chosen-select" tabindex="2" id="txt_tbuscar" >        
            <option value="0">Codigo Cliente</option>
            <option value="1">DNI</option>
            <option value="2">Nombre Cliente</option>
            <option value="3">Tipo Cliente</option>
            <option value="4">Distrito</option>
            <option value="5">Cuenta</option>
            //idem a distritos
        </select>
        <div class="col-lg-8"> 
            <input type="text" class="form-control" placeholder="ingrese el valor a buscar" id="txt_valor" autofocus>
            <button class="btn btn-default btn-xs active" type="button" id="btn_buscador"><span class="glyphicon glyphicon-search"></span></button>

  <!-- campos para mostrar en el datatable
  -->
  div class="row"><br></div>
  <div class="row">
    <div class="col-sm-12">
        <section >
            <table class="table table-hover table-bordered table-condensed" id="tBusqueda">
                <thead>
                    <tr>

                        <th>Cliente</th>
                        <th>DNI</th>
                        <th>Nombre</th>
                        <th>Tipo</th>
                        <th>Dist</th>
                        <th>Cuenta</th>
                        <th>SubCuenta</th>
                        <th>TipoCuenta</th>
                        <th>Codigo Usuario</th>
                        //campos simplificados    
                    </tr>
                </thead>              
                <tfoot>

                    <tr>mismos campos que arriba  </tr>          
                </tfoot>
            </table>    
        </section>

        <script text="javascript">

            function buscador(distrito,valor){

                $(document).ready(function() {
                    $('#tBusqueda').DataTable({
                        "destroy": true,
                        "processing": true,
                        "serverSide": true,
                        "paging": true,
                        "ajax":"listar.php",
                        "type":"POST",
                        "dataType": "json", 
                        remote:'search.php?valor=%QUERY',
                        remote:'search.php?distrito=%QUERY',

                        "columns":[
                        {"data":"inm_cod"},
                        {"data":"inm_doc"},
                        {"data":"inm_nomcli"},
                        {"data":"tipocli"},
                        {"data":"inm_dist"},
                        {"data":"inm_cta"},                            
                        {"data":"inm_scta"},
                        {"data":"tip_cuenta"},
                        {"data":"inm_codusu"},
  //codigo simplificado                ]

});

                });

            };

            $("#txt_valor").keypress(function(e){
              if(e.which == 13){//control de la tecla enter
                $('#btn_buscador').click();
              }
            });

            $("#btn_buscador").click(function(){
                /*var tipo=$("#btn_busTipo").attr("name");*/
                var tipo="";  
                var selectipo=document.getElementById("txt_tbuscar").value;
                switch(selectipo) {    
                    case "0":
                    tipo="inm_cod";
                    break;
                    case "1":
                    tipo="inm_doc";
                    break;
                    case "2":
                    tipo="inm_nomcli";
                    break;
                    case "3":
                    tipo="tipocli";
                    break;

                    case "4":
                    tipo="inm_dist";

                    break;
                    case "5":
                    tipo="inm_cta";

                    break;
                    case "6":
                    tipo="tip_cuenta";
                    break;

                    case "7":
                    tipo="inm_codusu";
                    break;
 //codigo simplificado   
}

var distrito=document.getElementById("txt_distrito").value;
var valor=document.getElementById("txt_valor").value;

var verfdist=false;
var verfvalor=false;

if (isNaN(distrito) || (distrito==null)){
    alert("Verificar el campo distrito, no puede ser vacio y solo debe contener numeros ");
}else{
    verfdist=true;
};

if( (valor == null) || (valor.length == 0) || (/^\s+$/.test(valor)) ) {
    alert("Verificar el campo de busqueda, no puede ser vacio o contener caracteres no validos");
}else{
    verfvalor=true;
};

if (verfdist & verfvalor){

    if (tipo=="inm_cta"){
        //alert("es numero");
        //ver(distrito,valor);
        document.getElementById("tBusqueda").value;
    }else{
    //alert ("no es numero");
    $("#ventResultados").modal("show");
    buscador(distrito,valor,tipo);
};

if(tipo=="inm_cod"){
        //ver(distrito,valor);
        document.getElementById("tBusqueda").value;
    }else{
        $("#ventResultados").modal("show");
        buscador(distrito,valor,tipo);

    };
};
});

el php:

            <?php
            if (isset($_POST['valor'] ) ){
                $v_valor=$_POST['valor'];
                $v_dist=$_POST['distrito'];
                $conexion=pg_connect("host=localhost port= 5432 dbname=principal user=postgres password=")or die("NO se pudo conectar la base de datos".pg_last_error());

                $sql="SELECT clientes.inm_cod,clientes.inm_doc,clientes.inm_nomcli,clientes.tipocli,agen_distri.inm_dist,cuentas.inm_cta,
                cuentas.inm_scta,cuentas.tip_cuenta,cuentas.inm_codusu,agencias.inm_age,agencias.age_nom,inmuebles.inm_supter,
                inmuebles.inm_supcub,inmuebles.inm_eda,inmuebles.inm_tipedi,inmuebles.coef_edif,domicilios.loc_prov,domicilios.inm_loc,
                domicilios.inm_bar,domicilios.inm_cal,domicilios.inm_nro,domicilios.inm_pis,domicilios.inm_dto,domicilios.inm_man,
                domicilios.inm_blk,domicilios.inm_lot,domicilios.inm_cas,padrones.padron,padrones.matricula
                FROM agen_distri join agencias on agen_distri.inm_age=agencias.inm_age join cuentas on agencias.inm_age=cuentas.inm_age
                join clientes on cuentas.inm_cod=clientes.inm_cod join inmuebles on clientes.inm_cod=inmuebles.inm_cod join domicilios 
                on inmuebles.inm_cod=domicilios.inm_cod 
                WHERE  (clientes.inm_cod::varchar LIKE '%{$v_valor}%' OR inm_doc::varchar LIKE '{$v_valor}' OR inm_cta::varchar LIKE '{$v_valor}') AND (inm_dist=$v_dist) ";

                $resultado=pg_query($conexion,$sql);

                if( !$resultado )
                    die("Error, no se ejecutó la consulta.");
                else{
        $array["data"] = [];//devuelve un arreglo vacio por si no hay registros en la base de datos
        while ( $data = pg_fetch_assoc($resultado)){
            $array["data"][] = $data;//array_map("utf8_encode", $data);
        }
        echo json_encode( $array );
    }

    pg_free_result( $resultado );
    pg_close( $conexion );
};
?>

3 Respuestas

2votos

jj19958 Puntos4130

no se si esto es lo que buscas pero hace un filtrado de una tabla sin hacer las peticiones a la base de datos con el siguiente código...

    <script type="text/javascript">
    $(document).ready(function () {
       (function($) {
           $('#FiltrarContenido').keyup(function () {
                var ValorBusqueda = new RegExp($(this).val(), 'i');
                $('.BusquedaRapida tr').hide();
                 $('.BusquedaRapida tr').filter(function () {
                    return ValorBusqueda.test($(this).text());
                  }).show();
                    })
          }(jQuery));
    });
    </script>

<input id="FiltrarContenido" type="text" class="form-control pull-right" placeholder="Buscar" aria-label="Buscar" aria-describedby="basic-addon1">

<tbody class="BusquedaRapida">

1voto

lukeskay comentado

Lo probare luego y aviso si es que me funciona. gracias por la ayuda

2votos

chico Puntos170

de igual manera yo tengo un input para buscar coincidencias de la tabla.
codigo js:

document.querySelector("#nombre_del_input").onkeyup = function(){
        $TableFilter("#id_de_tu_tabla", this.value);
    }
    $TableFilter = function(id, value){
        var rows = document.querySelectorAll(id + ' tbody tr');
        for(var i = 0; i < rows.length; i++){
            var showRow = false;
            var row = rows[i];
            row.style.display = 'none';
            for(var x = 0; x < row.childElementCount; x++){
                if(row.children[x].textContent.toLowerCase().indexOf(value.toLowerCase().trim()) > -1){
                    showRow = true;
                    break;
                }
            }    
            if(showRow){
                row.style.display = null;
            }
        }
    } 

codigo html:

<label class="col-md-3" style="text-align: right; font-size:18px; for="text" >Buscar Distribuidor</label>
   <div class="col-md-4">
    <input type="text" class="form-control" name="buscar" style="border-radius: 5px;" id="buscar" 
          placeholder="    Filtrar Por Nombre o Referencia">
   </div>

1voto

lukeskay Puntos270

Gracias a jj19958 y a chico por sus respuestas... los lei y segui buscando sugerencias. Esto es lo que hice y que me funciona. Lo dejo por si alguien lo necesita y esta tambien abierto a mejores modificaciones y adaptaciones. Saludos
---- igual codigo al que esta en el html donde hice la primer pregunta

<div class="col-lg-8"> 
              <input type="text" class="form-control" placeholder="ingrese el valor a buscar" id="txt_valor" autofocus>
              <button class="btn btn-default btn-xs active" type="button" id="btn_buscador" onclick=buscador()>Buscar<span class="glyphicon glyphicon-search"></span></button>
              </div>

    </div>

------ script

<script text="javascript">

  function buscador(){
    var tipo='';
     var selectipo=document.getElementById("txt_tbuscar").value;
      switch(selectipo) {    
      case "0":
          tipo="inm_cod";
          break;
      case "1":
          tipo="inm_doc";
          break;
      case "2":
          tipo="inm_nomcli";
          break;
      case "3":
          tipo="tipocli";
          break;

      case "4":
          tipo="inm_dist";

          break;
      case "5":
          tipo="inm_cta";

          break;
      case "6":
          tipo="tipcuenta";
          break;

      case "7":
          tipo="inm_codusu";
          break;

     }
     var distrito=document.getElementById("txt_distrito").value;

     var valor=document.getElementById("txt_valor").value;

    $(document).ready(function() {
      $('#tBusqueda').DataTable({
        "destroy": true,
        "processing": true,
        "serverSide": true,
        "ajax": {
          'type': 'POST',
          'paging': true,
          'dataType': "json",
          'url': 'listar.php',
          'data':{
            "valor":valor,
            "distrito":distrito,
            "campo":tipo
          }
        },

        "columns":[
                {"data":"inm_cod"},
                {"data":"inm_doc"},
                {"data":"inm_nomcli"},
                {"data":"tipocli"},
                {"data":"inm_dist"},
                {"data":"inm_cta"},                            
                {"data":"inm_scta"},
                {"data":"tip_cuenta"},
                {"data":"inm_codusu"},
          ]
      });
    });

     $("#ventResultados").modal("show");

     };

     $("#txt_valor").keypress(function(e){
                if(e.which == 13){//control de la tecla enter
                  $('#btn_buscador').click(buscador());
                }
              });

  </script>

-------- php modificado

<?php
    header('Content-Type: application/json; charset=utf-8');
    if (isset($_POST['valor'] ) ){
    $v_valor=$_POST['valor'];
    $v_dist=$_POST['distrito'];
    $v_campo=$_POST['campo'];

      $ella='clientes.'.$v_campo;
      $ella.='cuentas.'.$v_campo;
    $conexion=pg_connect("host=localhost port= 5432 dbname=principal user=postgres password=")or die("NO se pudo conectar la base de datos".pg_last_error());

    $sql="SELECT clientes.inm_cod,clientes.inm_doc,clientes.inm_nomcli,clientes.tipocli,agen_distri.inm_dist,cuentas.inm_cta,          cuentas.inm_scta,cuentas.tip_cuenta,cuentas.inm_codusu
          FROM agen_distri join agencias on agen_distri.inm_age=agencias.inm_age join cuentas on agencias.inm_age=cuentas.inm_age
          join clientes on cuentas.inm_cod=clientes.inm_cod 
         WHERE ($ella::varchar like '%$v_valor%') and (agen_distri.inm_dist = $v_dist) ";

        $resultado=pg_query($conexion,$sql);

    if( !$resultado )
        die("Error, no se ejecutó la consulta.");
    else{
        $array["data"] = [];//devuelve un arreglo vacio por si no hay registros en la base de datos
        while ( $data = pg_fetch_assoc($resultado)){
            $array["data"][] = $data;//array_map("utf8_encode", $data);
        }
        echo json_encode( $array );
    }

    pg_free_result( $resultado );
    pg_close( $conexion );
};
    ?>

PD: Campos simplificados para mejor legibilidad y html similiar al que publique en un principio, solo modifique el el <div> que estoy mandando ahora.

0voto

Peter comentado

Gracias por compartir la solución. Ahora puedes votar en las respuestas de los que te ayudaron y marcar esta respuesta como la correcta.

1voto

lukeskay comentado

gracias. ya hice lo que dijiste. gracias por recordarmelo.saludos

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta