2

So I'm working on a project and naturally I want to display information in a grid format and after an entire day of trying different products I came upon http://datatables.net/api which is really easy to implement, and makes much more sense to me than anything else I found. Problem is that I don't see an easy way to make it work well with my RESTful calls to the server. There is a great chance that I'm just overlooking something in the documentation, but I don't see exactly what I'm looking for. The information I need will almost exclusively be in the search parameters. The information will be in the format:

GET COLLECTION ?where=
GET COLLECTION ?include=
GET COLLECTION ?orderby=
GET COLLECTION ?sortby=
GET COLLECTION ?pageIndex=
GET COLLECTION ?limit=
GET COLLECTION ?fields=
GET COLLECTION ?q=

I already found the post Editable jQuery Grid Recommendations with REST API which explains how to do something similar with jqGrid, but I'd rather try and make Datatables work if I can since it makes more sense to me. Any help would be greatly appreciated.

Edit

What I'm really looking for, which so far I don't think has been answered is how to figure out what URL the client is typing to make the request with. For example if I had the query:

www.somewebsite.com/v1/people?limit=10&pageIndex=20&orderby=personID

Than what I'd expect is obviously for the orderby to be personID and the limit to be 10 and pageIndex to be 20.

The point of the question is that going both to and from the server, I need the url to be in that type of format any time the data table changes, because what we want is to only serve up the data for each page when the user asks for it. So if I got that request from the server I'd know the data table would be on the 3rd page, with 10 entries ordered by the personID column. How would you go about giving that information to the dataTables table and if they changed something, how would you get it back out again (I assume if you are able to answer the former than it'll answer the latter)?

Community
  • 1
  • 1
Randy P.
  • 194
  • 1
  • 3
  • 16
  • To try and make it a little more clear, I already see that you can find the pageIndex and limit from tying into the iDisplayLength and iDisplayStart, but I am more interested in figuring out the other information since it's generally the more important stuff. – Randy P. Apr 01 '14 at 15:37
  • 1
    use the "sAjaxSource" and then your "url" but this will need to be in a specific format the other thing that you can do if you don't want to change the format of your RESTservice is doing an ajax and building the aaData object by yourself – Eduardo Quintana Apr 01 '14 at 15:40
  • You're probably right, unfortunately I'm still fairly new to JS so I'm not entirely sure how I would go about doing that. – Randy P. Apr 01 '14 at 15:54
  • 1
    Once you do your Ajax call to your rest service build the aaData like in this example http://jsfiddle.net/j6N7A/1/ – Eduardo Quintana Apr 01 '14 at 16:18
  • That looks promising, I'll certainly look into it, thanks! – Randy P. Apr 01 '14 at 16:23
  • 1
    I've posted a better answer take a look to it, it might help you. – Eduardo Quintana Apr 01 '14 at 16:33

2 Answers2

2

After a lot of work with the creator of Datatables, I figured out that most of what I wanted was already built into his application. Specifically, I needed to use 

"bProcessing": true,
"bServerSide": true,
"sAjaxSource": URL,

which is the way to tell the table to let the server do all the queries.

I have an example of a more or less working example http://jsfiddle.net/RM3W2/5/. The code that goes to the heart of what i was asking is mostly in 'setup'.

Randy P.
  • 194
  • 1
  • 3
  • 16
1

Something like this will work

HTML

<div class="container">
    <table id="example">
    </table>
</div>

Code

var aaData = [];

    $.ajax({
      url:"your url",
      success:function(data){
        for(i in data){
             aaData.push([data[i].property,data[i].property2,....])
         }

         //Then create the DataTable object
      }

})

Example Fiddle using $.ajax and aaData property

Also you can use the sAjaxSource property but you will need to change a little bit the response of your REST service

Example Fiddle using sAjaxSource

Eduardo Quintana
  • 2,368
  • 1
  • 15
  • 20
  • That looks like what I was looking for, however I'm currently working on something else so until I can test it out i'm going to leave this unanswered. Thanks a bunch! – Randy P. Apr 01 '14 at 16:45
  • So after taking a second look at it, I'm still not entirely sure how to get the query strings from the URL so I'm going to edit the question to try and make it more clear what I'm looking for. – Randy P. Apr 01 '14 at 20:03