JavaScript DataSource HTML Table binding

In this blog entry, we look at the ShieldUI DataSource, and more specifically binding it to an HTML Table.  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”:

1 2 3 4 5 6 7 8 9 10 11

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.