Use Jquery DataTable to show the list of data in D365 Portal / ADX Studio Portal.

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.

3 comments:

Gaurav Agarwal said...

Can you please explain how you bind the json data into data table?

CRM HUB said...

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.

Anu Priya said...

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