0

Tengo el siguiente código, pero no puedo buscar correctamente. En el filtro de estatus si busca correctamente, pero en el buscador de texto (nombre de cliente) no encuentra nada, he tratado poniendo el código de jquery pero me corta mis columnas y solo busca en la de nombre de cliente. O alguna forma de hacer una busqueda en el table.

$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myDIV *").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="form-reporte" method="post" action="">
  <div class="contenidos"><label class="mb">CLIENTES</label>&nbsp;
  <div class="container">

      <div class="search">
  <input class="form-control" id="myInput" type="text" placeholder="Búsqueda.."></div>
      
  </div>
<table class="table table-vertical-middle table-striped">
    <thead>
    <tr>
        <th class="num">NRO</th>
        <th>Nombre</th>
        <th class="text-center" width="200">Acciones</th>
    </tr>
    </thead>
    <tbody id="myDIV">
    <?php if( isset( $clientes ) and is_array( $clientes ) and count( $clientes ) > 0 ){
        $i=$paginado["num"];
        foreach( $clientes as $cliente ){ $i++; ?>
            <tr>
                <td class="text-center"><?php echo $i ?></td>
                <td><?php echo $cliente["Nombre"] ?></td>
                <td id="prueba" class="text-center">
                    <a href="<?php echo $this->url( "editar/" . $cliente["id"] ); ?>" class="btn btn-sm btn-warning" data-toggle="modal" data-title="Editar"><span class="glyphicon glyphicon-edit"></span> Editar</a>
                    <?php if( $_SESSION["usuario"]["perfiles_id"]==1): ?>
                    <a href="<?php echo $this->url( "eliminar/" . $cliente["id"] ); ?>" class="btn btn-sm btn-danger" data-toggle="modal" data-title="Eliminar"><span class="glyphicon glyphicon-trash"></span> Eliminar</a>
                    <?php endif; ?>
                </td>
            </tr>
        <?php  }
        } else{
            ?>
            <tr>
                <td colspan="3">No se encontraron registros.</td>
            </tr>
        <?php } ?>
    </tbody>
    <tfoot>
    <tr>
        <td colspan="3"><?php echo $paginado["botones"]; ?></td>
    </tr>
    </tfoot>
</table>

6
  • edita tu pregunta y agrega el codigo php ya ejecutado para que pueda ser un ejemplo minimo verificable y poder tener data de ejemplo!
    – Bryro
    el 2 dic. 2020 a las 14:17
  • Hola perdon pero no entiendo vos queres hacer algo así como un buscador que busque usuarios o que busque en un texto determinada palabra
    – max marinn
    el 2 dic. 2020 a las 14:53
  • como se hace eso?? disculpa soy nuevo en esto... el 2 dic. 2020 a las 16:35
  • usa el boton editar y agrega todo en la pregunta...
    – gbianchi
    el 2 dic. 2020 a las 16:53
  • Mira Cómo preguntar para que tu pregunta sea mejor recibida. También, aprovecha y haz el recorrido de bienvenida para entender mejor cómo funcionamos y de paso obtener tu primera medalla!
    – gbianchi
    el 2 dic. 2020 a las 16:53

1 respuesta 1

0

Si he entendido bien tus intenciones, lo que deseas hacer es mostrar/ocultar las filas de la tabla si estas coinciden o no con el término de búsqueda especificado en #myInput.

El primer problema es el uso de este selector $("#myDIV *"). Básicamente estas seleccionando todos los elementos dentro de #myDiv: td, span, a. Entonces, cuando haces el toggle no lo estás aplicando solamente a la tr, sino también a los demás elementos. Esta es la razón por la que "te corta las columnas".

Algo que debes también tener muy presente es evitar hacer muchos accesos al DOM ya que esto hace la aplicación más lenta. Hoy en día todos tenemos super computadoras (o super smartphones) y no se nota demasiado, pero se nota.

Solución:

  1. Agrega un tag style al final del elemento head con el id "oculatar_clientes_style". Aquí vamos a agregar reglas css para ocultar/mostrar clientes. Con este enfoque accedemos una sola vez al DOM.
<head>
    ...
    <style id="ocultar_clientes_style"></style>
</head>
  1. Haz las búsquedas sobre una colección de datos desligada del DOM, una vez tienes los resultado accedes al DOM para mostrar/ocular.
<script>
    // crea un array que puedas iterar para hacer la búsqueda sin acceder al DOM
    let clientes = [];
    
    <?php foreach($clientes as $cliente): ?>
    clientes.push({id: <?php echo $cliente['id']; ?>, nombre: "<?php echo $cliente['Nombre']; ?>"});
    <?php endforeach; ?>
</script>   
  1. Agrega clases a las tr de modo que puedas aplicar una regla css que luego las oculte y/o muestre

En el html

// en el bucle de clientes remplaza esto
<tr>

// por esto
<tr class="fila-cliente-<?php echo $cliente['id']; ?>">
  1. Haz la búsqueda en el evento keyup
<script>
    $(document).ready(function(){
        let myInput$ = $('#myInput'),
            tagDeEstilo$ = $('#oculatar_clientes_style');
        
        myInput$.on("keyup", function() {
            let terminosDeBusqueda = this.value,
                cssParaOcultar = '';
            
            if (terminosDeBusqueda) {
                clientes.forEach(cliente => {
                    // aquí hacemos una búsqueda en el Nombre,
                    // pero podrías usar cualquier otro atributo
                    // incluso combinarlos
                    if (cliente.nombre.indexOf(terminosDeBusqueda) === -1) {
                        cssParaOcultar += ' tr.fila-cliente-' + cliente.id + '{ display: none; }';
                    }
                })
            }
            
            tagDeEstilo$.html(cssParaOcultar);
        });
    });
</script>

Espero esto te sirva, buena suerte!

4
  • Te agradezco tu respuesta, probé el código que sugieres pero no funciono, creo que no lo estoy haciendo bien. Te paso mi correo para ver si podemos conversar por correo y pasarte como quedo mi archivo con las modificaciones que sugieres. Correo: [email protected] el 9 dic. 2020 a las 23:36
  • Hey José Carlos, estuve viendo el código que pusiste y noto que usas dos variables $clientes y $empleados. También debes asegurarte de agregar el tag style. Asegúrate de tener también la configuración correcta para ver los errores en tiempo de ejecución. Fíjate también en los índices de los arrays, "nombre" no es lo mismo que "Nombre" el 10 dic. 2020 a las 14:51
  • Ya cambie algunas cosas que me comentaste, podemos verlo por gmail? el 10 dic. 2020 a las 22:47
  • creo que ya hice que funcionara, pero ahora cuando busca, elimina los demas TD de la tabla, como puedo dejarlos? el 10 dic. 2020 a las 23:14

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.