0

Buenas, estoy intentando realizar una búsqueda en una tabla php.

Este es el codigo con el cual muestro mi tabla:

    <div class="form-group">
            <label for="search">Buscar:</label>
              <div class="input-group col-sm-6">
                <input type="text" REQUIRED class="form-control"  id="search" placeholder="Ingresar Nombre">

              </div>
          </div>

<table class="table table-bordered table-hover">
                      <thead>
                        <tr bgcolor="#AFDDEC">

                    <th>Cliente</th>
                    <th>Tipo Documento</th>
                    <th>Documento</th>
                    <th>Direccion</th>

                        </tr>

                      </thead>
                      <tbody>
                      <?php 
                        if ($result->num_rows > 0) {

                          while($row = $result->fetch_assoc()) {

                        echo '<tr><td>'.$row["nombre"].' '.$row["apellidos"].
                        '</td><td>'.$row["tipo_doc"].
                        '</td><td>'.$row["dni"].
                        '</td><td>'.$row["direccion"].
                        '</td></tr>';

                          }
                      } else {
                          echo "0 results";
                      }
                    ?>
                      </tbody>
    </table>

Y aqui el fragmento de jquery, con el cual pensaba que podía implementarlo:

var $rows = $('.table tr');
$('#search').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

    $rows.show().filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);
    }).hide();
});

Pero el código simplemente no hace nada. Alguna sugerencia para poder buscar en mi tabla? Perdonen las molestias pero soy nuevo en esto. Gracias de antemano.

2
  • 1
    Por que no intentas usar Jquery datatables, es una libreria muy buena, y te ahorra mucho trabajo. Es solo una sugerencia
    – Alan
    Commented el 21 jun. 2016 a las 16:51
  • ¿has comprobado si salen errores de Javascript? al menos mete una sentencia console.log con la variable val para comprobar que se está ejecutando la función en cada pulsación del teclado.
    – gontrollez
    Commented el 21 jun. 2016 a las 20:31

2 respuestas 2

5

Podrias hacer uso de la libreria

quickSearch

con esta libreria podrias realizas busquedas en una tabla html directo en el cliente sobre los datos que se listan

$(function () {

  $('#search').quicksearch('table tbody tr');								
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.quicksearch/2.2.1/jquery.quicksearch.js"></script>


<div class="row large-centered">
        
    </div>
    <div class="row large-centered">
        <input type="text" id="search" placeholder="Escribe para buscar..." />
        <table id="table" width="100%">
            <thead>
                <tr>
                    <th>Nombre Personaje</th>
                    <th>Clase</th>
                    <th>Reino</th>
                </tr>
            </thead>
            <tbody>
            <tr>
                <td>Benjamin.</td>
                <td>Rogue.</td>
                <td>Uldum ES.</td>
            </tr>
            <tr>
                <td>Cachoito.</td>
                <td>Hunter.</td>
                <td>Agamaggan EN.</td>
            </tr>
            <tr>
                <td>Contemplario.</td>
                <td>Paladin.</td>
                <td>Uldum ES.</td>
            </tr>
            <tr>
                <td>Elthron.</td>
                <td>Death Knight.</td>
                <td>Agamaggan ES.</td>
            </tr>
            <tr>
                <td>Giloh.</td>
                <td>Priest.</td>
                <td>Agamaggan EN.</td>
            </tr>
            <tr>
                <td>Kitialamok.</td>
                <td>Warrior.</td>
                <td>Agamaggan EN.</td>
            </tr>
            <tr>
                <td>Magustroll.</td>
                <td>Mage.</td>
                <td>Agamaggan EN.</td>
            </tr>
            <tr>
                <td>Marselus.</td>
                <td>Mage.</td>
                <td>Uldum ES.</td>
            </tr>
            <tr>
                <td>Mistrala.</td>
                <td>Warrior.</td>
                <td>Uldum ES.</td>
            </tr>
            <tr>
                <td>Suavemente.</td>
                <td>Warrior.</td>
                <td>Agamaggan EN.</td>
            </tr>
            <tr>
                <td>Tittus.</td>
                <td>Monk.</td>
                <td>Agamaggan EN.</td>
            </tr>
            <tr>
                <td>Yarlokk.</td>
                <td>Warlock.</td>
                <td>Uldum ES.</td>
            </tr>
            </tbody>
        </table>
    </div>

2

Te comparto una solucion que existe en SO en Inglés: https://stackoverflow.com/questions/20567426/search-html-table-with-js-and-jquery

Aunque mejor es implementar una herramienta como jquery datatables que te facilita toda esta tarea.

    // captura el evento keyup cuando escribes en el input
    $("#search").keyup(function(){
        _this = this;
        // Muestra los tr que concuerdan con la busqueda, y oculta los demás.
        $.each($("#table tbody tr"), function() {
            if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1)
               $(this).hide();
            else
               $(this).show();                
        });
    }); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row large-centered">
        
    </div>
    <div class="row large-centered">
        <input type="text" id="search" placeholder="Escribe para buscar..." />
        <table id="table" width="100%">
            <thead>
                <tr>
                    <th>Nombre Personaje</th>
                    <th>Clase</th>
                    <th>Reino</th>
                </tr>
            </thead>
            <tbody>
            <tr>
                <td>Benjamin.</td>
                <td>Rogue.</td>
                <td>Uldum ES.</td>
            </tr>
            <tr>
                <td>Cachoito.</td>
                <td>Hunter.</td>
                <td>Agamaggan EN.</td>
            </tr>
            <tr>
                <td>Contemplario.</td>
                <td>Paladin.</td>
                <td>Uldum ES.</td>
            </tr>
            <tr>
                <td>Elthron.</td>
                <td>Death Knight.</td>
                <td>Agamaggan ES.</td>
            </tr>
            <tr>
                <td>Giloh.</td>
                <td>Priest.</td>
                <td>Agamaggan EN.</td>
            </tr>
            <tr>
                <td>Kitialamok.</td>
                <td>Warrior.</td>
                <td>Agamaggan EN.</td>
            </tr>
            <tr>
                <td>Magustroll.</td>
                <td>Mage.</td>
                <td>Agamaggan EN.</td>
            </tr>
            <tr>
                <td>Marselus.</td>
                <td>Mage.</td>
                <td>Uldum ES.</td>
            </tr>
            <tr>
                <td>Mistrala.</td>
                <td>Warrior.</td>
                <td>Uldum ES.</td>
            </tr>
            <tr>
                <td>Suavemente.</td>
                <td>Warrior.</td>
                <td>Agamaggan EN.</td>
            </tr>
            <tr>
                <td>Tittus.</td>
                <td>Monk.</td>
                <td>Agamaggan EN.</td>
            </tr>
            <tr>
                <td>Yarlokk.</td>
                <td>Warlock.</td>
                <td>Uldum ES.</td>
            </tr>
            </tbody>
        </table>
    </div>

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.