Template with data-json - v1.1

Leverage HTML5 template element

HTML template element

Interacting with template

The following show an example on how you can use javascript and interact with the data-json plugin

TO BE included in JSON-Manager documentation

Leverage HTML5 template element

JSON file used in the following example

table-en.json 
[
	{ "name": "Pillar", "color": "Ticked Tabby", "sex": "Female (neutered)", "legs": 3, "css": "bg-success" },
	{ "name": "Hedral", "color": "Tuxedo", "sex": "Male (neutered)", "legs": 4, "css": "bg-danger" }
]
table-add-en.json 
[
	{ "name": "Addition", "color": "Black", "sex": "Unknow", "legs": 6, "css": "bg-awsome" }
]
table-empty.json 
[ ]

Add row on a data table

Name Color Sex Legs
Row 1Row 1Row 1Row 1
Row 2Row 2Row 3Row 2
Row 3Row 3Row 3Row 3
Row 4Row 4Row 4Row 4
Source code

HTML

<table class="table wb-tables" data-wb-json='{
		"url": "#[example1]",
		"queryall": "td",
		"mapping": [
			"/name",
			"/css",
			"/sex",
			"/legs"
		]
	}'>
  <thead>
  <tr>
    <th>Name</th> <th>Color</th> <th>Sex</th> <th>Legs</th>
</tr>
</thead>
  <tbody>
	<tr>
		<td>Row 1</td><td>Row 1</td><td>Row 1</td><td>Row 1</td>
	</tr>
	<tr>
		<td>Row 2</td><td>Row 2</td><td>Row 3</td><td>Row 2</td>
	</tr>
	<tr>
		<td>Row 3</td><td>Row 3</td><td>Row 3</td><td>Row 3</td>
	</tr>
	<tr>
		<td>Row 4</td><td>Row 4</td><td>Row 4</td><td>Row 4</td>
	</tr>
  </tbody>
</table>

<div id="tblJSONmanager" data-wb-jsonmanager='{
		"url": "table-en.json",
		"name": "example1",
		"patches": [ 
			{ "op": "add", "path": "/", "value": { "name": "Test1", "color": "Brown", "sex": "Male", "legs": 5, "css": "bg-darkness" } }
		]
	}'></div>

<div id="tblJSONmanager2" data-wb-jsonmanager='{
		"name": "example1"
	}'></div>

<button id="clickme">Add content from <code>table-add-en.json</code></button>

<button id="clickme2">Add Empty Array</button>

Javascript

<script>
wb.doc.on("click", "#clickme", function(){
	$("#tblJSONmanager").trigger( {
			type: "json-fetch.wb",
			fetch: {
				url: "table-add-en.json"
			}
		} );
});

wb.doc.on("click", "#clickme2", function(){
	$("#tblJSONmanager2").trigger( {
			type: "json-fetch.wb",
			fetch: {
				url: "table-empty.json"
			}
		} );
});
</script>
Date modified: