none
Paginar una tabla RRS feed

  • Pregunta

  • Hola

    Trabajo con ASP.NET MVC 5, tengo creado en una View una tabla la cual la cargo desde el controlador con un ViewBag  he intentado paginarla con JQuery pero no lo he conseguido.

    <head>
        <title></title>
        <script src="~/scripts/jquery-3.1.1.min.js"></script>
        <script src="http://c.fzilla.com/1291523190-jpaginate.js"></script>
        <style>
            .pagination{
                list-style: none;
                margin: 0px;
                padding: 0px;
            }
            .pagination li{
                float: left;
                margin: 3px;
            }
            .pagination li a{
                display: block;
                padding: 3px 5px;
                color: #fff;
                background-color: #44b0dd;
                text-decoration: none;
            }
            .pagination li a.active{
                border: 1px solid #000;
                color: #000;
                background-color: #fff;
            }
            .pagination li a.inactive{
                background-color: #eee;
                color: #777;
                border: 1px solid #ccc;
            } 
        </style>
        <script>
            $(document).ready(function () {
                $("#content").jPaginate();
            });
        </script>
    </head>
    <body>
        <table id="content" class="table">
            <tr>
                <td>ProveedorId</td>
                <td>Razón Social</td>
                <td>Número documento</td>
                <td>Dirección</td>
                <td>Teléfono</td>
                <td></td>
                <td></td>
            </tr>
            @foreach (var row in ViewBag.ListarProveedor)
            {
                <tr>
                    <td>@row.ProveedorId</td>
                    <td>@row.RazonSocial</td>
                    <td>@row.NumeroDocumento</td>
                    <td>@row.Direccion</td>
                    <td>@row.Telefono</td>
                </tr> 
            }
        </table>
    </body>
    </html>

    ¿Que estoy haciendo mal?


    Pedro Ávila
    "El hombre sabio querrá estar siempre con quien sea mejor que él."
    Lima - Perú

    lunes, 13 de febrero de 2017 22:55

Respuestas

  • Hola Pedro Ávila,

    Leyendo un poco más en la documentación, el contenido del elemento '#content' será paginado, entonces la tabla en sí es solo un contenido por lo que no mostraría la paginación real, tendrías que asignarlo al tbody.

    <table class="table">
        <tr>
            <td>ProveedorId</td>
            <td>Razón Social</td>
            <td>Número documento</td>
            <td>Dirección</td>
            <td>Teléfono</td>
            <td></td>
            <td></td>
        </tr>
        <tbody id="content">
            @foreach (var row in ViewBag.ListarProveedor)
            {
                <tr>
                    <td>@row.ProveedorId</td>
                    <td>@row.RazonSocial</td>
                    <td>@row.NumeroDocumento</td>
                    <td>@row.Direccion</td>
                    <td>@row.Telefono</td>
                </tr>
            }
        </tbody>
    </table>

    * Lo he probado y recién me ha funcionado :)

    Saludos.


    JC NaupaCrispín
    Lima - Perú

    La magia no existe, la programación SI

    • Marcado como respuesta Pedro Ávila martes, 14 de febrero de 2017 3:28
    lunes, 13 de febrero de 2017 23:49
  • Hola Pedro:

     No se si has evaluado usar componentes ya creados y libres como podría ser:

    https://datatables.net/manual/styling/bootstrap

     Este componente tiene muchas funcionalidades muy bonitas y útiles en su versión gratis, podrías evaluarla en una de esas te sirve.

     Espero te sea de utilidad.


    Saludos desde Monterrey, Nuevo León, México!!!

    • Marcado como respuesta Pedro Ávila martes, 14 de febrero de 2017 16:15
    martes, 14 de febrero de 2017 4:47

Todas las respuestas

  • Hola Pedro Ávila,

    Leyendo un poco más en la documentación, el contenido del elemento '#content' será paginado, entonces la tabla en sí es solo un contenido por lo que no mostraría la paginación real, tendrías que asignarlo al tbody.

    <table class="table">
        <tr>
            <td>ProveedorId</td>
            <td>Razón Social</td>
            <td>Número documento</td>
            <td>Dirección</td>
            <td>Teléfono</td>
            <td></td>
            <td></td>
        </tr>
        <tbody id="content">
            @foreach (var row in ViewBag.ListarProveedor)
            {
                <tr>
                    <td>@row.ProveedorId</td>
                    <td>@row.RazonSocial</td>
                    <td>@row.NumeroDocumento</td>
                    <td>@row.Direccion</td>
                    <td>@row.Telefono</td>
                </tr>
            }
        </tbody>
    </table>

    * Lo he probado y recién me ha funcionado :)

    Saludos.


    JC NaupaCrispín
    Lima - Perú

    La magia no existe, la programación SI

    • Marcado como respuesta Pedro Ávila martes, 14 de febrero de 2017 3:28
    lunes, 13 de febrero de 2017 23:49
  • @Joel 

    Que otra manera hay para hacerlo?


    Pedro Ávila
    "El hombre sabio querrá estar siempre con quien sea mejor que él."
    Lima - Perú

    martes, 14 de febrero de 2017 3:29
  • hola

    podrias evaluar

    PagedList

    en el link hay un ejemplo, la idea es usar el

    @Html.PagedListPager()

    o quizas el

    MvcPaging

    en este caso analiza el link de demo para ver como implementa el paginado


    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina


    martes, 14 de febrero de 2017 3:39
  • Hola Pedro:

     No se si has evaluado usar componentes ya creados y libres como podría ser:

    https://datatables.net/manual/styling/bootstrap

     Este componente tiene muchas funcionalidades muy bonitas y útiles en su versión gratis, podrías evaluarla en una de esas te sirve.

     Espero te sea de utilidad.


    Saludos desde Monterrey, Nuevo León, México!!!

    • Marcado como respuesta Pedro Ávila martes, 14 de febrero de 2017 16:15
    martes, 14 de febrero de 2017 4:47
  • @Che Luis

    Excelente es lo que estaba buscando.


    Pedro Ávila
    "El hombre sabio querrá estar siempre con quien sea mejor que él."
    Lima - Perú


    • Editado Pedro Ávila martes, 14 de febrero de 2017 16:14 ...
    martes, 14 de febrero de 2017 16:14