1

Tengo el siguente dataTable que muestro desde la basde de datos. En la Vista:

$(document).ready(function () {
$('#example').DataTable({
            "lengthMenu": [[2, 5, 10, 25], [2, 5, 10, 25]],
            "language": {
                "sProcessing": "Procesando...",
                "sLengthMenu": "Mostrar _MENU_ registros",
                "sZeroRecords": "No se encontraron resultados",
                "sEmptyTable": "Ningún dato disponible en esta tabla",
                "sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
                "sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
                "sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
                "sInfoPostFix": "",
                "sSearch": "Buscar:",
                "sUrl": "",
                "sInfoThousands": ",",
                "sLoadingRecords": "Cargando...",
                "oPaginate": {
                    "sFirst": "Primero",
                    "sLast": "Último",
                    "sNext": "Siguiente",
                    "sPrevious": "Anterior"
                },
                "oAria": {
                    "sSortAscending": ": Activar para ordenar la columna de manera ascendente",
                    "sSortDescending": ": Activar para ordenar la columna de manera descendente"
                }
            }
        });   });
</script>
 <table id="example" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Titulo</th>
                    <th>Descripcion</th>
                    <th>Formato</th>
                    <th>Fecha</th>
                </tr>
            </thead>
            <tbody>
            <% For Each item In Model.listadoNoticias%>
            <tr id="fila_not_<%:item.IdNoticia%>">
                <td>
                    <%: item.IdNoticia%>
                </td>
                <td>
                    <%: item.TituloNoticia%>
                </td>
                <td>
                    <%: item.DescripcionNoticia%>
                </td>
                <td>
                    <%: item.FormatoFotoPortadaNoticia%>
                </td>
                <td>
                    <%: item.FechaPublicacionNoticia%>
                </td>


            </tr>
            <%Next%>
           </tbody>
        </table>

En el homeController:

Public Function listado_noticia() As ActionResult
    Using db As New BD_LOSCOPIHUESEntities1
    Dim CurrentPage=0
    Dim PageSize=15

        Dim l As New ListadoNoticiasViewModel
        Dim listadoNoticia_q = (From noti In db.NOTICIA Select noti Order By noti.FechaPublicacionNoticia Descending)
        l.listadoNoticias = listadoNoticia_q
        ' l.listadoNoticias = listadoNoticia_q.Skip(CurrentPage).Take(PageSize).ToList()            Return View(l)
    End Using
End Function

Lo que en el fondo hace el datatable de la vista, es listar TODO el registro de las noticias, en donde automaticamente crea la cantidad de filas y paginación. Pero si se listara demasiados registros, sería muy ineficiente. Lo que deseo, es mandar una cierta cantidad de registros al datatable de la vista, por ejemplo si en total existen 15 registros, enviar 5 registros a la vista, mostrando en la parte inferior del datatable 1,2,3 para paginar y al seleccionar la pagina, vaya al controller con el parámetro de la pagina (.listadoNoticias = listadoNoticia_q.Skip(CurrentPage).Take(PageSize).ToList()) para mostrar los otros registros y así no recargar la pagina con tantos datos. ¿Alguna idea de cómo podría manipular el datatable para que sea eficiente?

DataTable donde listo los datos Nota: Estoy trabajando en MVC vb.net con bootstrap

2
  • Danilo, eso no es Razor sino WebForms View Engine en MVC el 15 abr. 2016 a las 14:11
  • Ok, ¿pero alguna sugerencia? ¿existe algun evento de jquery cuando se selecciona una pagina y en seleccionar registro?
    – Danilo
    el 15 abr. 2016 a las 17:25

2 respuestas 2

1

Creo que esta implementacion podria ayudar

jQuery DataTables and ASP.NET MVC Integration - Part I

Como observaras al habilitar el paginado deberias recibir en el action los valores que definen por ejemplo la cantidad de items que deben desplegarse.

En el ejemplo hace uso de una clase jQueryDataTableParamModel en donde la propiedad iDisplayLength determina este numero que podrias usar en el linq con el Take() y Skip()

La respuesta del action debera ser un json con solo los registros que esten en esta pagina, pero veras que deben respectar cierta estructura, en donde no solo envias los datos sino tambien la cantidad de items total y la cantidad por pagina.

{   "sEcho":"1",
    "iTotalRecords":97,
    "iTotalDisplayRecords":3,
    "aaData":[    ["1","Microsoft","Redmond","USA"],
                  ["2","Google","Mountain View","USA"],
                  ["3","Gowi","Pancevo","Serbia"]
        ]
}
1
  • Gracias @Leandro Tuttini, tengo una consulta, ese codigo que pusiste, es para añadirlo en el Jquery de la vista, dentro de $('#myDataTable').dataTable({ ........ Y la otra pregunta, el jQueryDataTableParamModel no me lo reconoce el Visual Studio, me dice error, ¿habrá que importar alguna librería? ya que estoy en visual.net y no en C#
    – Danilo
    el 16 abr. 2016 a las 17:01
0

Encontré una solución, o el camino hacia la solución. Con unos eventos de jquery, puedo manipular y enviar parametros al controller.

$('#example')
    .on( 'order.dt',  function () { console.log('Order' ); } )
    .on( 'search.dt', function () {console.log('Search' ); } )
    .on( 'page.dt',   function () { console.log('Page' ); } )
    .dataTable();
} );
3
  • excelente! entonces, te funciona como esperabas?
    – fredyfx
    el 15 abr. 2016 a las 18:08
  • A travez de la paginacion generado, puedo mandarle la pagina al controller para hacer uso del linq con Take() y Skip() con vista parcial. $('#example').on('page.dt', function (e) { e.preventDefault(); var info = table.page.info(); var pagina_actual = info.page + 1; var ultima_pagina = info.pages; var url_action = '<%= Url.Action("partialListado", "Noticia", New With {.pag = "count_pag_vb"})%>'; url_action = url_action.replace("count_pag_vb", incre); despues llamar al datatable });
    – Danilo
    el 17 abr. 2016 a las 4:20
  • Pero no se en que parte del Jquery del datatable recibe el numero total de registro, para así tambien manipular cuantas paginaciones quiero poner
    – Danilo
    el 17 abr. 2016 a las 4:28

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.