0

Tengo una sola tabla que muestro en una vista en laravel y resulta que quiero que esa misma tabla (no creando otra) se muestre ordenada horizontalmente en diferentes tablas de acuerdo a los datos recibidos, repitiendo su estructura con un @foreach.

En un primer momento lo logré mostrar (sin ocupar un @foreach); la tabla copiando su estructura en diferentes tablas. Pero como estoy trabajando con bases de datos no me sirve así.

Esto porque estas tablas aparecen de forma automática según un valor que viene directamente desde la BD, la tabla corresponde a un complejo específico, que viene de una vista anterior, con canchas (específicas por complejo) de deportes, tenis, fútbol, basquetbol, etc; y estas se deben separar en distintas tablas. Y son las tablas que intento ordenar

¿Hay algún modo de que me queden ordenadas horizontalmente sin repetir intencionalmente las tablas?

Con intencional me refiero a lo siguiente como ejemplo (Así no deberia ser):

<table id="table1">
    <tr><td>Cancha 1</td></tr>
</table>

<table id="table2">
    <tr><td>Cancha 2</td></tr>
</table>

<table id="table3>
    <tr><td>Cancha 3</td></tr>
</table>"

De esta manera muestro las tablas (Como debería ser)

@if($cuenta->canchas > 1 && $contar->horarios > 1)
    @foreach($horarios as $horario)
        @if($cancha->complejo_id == $complejo)
            <div class="tabla">
                <table width="570" cellpadding="10" cellspacing="0" border="1">
                    <tr>
                        <th>Horarios</th>
                        <th>Cancha</th>
                        <th>Deporte</th>
                        <th>Estado</th>
                        <th>-</th>
                    </tr>

                    <tr class="table-hover">
                        @if($horario->estado == 1)
                            <td>{{$horario->hora_inicio}}</td>
                            <td>{{$horario->cancha}}</td>
                            <td>{{$horario->deporte}}</td>
                            <td><button  disabled="disabled" class="btn_bussy">OCUPADO</button></td>
                            <td></td>
                        @else
                            <form method="POST"  action="{{route('reservar-confirmar',['complejo'=>$complejo])}}">                    
                                <td>{{$horario->hora_inicio}}</td>
                                <td>{{$horario->cancha}}</td>
                                <td>{{$horario->deporte}}</td>
                                <td><button disabled="disabled" class="btn_ready">DISPONIBLE</button></td>
                                {!! Form::token() !!}
                                <td>
                                    <input type="submit" name="guardar" class="btn btn-danger" id="btn-seleccionar" value="SELECCIONAR">
                                </td>
                            </form>
                        @endif      
                    </tr>
                </table>
            </div>
        @endif
    @endforeach
@endif

Y de esta forma se me ve.

introducir la descripción de la imagen aquí


Cuando quiero que queden de esta manera (para mostrarlo de esta manera repetí las tablas intencionalmente sin ocupar un @foreach para ordenarlas)

Así me gustaría que se vea: introducir la descripción de la imagen aquí

2
  • ¿Cómo determinas «que no quepan en la pantalla»?
    – Shaz
    el 13 feb. 2019 a las 13:47
  • Es por la clase ocupo 1 y esa está como flotante a la izquierda (float:left) y al ocupar @foreach me debe repetir todo y por ende si ya no cabe pasará a la siguiente linea.
    – M4uriXD
    el 13 feb. 2019 a las 14:01

2 respuestas 2

3

Tienes que sacar la cabecera de la tabla del foreach, sino te lo va a repetir también

Prueba así, a ver

@if($cuenta->canchas > 1 && $contar->horarios > 1)
    @if($cancha->complejo_id == $complejo)
        <div class="tabla">
            <table width="570" cellpadding="10" cellspacing="0" border="1">
                <tr>
                    <th>Horarios</th>
                    <th>Cancha</th>
                    <th>Deporte</th>
                    <th>Estado</th>
                    <th>-</th>
                </tr>
            @foreach($horarios as $horario)
                <tr class="table-hover">
                    @if($horario->estado == 1)
                        <td>{{$horario->hora_inicio}}</td>
                        <td>{{$horario->cancha}}</td>
                        <td>{{$horario->deporte}}</td>
                        <td><button  disabled="disabled" class="btn_bussy">OCUPADO</button></td>
                        <td></td>
                    @else
                        <form method="POST"  action="{{route('reservar-confirmar',['complejo'=>$complejo])}}">                    
                            <td>{{$horario->hora_inicio}}</td>
                            <td>{{$horario->cancha}}</td>
                            <td>{{$horario->deporte}}</td>
                            <td><button disabled="disabled" class="btn_ready">DISPONIBLE</button></td>
                            {!! Form::token() !!}
                            <td>
                                <input type="submit" name="guardar" class="btn btn-danger" id="btn-seleccionar" value="SELECCIONAR">
                            </td>
                        </form>
                    @endif      
                </tr>
                @endforeach
            </table>
        </div>
    @endif

@endif

1
  • 2
    Mmm ya veo te refieres al @foreach dejarlo en el cuerpo de la tabla, ya probé así y me repite todo hacia abajo, la idea es que me quedara ordenada una al lado de otra y las demás se van moviendo hacia abajo. Por eso el @foreach lo puse al comienzo del <div>
    – M4uriXD
    el 13 feb. 2019 a las 14:04
0

Si quieres es mostrar dos tablas y quieres q vallan intercalando entre si los datos yo pusiera en una tabla los datos pares, en el otro los impares. Ejemplo

@foreach($horarios as $horario)
   @if($loop->index % 2 == 0)
       <tr>
            //bla bla bla
       </tr>
    @endif
@endforeach

@foreach($horarios as $horario)
   @if($loop->index % 2 == 1)
       <tr>
            //bla bla bla
       </tr>
    @endif
@endforeach

La documentacion de $loop variable puedes verla aqui

1
  • No amigo asi no me funciona. sigue igual.
    – M4uriXD
    el 14 feb. 2019 a las 18:32

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.