Home Wiki
JQuery DataTables OData

Preamble

DataTables OData Integration.

Live example

With OData Service as server-side processing logic

Filtering on numeric/datetime columns does not work, because there is no efficient way to search by these types using OData URL query. These columns should be marked as numeric or date with sType parameter in DataTable initialization in order to avoid exception that will be thrown by OData service.

Name Description Rating Price Release date

With OData Service as Ajax source

Fully functional table

Name Description Rating Price Release date

Initialization code

Initialization code is very simple. Just specify "fnServerOData" value for "fnServerData" parameter, and define OData service version in "iODataVersion" parameter.

$(document).ready( function () {
	$('#products1').dataTable({
		"sPaginationType": "full_numbers",
		"aLengthMenu": [[2, 5, 10, -1], ["Two", "Five", "Ten", "All"]],
		"bProcessing": true,
		"bServerSide": true,
		"sAjaxSource": "http://services.odata.org/V2/OData/OData.svc/Products",
		"aoColumns": [
			{ mData: "Name" },
			{ mData: "Description" },
			{ mData: "Rating", sType: 'numeric' },
			{ mData: "Price", sType: 'numeric' },
			{ sName: "ReleaseDate", sType: 'date',
			  mData: function(source, type, val) {
					if (source.ReleaseDate.indexOf("/Date") > -1) {
						var temp = source.ReleaseDate.substring(6, source.ReleaseDate.length - 2);
						return new Date(Number(temp));
					}
					return source.ReleaseDate;
				}
			  
			}
		],
		"fnServerData": fnServerOData,
		"iODataVersion": 2,
		"bUseODataViaJSONP": true
	});
}
			

Other examples