rest - microsoft - Cómo se podría usar la clasificación y paginación del lado del servidor con Azure Mobile Services

porta azure

Question

Estoy usando jqGrid (inlineNav) con datos del servicio azure e interesado en aprender cómo se puede usar la clasificación y paginación del lado del servidor con Azure Mobile Services.

Por favor comparte pensamientos sobre esto.

Answer 1

Los servicios móviles de Windows Azure proporcionan una API REST que se puede utilizar para obtener / insertar / editar / eliminar datos de las tablas que configuró para el acceso correspondiente (consulte la documentación ). La solicitud de operación de registros de consulta usa el verbo HTTP GET. Es compatible con las opciones de URI del protocolo de datos abiertos (OData) $orderby , $skip , $top y $inlinecount que podrían utilizarse para llenar jqGrid.

$("#list4").jqGrid({
    url : ''https://mohit.azure-mobile.net/tables/Schedules'',
    datatype: "json",
    height: "auto",
    colModel: [
        { name: "RouteId", width: 50 },
        { name: "Area", width: 130 }
    ],
    cmTemplate: {editable: true, editrules: { required: true}},
    rowList: [10, 20, 30],
    rowNum: 10,
    prmNames: { search: null, nd: null },
    ajaxGridOptions: {
        contentType: "application/json",
        headers: {
            "X-ZUMO-APPLICATION": "myKey"
        }
    },
    serializeGridData: function (postData) {
        if (postData.sidx) {
            return {
                $top: postData.rows,
                $skip: (parseInt(postData.page, 10) - 1) * postData.rows,
                $orderby: postData.sidx + " " + postData.sord,
                $inlinecount: "allpages"
            };
        } else {
            return {
                $top: postData.rows,
                $skip: (parseInt(postData.page, 10) - 1) * postData.rows,
                $inlinecount: "allpages"
            };
        }
    },
    beforeProcessing: function (data, textStatus, jqXHR) {
        var rows = parseInt($(this).jqGrid("getGridParam", "rowNum"), 10);
        data.total = Math.ceil(data.count/rows);
    },
    jsonReader: {
        repeatitems: false,
        root: "results",
        records: "count"
    },
    loadError: function (jqXHR, textStatus, errorThrown) {
        alert(''HTTP status code: '' + jqXHR.status + ''/n'' +
            ''textStatus: '' + textStatus + ''/n'' +
            ''errorThrown: '' + errorThrown);
        alert(''HTTP message body (jqXHR.responseText): '' + ''/n'' + jqXHR.responseText);
    },
    pager: "#pager1",
    sortname: "Area",
    viewrecords: true,
    caption: "Schedule Data",
    gridview: true
});

Algunos comentarios al código anterior:

• sortable: false para permitir la clasificación de la grilla haciendo clic en el encabezado de la columna
• con respecto a la opción prmNames uno puede eliminar el envío de parámetros innecesarios al servidor o cambiarle el nombre. prmNames: { search: null, nd: null } para denegar el envío de las opciones _search y nd . Uno podría usar sort: "$orderby", rows: "$top" para cambiar el nombre de otros dos parámetros, pero debido a que necesitamos calcular $skip y anexar sidx después de sidx , necesitamos usar serializeGridData . Por lo tanto, el cambio de nombre de otros parámetros no es necesario en el caso.
• usando serializeGridData , construimos la lista de opciones que se enviarán al servidor.
• ajaxGridOptions se usará para establecer parámetros adicionales de la solicitud de jQuery.ajax que hacen jqGrid internamente para acceder al servidor. Las opciones que utilizo en el ejemplo establecen Content-Type: application/json y X-ZUMO-APPLICATION: myKey en los encabezados HTTP
• la respuesta del servidor no contiene el total (el número total de páginas), por lo que usamos la devolución de llamada beforeProcessing para completar la propiedad en función de otra información antes de que se procese la respuesta.
• porque usamos $inlinecount=allpages options en la URL, la respuesta del servidor contendrá información sobre el número total de registros y la página de datos se incluirá en la parte de results de la respuesta. Entonces usamos jsonReader: {repeatitems: false, root: "results", records: "count"} para leer la respuesta.
• tenemos que eliminar la opción loadonce: true porque el servidor devuelve solo la página de datos solicitada en lugar de todo el conjunto de datos.