I have a page where I send an ajax request to a server. There is a table on the page which displays some data. The server returns a json object which is a list of objects and it doesn't contain any layout for the page.
I want to update only table rows by returned json. How can I do this without using third-party libraries and only using jquery? I just want a rough idea and example.
Here is the demo fiddle. (simple version)
NEW: See the updated fiddle (advanced version).
Let's say you have this JSON data retrieved:
var jsonData = [
{ field1: 'value a1', field2: 'value a2', field3: 'value a3', field4: 'value a4' },
{ field1: 'value b1', field2: 'value b2', field3: 'value b3', field4: 'value b4' },
{ field1: 'value c1', field2: 'value c2', field3: 'value c3', field4: 'value c4' }
];
And you have this table:
<table id="data-table">
<tr><td>There are no items...</td></tr>
</table>
Now, you need a method that can parse the values in a customisable order and presence. For example, if you can pass a field array to the parser function; you can set the order of the fields and leave out a field or two if you want to:
loadTable('data-table', ['field1', 'field2', 'field3'], jsonData);
Notice that field4 is not parsed.
The loadTable function loops through the items of the returned array and create a <tr> with each field value inside a <td>. Here is the simple function:
function loadTable(tableId, fields, data) {
//$('#' + tableId).empty(); //not really necessary
var rows = '';
$.each(data, function(index, item) {
var row = '<tr>';
$.each(fields, function(index, field) {
row += '<td>' + item[field+''] + '</td>';
});
rows += row + '<tr>';
});
$('#' + tableId).html(rows);
}
Added support for:
You can now simply include an empty table and the dynamicTable will take care of the rest:
<table id="data-table"></table>
Call the dynamicTable.config() method to configure the table:
var dt = dynamicTable.config('data-table', //id of the table
['field2', 'field1', 'field3'], //field names
['header 1', 'header 2', 'header 3'], //set to null for field names to be used as header names instead of custom headers
'There are no items to list...'); //default text for no items
Then call dt.load(data); to load new data (removes the previous list if there is one),
OR call dt.load(data, true); to append the new data at the end of the previous list.
Calling dt.clear(); method will clear the whole list.
data-table already has headers, how do add/re-render rows for it without loosing its headers? $('#' + tableId).html(rows); re-writes the whole table including its headers.
<thead> and <tbody> tags inside the table and modify the jQuery selector accordingly. e.g.: $('#' + tableId + ' tbody').html(rows); See the advanced version in the updated answer.
['field2', 'field1', 'field3'], //field names I believe this was done to show you that the order matters.
You can iterate through your JSON objects.
$.each(JSON_Object, function(key, value) {
// Write your code here
});
Then you can simply append your table with data.
$('#yourTableName tr:last').after('<tr><td>John</td><td>$500</td></tr>');
Since you specifically mentioned that you don't need 3rd party libraries, you can do something like above. However if you need dataset with all the features, you can consider some plugin like http://datatables.net/.
If the table in question is associated to an oData service (e.g. as is standard in Fiori) with an item reference in the table XML such as items="{/ReportSet}" then a request to update the table with a filter will automatically update the table items i.e. in JS:
eTable.bindItems(sPathR,template,null,this.instanceFilter);
/ReportSet in the above template should be the item template in the table this.instanceFilter is the defined filter set prior to the call
Good: price, weight, length, color.