Cannot add Paging, Sorting to Dynamically Created Table
Cannot add Paging, Sorting to Dynamically Created Table
Ashwinss
Posts: 2Questions: 1Answers: 0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="../WebResources/ClientGlobalContext.js.aspx"></script>
<script src="../WebResources/cr78f_Jquery3.3.1"></script>
<title>Sample HTML grid for CRUD</title>
<link rel="stylesheet" type="text/css" href="../WebResources/cr78f_DemoDashboardCss">
<link rel="stylesheet" type="text/css" href="../WebResources/cr78f_Jquery_DataTables" />
<script src="../WebResources/cr78f_Jquery_DataTables_js"></script>
<script>
$(document).ready(function () {
var crmContext = GetGlobalContext();
var entityName = 'account';
var masterGrid;
var query = entityName + 's?$select=name,emailaddress1,revenue,address1_composite,telephone1&$filter=statecode eq 0';
$.when(CallCRMServer('GET', null, query, crmContext, entityName, false)).then(
function (successCallback) {
if (successCallback != undefined) {
gridData = successCallback.value;
console.log(gridData);
for (let i = 0; i < gridData.length; i++) {
$('#tableBody').append("<tr>" +
"<td>" + gridData[i].name + "</td>" +
"<td>" + gridData[i].emailaddress1 + "</td>" +
"<td>" + gridData[i].revenue + "</td>" +
"<td>" + gridData[i].address1_composite + "</td>" +
"<td>" + gridData[i].telephone1 + "</td>" +
"<td><a href='#' onclick=EditRecord('" + gridData[i].accountid + "','" + entityName + "')> Edit </a>" + "</td>" +
"<td><a href='#' onclick=DeleteRecord('" + gridData[i].accountid + "','" + entityName + "')> Delete </a>" + "</td>" +
"<tr>");
}
}
$("#dataTable").DataTable(); ```//Not Working```
},
function (error) {
console.log(error);
}
);
});
var CallCRMServer = function (httpVerb, dataVal, query, crmContext, entityPluralName, includeAnnotations) {
var retrievedData = $.Deferred();
$.ajax({
type: httpVerb,
contentType: "application/json; charset=utf-8",
datatype: "json",
data: dataVal != null ? JSON.stringify(dataVal) : null,
url: crmContext.getClientUrl() + '/api/data/v9.0/' + query,
async: false,
beforeSend: function (XMLHttpRequest) {
//Specifying this header ensures that the results will be returned as JSON.
XMLHttpRequest.setRequestHeader("Accept", "application/json");
XMLHttpRequest.setRequestHeader("OData-MaxVersion", "4.0");
XMLHttpRequest.setRequestHeader("OData-Version", "4.0");
XMLHttpRequest.setRequestHeader("Content-Type", "application/json; charset=utf-8");
if (includeAnnotations)
XMLHttpRequest.setRequestHeader("Prefer", "odata.include-annotations=OData.Community.Display.V1.FormattedValue");
},
success: function (response) {
console.info("Successfully received data for entity : " + entityPluralName);
retrievedData.resolve(response);
},
error: function (error) {
console.error("Error occurred while retrieving data for entity : " + entityPluralName);
console.error(error);
retrievedData.reject(error);
}
});
return retrievedData.promise();
};
</script>
</head>
<body>
<div>
<p> Sample HTML Grid</p>
<table id="dataTable" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Revenue</th>
<th>Address</th>
<th>Phone</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody id="tableBody"></tbody>
</table>
</div>
</body>
</html>
Answers
Thats a lot of code to look through. Do you get any errors in your browser's console?
Kevin
I don't get any errors in console. I see some formatting changes after line 25 is executed. But all Paging, search don't work.
Hard to say without being able to see what is generated. Looks like you might be generating invalid HTML. Line 22 doesn't look to be correct:
I think you should have
"</tr>");. If this doesn't help please post a link to your page or a test case replicating the issue.https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin