Paginación en Grails con Bootstrap 3

261 views
Skip to first unread message

Cortocircuito

unread,
Aug 3, 2016, 7:46:35 AM8/3/16
to grailsEnCastellano
Buenas tardes,

        Tengo instalado Bootstrap en un proyecto Grails de forma manual, el caso es que tengo que mostrar una tabla y quiero mostrar los datos paginados. Como se arregla para que funcione bajo Bootstrap. Seguí un tutorial de como aplicar bootstrap a un proyecto grails. Estoy usuando Grails 2.3.11. He buscado "grails bootstrap pagination" pero nada de lo que encontrado me termina de funcionar.

http://stackoverflow.com/questions/23243531/grails-display-dynamic-contents-with-using-twitter-bootstrap-pagination
https://github.com/groovydev/twitter-bootstrap-grails-plugin/blob/master/grails-app/taglib/org/groovydev/TwitterBootstrapTagLib.groovy

¿Vosotros que solución soleís aplicar?

Saludos.

Rafael Bermúdez Míguez

unread,
Aug 3, 2016, 8:01:33 AM8/3/16
to grailsenc...@googlegroups.com
No acabo de comprender la pregunta:

  1. Generas la tabla en un gsp y sólo intentas aplicar los estilos (css) de BootStrap a tu tabla
  2. Utilizas algún componente estilo datatables con Bootstrap y quieres "engancharlo" con Grails utilizando una aproximación server-side
¿Puedes especificar un poco más?

--
Has recibido este mensaje porque estás suscrito al grupo "grailsEnCastellano" de Grupos de Google.
Para anular la suscripción a este grupo y dejar de recibir sus mensajes, envía un correo electrónico a grailsencastell...@googlegroups.com.
Para publicar en este grupo, envía un correo electrónico a grailsenc...@googlegroups.com.
Visita este grupo en https://groups.google.com/group/grailsencastellano.
Para acceder a más opciones, visita https://groups.google.com/d/optout.



--
________________________________
 
Rafael Bermúdez Míguez,
Twitter: @rafbermudez

Cortocircuito

unread,
Aug 3, 2016, 8:26:33 AM8/3/16
to grailsEnCastellano
Vale voy a proporcionar más información:

Utilizo un plantilla llamada sb admin 2

y mi gsp se llama listado.gsp:

<!doctype html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="layout" content="sb_admin_2"/>
    <title>
        <g:message code="alumno.lista.label" default="Listado de Alumnos" />
    </title>
</head>

<body>

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12">
            <h3 class="text-center">
                <g:message code="alumno.lista.label" default="Listado de Alumnos" />
            </h3>
        </div>
    </div>
</div>

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12">
            <div class="table-responsive">
                <table class="table table-bordered table-hover table-condensed">
                    <thead>
                    <tr>
                        <g:sortableColumn property="nombreCompleto" title="${message(code: 'alumno.nombre.label', default: 'Alumno/a')}"
                                          class="text-left text-nowrap"/>

                        <g:sortableColumn property="direccionCompleta" title="${message(code: 'alumno.direccion.label', default: 'Dirección')}"
                                          class="text-left text-nowrap"/>

                        <g:sortableColumn property="telefono" title="${message(code: 'alumno.telefono.label', default: 'Teléfono')}"
                                          class="text-left text-nowrap"/>

                        <g:sortableColumn property="telefonoUrgencia" title="${message(code: 'alumno.telefonoUrgencia.label', default: 'Teléfono Urgencia')}"
                                          class="text-left text-nowrap"/>

                        <g:sortableColumn property="correoElectronico" title="${message(code: 'alumno.codigoSeneca.label', default: 'Email')}"
                                          class="text-left text-nowrap"/>
                    </tr>
                    </thead>
                    <tbody>
                    <g:each in="${alumnoInstanceList}" status="i" var="alumnoInstance">
                        <tr class="${(i % 2) == 0 ? 'even' : 'odd'}">

                            <td><g:link action="show" id="${alumnoInstance.id}">${fieldValue(bean: alumnoInstance, field: "nombreCompleto")}</g:link></td>

                            <td>${fieldValue(bean: alumnoInstance, field: "direccionCompleta")}</td>

                            <td>${fieldValue(bean: alumnoInstance, field: "telefono")}</td>

                            <td>${fieldValue(bean: alumnoInstance, field: "telefonoUrgencia")}</td>

                            <td>${fieldValue(bean: alumnoInstance, field: "correoElectronico")}</td>

                        </tr>
                    </g:each>
                    </tbody>
                </table>
                <div class="pagination">
                    <g:paginate total="${alumnoInstanceCount}" />
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Y Este mi controllador:
def listado(Integer max) {

    params.max = Math.min(max ?: 10, 100)
    if(!params.offset) params.offset = 0

    def c = Alumno.createCriteria()
    def results = c.list (max: params.max, offset: params.offset) {
        asignaturasMatriculado{
            eq 'id', session.unidadCargada?.idAsignatura
        }
        grupos{
            eq 'id', session.unidadCargada?.idGrupo
        }
    }

    render(view:'listado', model:[ alumnoInstanceList: results, alumnoInstanceCount: results.totalCount])
}

