0

Buen día estoy utilizando un buscador con un filtro en jquery pero que solo me funciona con tablas. Y con las tablas se me hace difícil hacerla responsive en dispositivos móviles. Dado a que no puedo darle tamaño fijo ni adaptarlas, y me gustaría que me lea en vez de una tabla un div class=col-md-x para poderla hacerla responsive con bootstrap. Agradezco cualquier ayuda aca dejo el código.

$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#table tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

Y los datos vienen de la db pero bueno no importa y los muestro acá..

<div class="container">
<div class="row">
<div class="card-columns">
    <table id="table" class="table table-striped">
      <?php
        $arraySpecialist = Specialist::all();
        for ($i = 0 ; $i < count($arraySpecialist); $i++){ ?>
        <tr><td>
        <div id="card" class="card" style="position: relative;width: 100%;">
        <img class="card-img-top" alt="Card image cap" height="290" src="{{ $arraySpecialist[$i]['ruta'] }}" >
        <div class="card-body">
            <h5 class="card-title text-center">  {{ $arraySpecialist[$i]['name'] . ' ' . $arraySpecialist[$i]['lastName']}}</h5>
             <p class="card-text text-center">{{ $arraySpecialist[$i]['city'] }}</p>
             <p style="display:none" class="card-text text-center">{{$arraySpecialist[$i]['category']}}</p>
             <p style="display:none" class="card-text text-center">{{$arraySpecialist[$i]['subCategory']}}</p>
            <p id="card-text" class="card-text text-center" style="color: #fd7c68; font-weight: bold">{{ $arraySpecialist[$i]['specialty'] }}   </p>
            <?php $points = $arraySpecialist[$i]['points'];
            if(empty($points)){?>
                    <div style="background:#cc4a5e; height:30px;width:100%;color:white;text-align:center;font-weight:bold;border-style:solid;border-width:1px;border-color:#c1253d;border-radius:3px;">Sin puntuar aún</div>
            <?php }
            if($points >=9 && $points <=9.6){ ?>
            <div style="  display: flex;align-items: center;">
              <div style="margin: 0 auto">
                <img height="30" width="30" src="../img/Estrella.png" />
                <img height="30" width="30" src="../img/Estrella.png" />
                <img height="30" width="30" src="../img/Estrella.png" />
                <img height="30" width="30" src="../img/Estrella.png" />
                <img height="30" width="30" src="../img/Estrella-90.png" />
              </div></div>
                <?php }?><br>
             <div style="display: flex;align-items: center;">
                <div style="margin: 0 auto">
                    <form action="/perfilSpecialist" method="get">
                        <input type="hidden" name="idSpecialist" value="{{ $arraySpecialist[$i]['id'] }}" />
                        <input type="submit" value="Ver perfil" class="btn btn-info" />
                    </form>
                </div>
             </div>
        </div>
        </div></td></tr>

    <?php } ?>
        </table>
</div></div></div>

1 respuesta 1

0

te recomiendo que utilices alguna librería para poder tener tablas responsive y con los que tienes muchas opciones de funcionalidades como exportar en excel,xml,estilo,paginación de registros,etc) y de esa manera,te quitas de dolores de cabeza.Te dejo una librería que he usado yo y funciona muy bien.Échale un ojo y me cuentas.

http://bootstrap-table.wenzhixin.net.cn/es/documentation/

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.