Append Jquery Ajax (json) To Table
I have a ajax call that retreives data and its success portion looks like this: $('table.table').append('ID: ' + item.ID + ' Name: ' + item.
Solution 1:
Like this?
$("table.table").append("<thead><tr><th>ID</th><th>Name</th><th>URL</th></tr></thead>");
$("table.table").append("<tr><td>1</td><td>MARC</td><td><a href='https://.......sharepoint.com'><img src='forwarding-icon.png' alt='forward' height='42' width='42'></a></td></tr>");
$("table.table").append("<tr><td>2</td><td>MICHAEL</td><td><a href='https://.......sharepoint.com'><img src='forwarding-icon.png' alt='forward' height='42' width='42'></a></td></tr>");<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tableborder=1class="table"></table>Solution 2:
$(() => {
var jsonObject = [{ id: '002', name: 'Google', Icon: 'https://t0.rbxcdn.com/98aeff8137da4af6157fb1c29836d9bc' },
{ id: '002', name: 'Fb', Icon: 'https://t0.rbxcdn.com/875e717ac7ae0df8d133278d0c52f963' },
{ id: '002', name: 'Yahoo', Icon: 'https://t0.rbxcdn.com/875e717ac7ae0df8d133278d0c52f963' }]
;
//Get the external template definition using a jQuery selectorvar template = kendo.template($("#javascriptTemplate").html());
//Create some dummy datavar data = jsonObject;
var result = template(data); //Execute the template
$("table").html(result); //Append the result
});<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"><title>Slider</title><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script></head><body><table></table><scriptid="javascriptTemplate"type="text/x-kendo-template"><table><tr><td><b>ID</b></td><td><b>Name </b></td><td><b>icon </b></td></tr>
# for (var i = 0; i < data.length; i++) { #
<tr><td> #= data[i].id #</td><td> #= data[i].name # </td><td><imgsrc="#= data[i].Icon #"width="150px"height="150px"/></td></tr>
# } #
</table></script></body></html>
Post a Comment for "Append Jquery Ajax (json) To Table"