如何通过 Azure 移动服务使用服务器端排序和分页 [英] How one could use server side sorting and paging with Azure Mobile Services

问题描述

我正在将 jqGrid (inlineNav) 与来自 azure 服务的数据结合使用，并且有兴趣了解如何通过 Azure 移动服务使用服务器端排序和分页.

I am using jqGrid (inlineNav) with data from azure service and interested in learning how one could use server side sorting and paging with Azure Mobile Services.

请分享您对此的看法.

推荐答案

Windows Azure Mobile Services 提供 REST API，可用于获取/插入/编辑/删除您为相应访问配置的表的数据(请参阅文档).查询记录操作 请求使用 HTTP GET 动词.它支持开放数据协议 (OData) URI 选项 $orderby、$skip、$top 和 $inlinecount可以用来填充jqGrid.

Windows Azure Mobile Services provides REST API which can be used to get/insert/edit/delete data of the the tables which you configured for the corresponding access (see the documentation). Query records operation request uses HTTP GET verb. It supports Open Data Protocol (OData) URI options $orderby, $skip, $top and $inlinecount which could be used to fill 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 + '
' +
            'textStatus: ' + textStatus + '
' +
            'errorThrown: ' + errorThrown);
        alert('HTTP message body (jqXHR.responseText): ' + '
' + jqXHR.responseText);
    },
    pager: "#pager1",
    sortname: "Area",
    viewrecords: true,
    caption: "Schedule Data",
    gridview: true
});

对上述代码的一些注释:

Some comments to the above code:

• 我删除了 sortable: false 以允许通过单击列标题对网格进行排序
• 关于 prmNames 选项，可以删除向服务器发送不需要的参数或重命名它.我使用 prmNames: { search: null, nd: null } 拒绝发送 _search 和 nd 选项.可以使用 sort: "$orderby", rows: "$top" 重命名另外两个参数，但因为我们需要计算 $skip 并附加 sord 在 sidx 之后我们需要使用 serializeGridData.所以在这种情况下不需要重命名其他参数.
• 使用 serializeGridData 我们构建了将发送到服务器的选项列表.
• ajaxGridOptions 将用于设置 jQuery.ajax 请求的附加参数，这些参数在内部执行 jqGrid 以访问服务器.我在示例中使用的选项在 HTTP 标头中设置了 Content-Type: application/json 和 X-ZUMO-APPLICATION: myKey
• 来自服务器的响应不包含total(总页数)，所以我们使用beforeProcessing回调根据其他信息填充属性before 响应将被处理.
• 因为我们在 URL 中使用了 $inlinecount=allpages 选项，来自服务器的响应将包含有关记录总数的信息，并且数据页面将被包装在 results 部分答案.所以我们使用 jsonReader: {repeatitems: false, root: "results", records: "count"} 来读取响应.
• 我们必须删除 loadonce: true 选项，因为服务器只返回请求的数据页，而不是整个数据集.

• I removed sortable: false to allow sorting of grid by click on the column header
• with respect of prmNames option one can remove sending of unneeded parameters to the server or rename it. I used prmNames: { search: null, nd: null } to deny sending of _search and nd options. One could use sort: "$orderby", rows: "$top" to rename two other parameters, but because we need to calculate $skip and append sord after sidx we need to use serializeGridData. So the renaming of other parameters are not needed in the case.
• using serializeGridData we construct the list of options which will be send to the server.
• ajaxGridOptions will be used to set additional parameters of jQuery.ajax request which do jqGrid internally for access to the server. The options which I use in the example set Content-Type: application/json and X-ZUMO-APPLICATION: myKey in the HTTP headers
• the response from the server don't contains total (the total number of pages), so we use beforeProcessing callback to fill the property based on other information before the response will be processed.
• because we use $inlinecount=allpages options in the URL the response from the server will contains information about the total number of records and the page of data will be wrapped in the results part of the answer. So we use jsonReader: {repeatitems: false, root: "results", records: "count"} to read the response.
• we have to remove loadonce: true option because the server returns only the requested page of data instead of the whole set of data.

这篇关于如何通过 Azure 移动服务使用服务器端排序和分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！