Y el main.css lo limpie como indicaba el tutorial dejando solo lo siguiente:

/* MESSAGES AND ERRORS */

.errors,
.message {
   font-size: 0.8em;
   line-height: 2;
   margin: 1em 2em;
   padding: 0.25em;
}

.message {
   background: #f3f3ff;
   border: 1px solid #b2d1ff;
   color: #006dba;
   -moz-box-shadow: 0 0 0.25em #b2d1ff;
   -webkit-box-shadow: 0 0 0.25em #b2d1ff;
   box-shadow: 0 0 0.25em #b2d1ff;
}

.errors {
   background: #fff3f3;
   border: 1px solid #ffaaaa;
   color: #cc0000;
   -moz-box-shadow: 0 0 0.25em #ff8888;
   -webkit-box-shadow: 0 0 0.25em #ff8888;
   box-shadow: 0 0 0.25em #ff8888;
}

.errors ul,
.message {
   padding: 0;
}

.errors li {
   list-style: none;
   background: transparent url(../images/skin/exclamation.png) 0.5em 50% no-repeat;
   text-indent: 2.2em;
}

.message {
   background: transparent url(../images/skin/information.png) 0.5em 50% no-repeat;
   text-indent: 2.2em;
}

/* form fields with errors */

.error input, .error select, .error textarea {
   background: #fff3f3;
   border-color: #ffaaaa;
   color: #cc0000;
}

.error input:focus, .error select:focus, .error textarea:focus {
   -moz-box-shadow: 0 0 0.5em #ffaaaa;
   -webkit-box-shadow: 0 0 0.5em #ffaaaa;
   box-shadow: 0 0 0.5em #ffaaaa;
}

/* same effects for browsers that support HTML5 client-side validation (these have to be specified separately or IE will ignore the entire rule) */

input:invalid, select:invalid, textarea:invalid {
   background: #fff3f3;
   border-color: #ffaaaa;
   color: #cc0000;
}

input:invalid:focus, select:invalid:focus, textarea:invalid:focus {
   -moz-box-shadow: 0 0 0.5em #ffaaaa;
   -webkit-box-shadow: 0 0 0.5em #ffaaaa;
   box-shadow: 0 0 0.5em #ffaaaa;
}

/* PAGINATION */

.pagination {
   border-top: 0;
   margin: 0;
   padding: 0.3em 0.2em;
   text-align: center;
   -moz-box-shadow: 0 0 3px 1px #AAAAAA;
   -webkit-box-shadow: 0 0 3px 1px #AAAAAA;
   box-shadow: 0 0 3px 1px #AAAAAA;
   background-color: #EFEFEF;
}

.pagination a,
.pagination .currentStep {
   color: #666666;
   display: inline-block;
   margin: 0 0.1em;
   padding: 0.25em 0.7em;
   text-decoration: none;
   -moz-border-radius: 0.3em;
   -webkit-border-radius: 0.3em;
   border-radius: 0.3em;
}

