ajax append tr to table each row code example
Example 1: how to append rows in table using jquery each function
BY LOVE
Note : 1- 'tblEmployee' is the ID of the table body
$.each(Result, function (key, value)
{
$('#tblEmployee').append('<tr> <td>' + value.EmployeeId + '</td> <td>' + value.Name + '</td> <td>' + value.Gender + '</td> <td>' + value.StateId + '</td> <td>' + value.CityId + '</td> <td>' + value.PhoneNumber + '</td> <td>' + value.Salary + '</td></tr>');
})
Example 2: row append and calculation in jquery datatable
Plain text12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364$(document).ready(function() { loadMyItems(); }); function loadMyItems() { var siteUrl = _spPageContextInfo.siteAbsoluteUrl; var oDataUrl = siteUrl + "link"; $.ajax({ url: oDataUrl, type: "GET", dataType: "json", headers: { "accept": "application/json;odata=verbose" }, success: mySuccHandler, error: myErrHandler }); } function mySuccHandler(data) { try { var dataTableExample = $('#table_id').DataTable(); if (dataTableExample != 'undefined') { dataTableExample.destroy(); } dataTableExample = $('#table_id').DataTable({ scrollY: 770, "order": [[ 2, "asc" ]], "pageLength": 50, "aaData": data.d.results, "aoColumns": [{ "mData": "EditLink", "render": function(EditLink) { return '<button onclick="EditItemWithCheckoutAlert(event, \''+EditLink+'\');">Edit</button>'; } }, { "mData": "Title" }, { "mData": "StartDate" }, { "mData": "Planned_x0020_Date" }, { "mData": "Days_x0020_of_x0020_delay" }, { "mData": "Days_x0020_Left" }, { "mData": "Reason_x0020_for_x0020_Late_x002", "render": function( data, type, full, meta) { if(!data){var returnText = "";} else {var returnText = data.results;} return returnText; } }] }); } catch (e) { alert(e.message); } } function myErrHandler(data, errCode, errMessage) { alert("Error: " + errMessage); }