none
JQGrid para consulta ya paginada RRS feed

  • Pregunta

  • Hola!

    Es la primera vez que consulto en el foro.

    Mi pregunta es la siguiente:

    Estoy usando el jqGrid básico para mostrar los resultados de una consulta que ya me la devuelven paginada del SQL.

    Tengo una clase que tiene una función que me convierte un datatable a jsonstring , y funciona correctamente.

    El script que utilizo para el jqGrid es el siguiente:

    <script type="text/javascript">
        $('#btnConsultar').click(function (e) {
            e.preventDefault();
            var encabezado = ['Legajo', 'Cliente', 'Monto Pagado'];
            var localidad = $('#DropDownList1 option:selected').val();
            var barrio = $("DropDownList2 option:selected").val();
            var mes = $('#Mes option:selected').val();
            var anio = $('#DropDownListAnio option:selected').val();        
            $("#grid").jqGrid({
                datatype: 'jsonstring',
                jsonReader: {
                    root: "rows",
                    page: "page",
                    total: "total",
                    records: "records",
                    repeatitems: false,                
                    id: "Id",
                    cell: "cell"
                },
                gridview: true,
                //colNames: ['Legajo', 'Cliente', 'Monto Pagado'],
                colNames: encabezado,
                colModel: [
                      { name: 'ClienteLegajo', index: 'ClienteLegajo', width: 120, align: 'center' },
                      { name: 'ClienteDesc', index: 'ClienteDesc', width: 300, align: 'left' },
                      { name: 'MontoPagado', index: 'MontoPagado', width: 300, align: 'center' }
                    ],
                viewrecords: true,
                caption: 'Datos',
                loadonce: true,            
                loadui: "enabled",
                beforeSelectRow: function (rowid, e) { return false; },
                hoverrows: true,          
                height: "auto",
                pager: '#pager',
                rowNum: 20,
                rowList: [5, 10, 15, 20, 25]            
            });
    
            $("#grid").clearGridData();
            $.ajax({
                type: "POST",
                url: "cuotasPagadasPorBarrio.aspx/datosDTJson",
                data: '{pBarrioId: ' + barrio + ', panio: ' + anio + ', pmes: ' + mes + ', pindice: ' + $('#grid').getGridParam("page") + '}',            
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async: false, 
                success: function (msg) {
                    var data = msg.d;
                    $("#grid").jqGrid('setGridParam',
                    { datatype: 'jsonstring', datastr: data });
                    $("#grid").trigger('reloadGrid');
                }
                            });
        });
    </script>

    En mi WebMethod tengo lo que sigue:

    <WebMethod()>
        Public Shared Function datosDTJson(pBarrioId As Integer, panio As Short, pmes As Byte, pindice As Integer) As String        
            Dim taCuotasPagadasPorBarrio As New CuotasListadoPorBarrioTableAdapter
            Dim dtCuotasPagadasPorBarrio As New Data.DataTable
            Dim pageSize As Integer = 20        
            dtCuotasPagadasPorBarrio = taCuotasPagadasPorBarrio.Listado(pBarrioId, panio, pmes, pageSize, pindice)
            'Esto es solo para sacar el total de registros
    	Dim totalRecords As Integer = taCuotasPagadasPorBarrio.Listado(1, 2012, 1, 20, 1).Item(0).PageTotal
            Dim parametros As String
            'Los parametros es para que el jsonstring me envíe solo de las columnas que necesito mostrar
    	parametros = "ClienteLegajo" & " ClienteDesc" & " MontoPagado"
    	'Accedo a la función que me retorna el jsonstring
            Dim jsonString As String = JsonHelper.GetJqgridJson(dtCuotasPagadasPorBarrio, parametros, totalRecords)
            Return jsonString
        End Function

    No sé cómo hacer para que retorne los registros de acuerdo a la página que se selecciona, y que en ese momento se vuelva a cargar con los nuevos datos al datatable para que nuevamente me convierta al jsonstring, se entiende??, intento de todo pero solamente me devuelve la primera :(

    Espero que me ayuden!

    Saludos!


    • Editado anaweb miércoles, 17 de octubre de 2012 14:01
    miércoles, 17 de octubre de 2012 14:00

Respuestas

  • Hola anaweb

    (NOTA: Creo que te conozco? por el la consulta de barrios, legajos, clientes... sera?)

    Tienes dos opciones para cargar una grilla jqGrid:

    • OPCION 1: Que la propia grilla (jqGrid) se autocarge y darle los paremetros de donde obtener los datos
    • OPCION 2: Consultar los datos externamente y luego asignar a la grilla los mismos

    Veo que estas con la opcion 2. En esta deberías 
    suscribirte al evento "adecuado" para cuando se realiza la peticion de otra pagina, capturar que pagina es y volver a consultar (todo lo lo que realizan en la petición post cambiando el parámetro pindice)
    Aqui unos enlaces a eventos del pager (paginador)

    Mi recomendacion:
    Seria bueno que pases a la OPCION 1. Porque es mas facil de mantener y no tenemos que estar "codificando manualmente" algo que ya nos hace la propia grilla (autocompletarse). Solo que hay que pasarle los parametros correctos para que conozca donde ir a buscar los datos y por supuesto modificar algo en el webservice para esperar los parametros que la grilla envia

    Dale una mirada al ejemplo: Loading Data > Json Data. Alli podras ver que un parametro de la grilla es la URL de donde obtener los datos
    En tu caso la url seria algo asi

    $('#grid').jqGrid({
        url: 'cuotasPagadasPorBarrio.aspx/datosDTJson',
        postData:  '{pBarrioId: ' + barrio + ', panio: ' + anio + ', pmes: ' + mes +'}',
        datatype: 'json',
        type: 'POST',
    	...

    Pero veras que no le pasamos el indice de la pagina porque el grid ya lo hace por vos, el parámetro que siempre nos envia son

    • rows: Cantidad de registros por pagina (por si el usuario solicito una pagina con mas registros)
    • page: Indice de la pagina que requiere (en tu caso se llama pindice, pero deberias esperar recibir este nombre page)
    • sidx: nombre de la columna para ordenar
    • sord: ordenamiento (asc o desc)


    Enlaces que te pueden ayudar

    Espero que te sirva de ayuda o guia


    Jose. A Fernandez | blog: http://geeks.ms/blogs/fernandezja

    • Propuesto como respuesta Eder CostaModerator martes, 23 de octubre de 2012 15:37
    • Marcado como respuesta anaweb miércoles, 24 de octubre de 2012 12:35
    jueves, 18 de octubre de 2012 15:40

Todas las respuestas

  • Hola anaweb

    (NOTA: Creo que te conozco? por el la consulta de barrios, legajos, clientes... sera?)

    Tienes dos opciones para cargar una grilla jqGrid:

    • OPCION 1: Que la propia grilla (jqGrid) se autocarge y darle los paremetros de donde obtener los datos
    • OPCION 2: Consultar los datos externamente y luego asignar a la grilla los mismos

    Veo que estas con la opcion 2. En esta deberías 
    suscribirte al evento "adecuado" para cuando se realiza la peticion de otra pagina, capturar que pagina es y volver a consultar (todo lo lo que realizan en la petición post cambiando el parámetro pindice)
    Aqui unos enlaces a eventos del pager (paginador)

    Mi recomendacion:
    Seria bueno que pases a la OPCION 1. Porque es mas facil de mantener y no tenemos que estar "codificando manualmente" algo que ya nos hace la propia grilla (autocompletarse). Solo que hay que pasarle los parametros correctos para que conozca donde ir a buscar los datos y por supuesto modificar algo en el webservice para esperar los parametros que la grilla envia

    Dale una mirada al ejemplo: Loading Data > Json Data. Alli podras ver que un parametro de la grilla es la URL de donde obtener los datos
    En tu caso la url seria algo asi

    $('#grid').jqGrid({
        url: 'cuotasPagadasPorBarrio.aspx/datosDTJson',
        postData:  '{pBarrioId: ' + barrio + ', panio: ' + anio + ', pmes: ' + mes +'}',
        datatype: 'json',
        type: 'POST',
    	...

    Pero veras que no le pasamos el indice de la pagina porque el grid ya lo hace por vos, el parámetro que siempre nos envia son

    • rows: Cantidad de registros por pagina (por si el usuario solicito una pagina con mas registros)
    • page: Indice de la pagina que requiere (en tu caso se llama pindice, pero deberias esperar recibir este nombre page)
    • sidx: nombre de la columna para ordenar
    • sord: ordenamiento (asc o desc)


    Enlaces que te pueden ayudar

    Espero que te sirva de ayuda o guia


    Jose. A Fernandez | blog: http://geeks.ms/blogs/fernandezja

    • Propuesto como respuesta Eder CostaModerator martes, 23 de octubre de 2012 15:37
    • Marcado como respuesta anaweb miércoles, 24 de octubre de 2012 12:35
    jueves, 18 de octubre de 2012 15:40
  • (Nota: Sí me conocés...)

    Estuve implementandolo de esta forma que me recomendás, pero no sé cómo pasarle la página actual a mi WebMethod.

    Teniendo en cuenta lo que me contás de que el jqGrid ya tiene el "page", traté con esto:

    Dim page As Integer = CType(HttpContext.Current.Request("page"), Integer)

    Y lo mismo no me trae la página actual... 


    viernes, 19 de octubre de 2012 13:57
  • Dejo la solución que obtuve, por si le sirve a alguien...

    El script quedó así:

    <script type="text/javascript">    
        $('#btnConsultar').click(function (e) {
            e.preventDefault();        
            var encabezado = ['Legajo', 'Cliente', 'Monto Pagado'];
            var localidad = $('#DropDownList1 option:selected').val();
            var barrio = $("DropDownList2 option:selected").val();
            var mes = $('#DropDownListMes option:selected').val();
            var anio = $('#DropDownListAnio option:selected').val();        
            $("#grid").jqGrid({
                //parametros del jqGrid: poner en null los que no se utilizan
                prmNames: { page: 'page', rows: 'pageSize', sort: null, order: null, search: null, nd: null, id: null,
                    oper: null, editoper: null, addoper: null, deloper: null, subgridid: null, npage: null, totalrows: null
                },
                //nombres de parametros del WebMethod para pasar al servidor
                postData: { pBarrioId: barrio, panio: anio, pmes: mes },
                datatype: function (postData) {
                    $(".loading").show();
                    mtype: "GET",
                    $.ajax({
                        url: "cuotasPagadasPorBarrio.aspx/datosDTJson",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        data: JSON.stringify(postData),
                        dataType: "json",
                        success: function (data, st) {
                            if (st == "success") {
                                var grid = jQuery("#grid")[0];
                                grid.addJSONData(JSON.parse(data.d));
                                $(".loading").hide();
                            }
                        },
                        error: function () {
                            alert("Error en la llamada al AJAX");
                        }
                    });
                },
                                      
                jsonReader: {
                    root: "rows",
                    page: "page",
                    total: "total",
                    records: "records",
                    repeatitems: false,
                    id: "Id",
                    cell: "cell"
                },
    
                gridview: true,            
                colNames: encabezado,
                colModel: [
                        { name: 'ClienteLegajo', index: 'ClienteLegajo', width: 120, align: 'center' },
                        { name: 'ClienteDesc', index: 'ClienteDesc', width: 300, align: 'left' },
                        { name: 'MontoPagado', index: 'MontoPagado', width: 300, align: 'center' }
                    ],
                viewrecords: true,
                caption: 'Datos',           
                hoverrows: true,
                height: "auto",
                pager: '#pager',                    
                rowList: [10, 15, 20, 25]
            });              
    });
    </script>


    Y el WebMethod de la siguiente manera:

    <WebMethod(), _
         ScriptMethod(ResponseFormat:=ResponseFormat.Json)> _
        Public Shared Function datosDTJson(page As Integer, pageSize As Integer, pBarrioId As Integer, panio As Short, pmes As Byte) As String
            Dim taCuotasPagadasPorBarrio As New CuotasListadoPorBarrioTableAdapter
            Dim dtCuotasPagadasPorBarrio As New Data.DataTable
            dtCuotasPagadasPorBarrio = taCuotasPagadasPorBarrio.Listado(pBarrioId, panio, pmes, pageSize, page)
            Dim totalRecords As Integer = taCuotasPagadasPorBarrio.Listado(pBarrioId, panio, pmes, pageSize, page).Item(0).PageTotal
            Dim cantidadPaginasIndices As Integer
            If dtCuotasPagadasPorBarrio.Rows.Count > 0 Then
                Dim totalPaginas As Integer = dtCuotasPagadasPorBarrio.Rows.Item(0).Item("PageTotal")
                If (totalPaginas > 0) And (totalPaginas < pageSize) Then
                    cantidadPaginasIndices = 1
                Else
                    cantidadPaginasIndices = (totalPaginas / pageSize)
                    If Not (cantidadPaginasIndices Mod 2 = 0) Then
                        cantidadPaginasIndices = (totalPaginas / pageSize) + 1
                    End If
                End If
            End If
    
            Dim parametros As String
            parametros = "ClienteLegajo" & " ClienteDesc" & " MontoPagado"
    
            Dim jsonString As String = JsonHelper.GetJqgridJson(dtCuotasPagadasPorBarrio, parametros, cantidadPaginasIndices, totalRecords, page)
            Return jsonString
        End Function

    Gracias José!


    • Editado anaweb miércoles, 24 de octubre de 2012 12:36
    miércoles, 24 de octubre de 2012 12:35