.pagination a:hover, .pagination a:focus,
.pagination .currentStep {
   background-color: #999999;
   color: #ffffff;
   outline: none;
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
}

.no-borderradius .pagination a:hover, .no-borderradius .pagination a:focus,
.no-borderradius .pagination .currentStep {
   background-color: transparent;
   color: #444444;
   text-decoration: underline;
}

Cuando cargo mi vista listado.gsp veo los alumnos pero no me muestra la paginación.

Saludos, muchas gracias por responder y echarme un cable.

El miércoles, 3 de agosto de 2016, 14:01:33 (UTC+2), Rafael Bermúdez Míguez escribió:
No acabo de comprender la pregunta:

  1. Generas la tabla en un gsp y sólo intentas aplicar los estilos (css) de BootStrap a tu tabla
  2. Utilizas algún componente estilo datatables con Bootstrap y quieres "engancharlo" con Grails utilizando una aproximación server-side
¿Puedes especificar un poco más?
El 3 de agosto de 2016, 13:46, Cortocircuito <cortoc...@gmail.com> escribió:
Buenas tardes,

        Tengo instalado Bootstrap en un proyecto Grails de forma manual, el caso es que tengo que mostrar una tabla y quiero mostrar los datos paginados. Como se arregla para que funcione bajo Bootstrap. Seguí un tutorial de como aplicar bootstrap a un proyecto grails. Estoy usuando Grails 2.3.11. He buscado "grails bootstrap pagination" pero nada de lo que encontrado me termina de funcionar.

http://stackoverflow.com/questions/23243531/grails-display-dynamic-contents-with-using-twitter-bootstrap-pagination
https://github.com/groovydev/twitter-bootstrap-grails-plugin/blob/master/grails-app/taglib/org/groovydev/TwitterBootstrapTagLib.groovy

¿Vosotros que solución soleís aplicar?

Saludos.

--
Has recibido este mensaje porque estás suscrito al grupo "grailsEnCastellano" de Grupos de Google.
Para anular la suscripción a este grupo y dejar de recibir sus mensajes, envía un correo electrónico a grailsencastellano+unsub...@googlegroups.com.

Para publicar en este grupo, envía un correo electrónico a grailsenc...@googlegroups.com.
Visita este grupo en https://groups.google.com/group/grailsencastellano.
Para acceder a más opciones, visita https://groups.google.com/d/optout.

Rafael Bermúdez Míguez

unread,
Aug 3, 2016, 9:20:34 AM8/3/16
to grailsenc...@googlegroups.com
¡Vale! Opción 1.

Lo que yo haría

1- Creo que no te lo está generando , pero verifica si crea el elemento la vista bien el html en el navegador (con firebug o chrome inspector por ej)

Sería algo del estilo
<ul class="pagination">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
</ul>

2- Verifica que alumnoInstanceCount tiene un valor entero >0

3 - Prueba la llamada explicitando el  action. Puede que tu  action por defecto no sea el que crees que es

<g:paginate action="listado" total="${alumnoInstanceCount}" />

4 - Prueba a ver que te genera
<g:paginate action="listado" total="50" />

A ver si te ayuda,
Un saludo


Para anular la suscripción a este grupo y dejar de recibir sus mensajes, envía un correo electrónico a grailsencastell...@googlegroups.com.
Para publicar en este grupo, envía un correo electrónico a grailsenc...@googlegroups.com.
Visita este grupo en https://groups.google.com/group/grailsencastellano.
Para acceder a más opciones, visita https://groups.google.com/d/optout.



--
________________________________
 
Rafael Bermúdez Míguez,
Twitter: @rafbermudez

--
Has recibido este mensaje porque estás suscrito al grupo "grailsEnCastellano" de Grupos de Google.
Para anular la suscripción a este grupo y dejar de recibir sus mensajes, envía un correo electrónico a grailsencastell...@googlegroups.com.

