how to search in php table with jquery

0

Good, I'm trying to perform a search on a php table.

This is the code with which I show my table:

    <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>

And here the fragment of jquery, with which I thought I could implement it:

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();
});

But the code simply does not do anything. Any suggestions to be able to search my table? Sorry for the inconvenience but I'm new to this. Thanks in advance.

    
asked by Raphael 21.06.2016 в 18:46
source

2 answers

3

You could use the library

quickSearch

with this library you can search in a direct html table in the client about the data that is listed

$(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>
    
answered by 21.06.2016 / 21:04
source
1

I share a solution that exists in OS in English: link

Although it is better to implement a tool such as jquery datatables that facilitates all this task.

    // 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>
    
answered by 21.06.2016 в 19:03