Back with another article today. This time we will try to see how to page a server side paged OData entity set using just JQuery. Yes just JQuery no DataJS this time. So read on and let me know what you fell about this:

 

Objective/Goal:

As a Consumer of OData Service feeds, how to page a server paged OData entity sets on the client side, by just using JQuery. This time no use of dataJS – the JavaScript library for OData service interaction. But just the plain JQuery and nothing else.

 

Background:

In my previous article Client Side Paging of Server Paged OData Entity Set using DataJS, we looked at the following concepts:

– What is Page Size limit on a entity sets?

– How Producers can apply Page Size limit on entity sets?

– How Consumers can know about the server side paging?

– How to page using a library like DataJS?

If you have not read my previous article, do have a read of that first. This article is based on the same example as that of my previous article.

 

Final outcome:

Here is a snap shot of the final outcome we will be trying to achieve:

image

No change in the demo application. It’s the same as that of the previous article. So lets see how this is achieved using JQuery.

 

Changes to scripts from previous example:

Instead of going through the whole code again, I will be pointing the changes done for achieving the solution using JQuery.

List Products Button Click Event Handler:

The event handler handling the List Products button click event will need the following changes:

   1:  function OnGetDataClick() {
   2:                  $(tabsDiv).tabs("destroy");
   3:                  $(tabsDiv).tabs().hide();
   4:                  $(getDataButton).button("disable");
   5:                  $(loadingDiv).show();
   6:                  tab_counter = 1;
   7:                  var url = serviceUri + "?$callback=successHandler" 
   8:          + "&$format=json"; 
   9:                  MakeRequest(url);
  10:              };

Notice Line 7 where we are constructing the URL. We are passing the callback parameter since this is a JSONP request and also we are specifying the format we want the request to be returned, which, in this case is JSON. Of course for JSONP to work the OData producer should have the JSONP support enabled on the server side. In our example service it does.

 

MakeRequest Function:

The MakeRequest function gets a change too. In the previous example of using DataJS, MakeRequest function would make use of DataJS read API to read the URI. Now instead of DataJS this function will fire a plain JQuery ajax request. Here are the changes:

   1:  function MakeRequest(url) {
   3:                  // Make JSONP call 
   4:                  $.ajax({
   5:                      dataType: "jsonp",
   6:                      url: url,
   7:                      jsonpCallback: "successHandler",
   8:                      success: successHandler
   9:                  });
  10:              };

Nothing complicated here. We are making use of the .ajax construct and fire off a AJAX request.

 

Success Handler:

In the success handler, in earlier example we used to check for the __next link in the payload and grab the value of the __next attribute and fire off one more request, Well all that stays as is but only change is the way we grab the value. Here is the modified code:

   1:  function successHandler(data) {
   2:                  var tab_title = "Catalog Page " + tab_counter;
   3:                  $(tabsDiv).tabs("add", "#tabs-" + tab_counter, tab_title);
   4:                  $(resultsTemplate).tmpl(data).appendTo("#tabs-" + tab_counter);
   5:                  $(tabsDiv).show();
   6:                  if (data.d.__next) {
   7:                      tab_counter++;
   8:                      var url = data.d.__next + "&$callback=successHandler"
   9:           + "&$format=json";
  10:                      MakeRequest(url);
  11:                  }
  12:                  else {
  13:                      $(getDataButton).button("enable");
  14:                      $(loadingDiv).hide();
  15:   
  16:                  }
  17:              }

Notice Line 6. We are looking for __next attribute from “data.d”. That is because whenever you use JQuery AJAX requests the data gets wrapped in an identifier named “d”. Where as in the DataJS case, the library is made intelligent in such a way that they transform the “d” in to a “results” variable and we can work directly off of that. So DataJS does all the heavy lifting for us and we are left out with a simple API to play around with and that’s one more reason why DataJS is my favorite for reading and writing to OData services.

 

Jquery Template:

The template used to list the products also gets a change. The change is the use of the identifier “d” in the loop as the JSON result is wrapped in “d” identifier. Here is the code:

   1:  <script type="x-jquery-tmpl" id="resultsTemplate">
   2:          <ul>
   3:              {{each d.results}}
   4:                  <li style="margin:.5em">
   5:                      {{if $value.Discontinued }}
   6:                          <span class='discontinued'><b>${$value.ProductName}<i> ($${$value.UnitPrice})</i></b></span>
   7:                      {{else}}
   8:                          <span class='productName'><b>${$value.ProductName}<i> ($${$value.UnitPrice})</i></b></span>
   9:                      {{/if}}
  10:                  </li>
  11:              {{/each}}
  12:          </ul>
  13:      </script>

Notice Line 3. We use “d.results” in this case. That’s all the change that is there.

And we are done with Client Side Paging Server Paged OData Entity Set with JQuery. As you can see all it takes is a minor changes to make this working with JQuery.

Conclusion:

With OData, it is very easy to play around with any of the libraries available out there, which support AJAX request/response handling. As seen in this example OData consumption with JQuery is just a lines of code and we are rolling. Still my recommendation will be to use DataJS API when compared to JQuery – ONLY – for reads and writes to a OData service.


Here is a live version of this example: http://odataplayground.99on.com/clientsidepaging/JqueryExample.htm. Just view source and grab the code if you want to experiment.


Till next time, Happy Coding. Code with passion, Decode with patience.

  • zakizakaria69

    Thanks for the post. Very good explanation and really helpful.

  • Mkdump

    Nice post. Do you have a examples of consuming OData Services from .net console code and I am specifically looking for paging examples
    Thanks