Para publicar en este grupo, envía un correo electrónico a grailsenc...@googlegroups.com.
Visita este grupo en https://groups.google.com/group/grailsencastellano.
Para acceder a más opciones, visita https://groups.google.com/d/optout.

Cortocircuito

unread,
Aug 3, 2016, 3:57:07 PM8/3/16
to grailsEnCastellano
Buenas noches,

Rafael gracias, con tus comentarios he salido de mi pensamiento cíclico, estaba hecho un cabezota con que era problema de Bootstrap pero que tiene que ver que genere o no codigo html con que este o no bien estilizado, el caso es que no se me mostraba porque no pasaba un max y por lo tanto no se muestra paginado alguno.

Al llamarlo así de esta forma ya no tengo este problema:

<g:link controller="alumno" action="listado" params="[max: 5, offset: 0]">
    Listado
</g:link>

Gracias me has sido de ayuda para tomar otro camino, algunas veces uno mismo no es capaz de ver de una manera más amplia el problema.
Para anular la suscripción a este grupo y dejar de recibir sus mensajes, envía un correo electrónico a grailsencastellano+unsub...@googlegroups.com.
Para publicar en este grupo, envía un correo electrónico a grailsenc...@googlegroups.com.
Visita este grupo en https://groups.google.com/group/grailsencastellano.
Para acceder a más opciones, visita https://groups.google.com/d/optout.



--
________________________________
 
Rafael Bermúdez Míguez,
Twitter: @rafbermudez

--
Has recibido este mensaje porque estás suscrito al grupo "grailsEnCastellano" de Grupos de Google.
Para anular la suscripción a este grupo y dejar de recibir sus mensajes, envía un correo electrónico a grailsencastellano+unsub...@googlegroups.com.

Para publicar en este grupo, envía un correo electrónico a grailsenc...@googlegroups.com.
Visita este grupo en https://groups.google.com/group/grailsencastellano.
Para acceder a más opciones, visita https://groups.google.com/d/optout.

Rafael Bermúdez Míguez

unread,
Aug 3, 2016, 5:02:49 PM8/3/16
to grailsenc...@googlegroups.com
Una duda, ¿has sustituído un g:paginate por un g:link?

Para anular la suscripción a este grupo y dejar de recibir sus mensajes, envía un correo electrónico a grailsencastell...@googlegroups.com.
Para publicar en este grupo, envía un correo electrónico a grailsenc...@googlegroups.com.
Visita este grupo en https://groups.google.com/group/grailsencastellano.
Para acceder a más opciones, visita https://groups.google.com/d/optout.



--
________________________________
 
Rafael Bermúdez Míguez,
Twitter: @rafbermudez

--
Has recibido este mensaje porque estás suscrito al grupo "grailsEnCastellano" de Grupos de Google.
Para anular la suscripción a este grupo y dejar de recibir sus mensajes, envía un correo electrónico a grailsencastell...@googlegroups.com.

Para publicar en este grupo, envía un correo electrónico a grailsenc...@googlegroups.com.
Visita este grupo en https://groups.google.com/group/grailsencastellano.
Para acceder a más opciones, visita https://groups.google.com/d/optout.



--
________________________________
 
Rafael Bermúdez Míguez,
Twitter: @rafbermudez

--
Has recibido este mensaje porque estás suscrito al grupo "grailsEnCastellano" de Grupos de Google.
Para anular la suscripción a este grupo y dejar de recibir sus mensajes, envía un correo electrónico a grailsencastell...@googlegroups.com.

Para publicar en este grupo, envía un correo electrónico a grailsenc...@googlegroups.com.
Visita este grupo en https://groups.google.com/group/grailsencastellano.
Para acceder a más opciones, visita https://groups.google.com/d/optout.
Message has been deleted
Message has been deleted

Cortocircuito

unread,
Aug 4, 2016, 3:18:07 PM8/4/16
to grailsEnCastellano
Que va solo que cuando lo invocaba como tengo muy pocos alumnos sino forzaba el máximo a 5 no generaba codigo html alguno puesto que no era necesario paginar.
Reply all
Reply to author
Forward
0 new messages