como buscar en tabla php con jquery

publicado por: Anonymous

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.

solución

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

_x000D_

_x000D_

$(function () {_x000D_
_x000D_
  $('#search').quicksearch('table tbody tr');								_x000D_
});

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.quicksearch/2.2.1/jquery.quicksearch.js"></script>_x000D_
_x000D_
_x000D_
<div class="row large-centered">_x000D_
        _x000D_
    </div>_x000D_
    <div class="row large-centered">_x000D_
        <input type="text" id="search" placeholder="Escribe para buscar..." />_x000D_
        <table id="table" width="100%">_x000D_
            <thead>_x000D_
                <tr>_x000D_
                    <th>Nombre Personaje</th>_x000D_
                    <th>Clase</th>_x000D_
                    <th>Reino</th>_x000D_
                </tr>_x000D_
            </thead>_x000D_
            <tbody>_x000D_
            <tr>_x000D_
                <td>Benjamin.</td>_x000D_
                <td>Rogue.</td>_x000D_
                <td>Uldum ES.</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Cachoito.</td>_x000D_
                <td>Hunter.</td>_x000D_
                <td>Agamaggan EN.</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Contemplario.</td>_x000D_
                <td>Paladin.</td>_x000D_
                <td>Uldum ES.</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Elthron.</td>_x000D_
                <td>Death Knight.</td>_x000D_
                <td>Agamaggan ES.</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Giloh.</td>_x000D_
                <td>Priest.</td>_x000D_
                <td>Agamaggan EN.</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Kitialamok.</td>_x000D_
                <td>Warrior.</td>_x000D_
                <td>Agamaggan EN.</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Magustroll.</td>_x000D_
                <td>Mage.</td>_x000D_
                <td>Agamaggan EN.</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Marselus.</td>_x000D_
                <td>Mage.</td>_x000D_
                <td>Uldum ES.</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Mistrala.</td>_x000D_
                <td>Warrior.</td>_x000D_
                <td>Uldum ES.</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Suavemente.</td>_x000D_
                <td>Warrior.</td>_x000D_
                <td>Agamaggan EN.</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Tittus.</td>_x000D_
                <td>Monk.</td>_x000D_
                <td>Agamaggan EN.</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Yarlokk.</td>_x000D_
                <td>Warlock.</td>_x000D_
                <td>Uldum ES.</td>_x000D_
            </tr>_x000D_
            </tbody>_x000D_
        </table>_x000D_
    </div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *