Sometime we need to show our data in table format. We should use Jquery DataTable to show the data in sub-grid (Table) format. In this post i will explain step by step, how we can create a DataTable.
Step 1: Copy the below code and paste this code in your editor. And change the code as per your need. Here i will create a DataTable of Case Entity.
Step 2: After make changes in code, Create a new HTML Web-resource and Upload the code in this web-resource and check the table.
Step 1: Copy the below code and paste this code in your editor. And change the code as per your need. Here i will create a DataTable of Case Entity.
<html>
<head>
<title>MS Dynamic CRM</title>
<script src="ClientGlobalContext.js.aspx" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.5/css/select.dataTables.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"> </script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"> </script>
<script>
var dataSet;
var arrData = [];
$(document).ready(function() {
// Get the data in Json format, Change the URL as per your need.
var entityName ="incident"; // This is the Entity name of Case.
var url = window.parent.Xrm.Page.context.getClientUrl() + "/api/data/v8.2/" + entityName +"s?$select=title,ticketnumber,prioritycode";
var myData = [];
var req = new XMLHttpRequest();
req.open("GET",url, false);
req.setRequestHeader("OData-MaxVersion", "4.0");
req.setRequestHeader("OData-Version", "4.0");
req.setRequestHeader("Accept", "application/json");
req.setRequestHeader("Content-Type", "application/json; charset=utf-8");
req.setRequestHeader("Prefer", "odata.include-annotations=\"*\"");
req.onreadystatechange = function() {
if (this.readyState === 4) {
req.onreadystatechange = null;
if (this.status === 200) {
myData = JSON.parse(this.response);
dataSet=myData.value;
} else {
Xrm.Utility.alertDialog(this.statusText);
}
}
};
req.send();
// Convert Json data into 2-d Array
arrItems = [];
$.each(dataSet, function (index, value) {
arrItems.push(value.title);
arrItems.push(value.ticketnumber);
// arrItems.push(value.prioritycode); or
arrItems.push(value["prioritycode@OData.Community.Display.V1.FormattedValue"]) ; // For OptionSet value
arrData.push(arrItems); // Push The Values Inside the Array to Create 2-D Array
arrItems = [];
});
table(); // Call a table function to create table.
});
function table() {
$('#customdatatable').DataTable( {
data: arrData,
columns: [
{ title: "Title" }, // Change the column name as per your need.
{ title: "Ticket Number" },
{ title: "Priority" }
]
} );
}
</script>
</head>
<body style="word-wrap: break-word;">
<table id="customdatatable" class="display" width="100%"></table>
</body>
</html>
<head>
<title>MS Dynamic CRM</title>
<script src="ClientGlobalContext.js.aspx" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.5/css/select.dataTables.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"> </script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"> </script>
<script>
var dataSet;
var arrData = [];
$(document).ready(function() {
// Get the data in Json format, Change the URL as per your need.
var entityName ="incident"; // This is the Entity name of Case.
var url = window.parent.Xrm.Page.context.getClientUrl() + "/api/data/v8.2/" + entityName +"s?$select=title,ticketnumber,prioritycode";
var myData = [];
var req = new XMLHttpRequest();
req.open("GET",url, false);
req.setRequestHeader("OData-MaxVersion", "4.0");
req.setRequestHeader("OData-Version", "4.0");
req.setRequestHeader("Accept", "application/json");
req.setRequestHeader("Content-Type", "application/json; charset=utf-8");
req.setRequestHeader("Prefer", "odata.include-annotations=\"*\"");
req.onreadystatechange = function() {
if (this.readyState === 4) {
req.onreadystatechange = null;
if (this.status === 200) {
myData = JSON.parse(this.response);
dataSet=myData.value;
} else {
Xrm.Utility.alertDialog(this.statusText);
}
}
};
req.send();
// Convert Json data into 2-d Array
arrItems = [];
$.each(dataSet, function (index, value) {
arrItems.push(value.title);
arrItems.push(value.ticketnumber);
// arrItems.push(value.prioritycode); or
arrItems.push(value["prioritycode@OData.Community.Display.V1.FormattedValue"]) ; // For OptionSet value
arrData.push(arrItems); // Push The Values Inside the Array to Create 2-D Array
arrItems = [];
});
table(); // Call a table function to create table.
});
function table() {
$('#customdatatable').DataTable( {
data: arrData,
columns: [
{ title: "Title" }, // Change the column name as per your need.
{ title: "Ticket Number" },
{ title: "Priority" }
]
} );
}
</script>
</head>
<body style="word-wrap: break-word;">
<table id="customdatatable" class="display" width="100%"></table>
</body>
</html>
Step 2: After make changes in code, Create a new HTML Web-resource and Upload the code in this web-resource and check the table.
