As we all know that, To show the list of data in portal, We used the Entity List but sometime we have a requirement to show the filtered data that's why we have to use JQuery DataTable to show the list of data. In this post i will show you, How we can fetch the data from CRM and show this data as a table format in our portal.
PreRequisite: You should know :
1) How to use OData query in portal. if you don't know then Click Here to know that.
2) About Web-Template. Click Here to know about that.
Step 1: Copy the below code and paste this code in your code editor and change the code as per your requirement. In this code i am fetching the Case Entity data using OData Query and bind the data in Table.
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<br>
<body onload="showTable()">
<table id="caseTable" class="table">
<thead>
<tr>
<td>Title </td>
<td> Name </td>
</tr>
</thead>
</table>
</body>
<script>
function showTable(){
// Fetch the Case Entity Data in JSon format.
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
datatype: "json",
url: "~/_odata/Cases",
beforeSend: function(XMLHttpRequest) {
XMLHttpRequest.setRequestHeader("Accept", "application/json");
},
async: false,
success: function(data, textStatus, xhr) {
result = data.value ;
},
error: function(xhr, textStatus, errorThrown) {
Xrm.Utility.alertDialog(textStatus + " " + errorThrown);
}
});
// Now bind the JSon data in Table format
$('#caseTable').DataTable({
"aaData": result,
"columns": [
{ "data": "title" }, // Here give the column name(The data which you want to show).
{ "data": "title" }
]
});
}
</script>
Step 2: Now paste this code in your web template.
Step 3: Now check your web page in your portal.
Sometime we get the error in pop-up form like "Cannot reinitialise DataTable".
To solve this error, add this code in your DataTable : "destroy": true,
When we fetch the data using Odata Query, we get only 10 records. To get more than 10 records, Click Here to know that.
Sometime we get the error in pop-up form like "Cannot reinitialise DataTable".
When we fetch the data using Odata Query, we get only 10 records. To get more than 10 records, Click Here to know that.
3 comments:
Can you please explain how you bind the json data into data table?
Hi,
Use this code to bind data :
$('#caseTable').DataTable({
"aaData": result,
"columns": [
{ "data": "title" }, // Here give the column name(The data which you want to show).
{ "data": "title" }
]
});
Plz read the above post properly.
Use Jquery DataTable to show the list of data in D365 Portal / ADX Studio Portal useful blog post!!!
Pharma company culture in Gurugram
Digitally savvy pharma marketer in Gurugram
Pharma geek in Gurugram
Shift in pharma selling in Mumbai
Post a Comment