JavaScript DataSource Setup

Shield UI DataSource is a JavaScript component that simplifies working with data on the client-side. It is part of the core Shield UI scripts and is available on the page once the JavaScript references are added:

<!DOCTYPE html>
<title>Shield DataSource</title>
<meta charset="utf-8" />

<link rel="stylesheet" type="text/css" href="css/light/all.min.css" />
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/shieldui-all.min.js" type="text/javascript"></script>



The DataSource component is initialized through the shield.DataSource constructor, passing initialization options as a first argument object literal :

$(function () {
	var ds = new shield.DataSource({
		data: [/* data array*/],
		skip: 3,
		take: 5,
		sort: { path: "", desc: true },
		filter: { path: "", filter: "eq", value: 13 }
	}); () {
		var dataView = ds.view;
		//dataView contains the filtered, sorted and paged data

After a data source component is created, it needs to read the data and apply the specified data transformations. The read() method of the data source component returns a jQuery Promise object that can be waited for. When the success function is called, the view field of the component contains the result of the transformation as a JavaScript array. This can then be used for display on the page.