Как можно использовать сортировку и пейджинг на стороне сервера с помощью Azure Mobile Services

Question

Я использую jqGrid (inlineNav) с данными службы azure и заинтересован в том, как можно использовать сортировку и пейджинг на стороне сервера с помощью Azure Mobile Services.

Пожалуйста, поделитесь мыслями вокруг этого.

Answer 1

Windows Azure Mobile Services предоставляет API REST, который может использоваться для получения/вставки/редактирования/удаления данных из таблиц, которые вы настроили для соответствующего доступа (см. the documentation). Query records operation использует HTTP GET-глагол. Он поддерживает параметры URI Open Data Protocol (OData) $orderby, $skip, $top и $inlinecount, которые могут быть использованы для заполнения 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 
}); 

Некоторые комментарии к выше коде:

• Я удалил sortable: false, чтобы сортировать сетки, нажав на заголовке столбца
• с относительно prmNames варианта можно удалить отправку ненужных параметров сервера или переименовать его. Я использовал prmNames: { search: null, nd: null }, чтобы отказать в отправке _search и nd. Можно было бы использовать sort: "$orderby", rows: "$top", чтобы переименовать два других параметра, но поскольку нам нужно вычислить $skip и добавить sord после sidx, нам нужно использовать serializeGridData. Поэтому переименование других параметров в данном случае не требуется.
• с использованием serializeGridData мы строим список параметров, которые будут отправляться на сервер.
• ajaxGridOptions будет использоваться для установки дополнительных параметров запроса jQuery.ajax, которые делают jqGrid внутренне для доступа к серверу. Варианты, которые я использую в примере установить Content-Type: application/json и X-ZUMO-APPLICATION: myKey в заголовках HTTP
• ответ от сервера не содержит total (общее количество страниц), поэтому мы используем beforeProcessing обратного вызова, чтобы заполнить свойство на основе другой информации до ответ будет обработан.
• потому что мы используем $inlinecount=allpages в URL-адресе, ответ с сервера будет содержать информацию об общем количестве записей, а страница данных будет обернута в часть ответа results. Поэтому мы используем jsonReader: {repeatitems: false, root: "results", records: "count"}, чтобы прочитать ответ.
• мы должны удалить опцию loadonce: true, потому что сервер возвращает только запрошенную страницу данных, а не весь набор данных.