JavaScript DataSource Binding to HTML Table Element

Shield UI DataSource supports binding to elements in the HTML page. To bind to an HTML table, use the data initialization option to specify a CSS selector, HTML Table DOM element or a jQuery object containing a table element. Addtionally, set the schema.type setting to “table”:

var ds = new shield.DataSource({
	//can also be a table DOM element or jQuery object
	data: "#myTable",
	schema: {
		type: "table"
	}
});
ds.read().then(function () {
	var dataView = ds.view;
	//dataView contains data parsed from the HTML table
});

When the read() method is called, DataSource parses the data from the HTML table and builds a JSON array. Each element in the resulting array is a JSON object representing a single row from the table’s , where field names are extracted from the respective table header (matching the “ ” selector) and field values are extracted from each cell in the table row (matching the “ ” selector). Further filter, sort, skip and take operations are then applied to the result array, producing the final view.