REST and jQuery DataTables with SharePoint 2010

Posted by & filed under Uncategorized.

SharePoint 2010 has a number of options for controlling how the contents of lists and libraries are displayed, both in custom views and OOTB web parts, however by leveraging its web services we can create slick interfaces using some very repeatable and adaptable patterns.

One of my favorite customizations is to use REST to pull in the contents of a list or library and display the results using the fantastic jQuery plugin [DataTables](http://datatables.net/). Here we’ll lay out the basics of retrieving the data, formatting it, and handing it off to DataTables.

SharePoint 2010 document library default view

The SharePoint 2010 document library default view leaves a little to be desired. Especially when it comes to pagination without an “item total” count.
DataTables in SharePoint 2010

Using the jQuery DataTables plugin we can offer one-click sorting, filtering, and pagination. Having complete control of the output opens the door for more advanced customizations (eg: visualizing locations with a mapping service).

Clean your code with $.ajax

We’ll start by fetching the data using $.getJSON which is a convenience method for $.ajax. The formula for requests to SPs REST api is <subsite>/_vti_bin/listdata.svc/<listname>?<options>. If we wanted to access the “Documents” library in the root of our site we could make the following request.

$.getJSON('/_vti_bin/listdata.svc/Documents', function(data) {
    //working here
}).done(function(data) {
    //is the same as working here
});

The REST api itself has options for filtering, sorting, and drilling into list items. Sometimes it can be nice to be able to hand off some of the data processing to your SharePoint server, especially if you’re worried about the scripting demands you be placing on your visitors’ browsers. Having said that, jQuery and DataTables are pretty hefty js libraries, and SP itself is a fairly bloated environment (both in terms of its many HTTP requests for dependencies and the gross DOM structure it creates) so I wouldn’t get too worried about your users a single sorting, or filtering pass through the data.

Model View Something