In this article, we'll explore how to integrate the jQuery DataTable Plugin into custom tables within the Power Pages Portal. The DataTable Plugin enhances tables by providing features such as pagination, column filtering, efficient search capabilities, and customizable styling. Let's walk through the steps to achieve this seamlessly.
Step 1. Incorporate DataTable CDN in your Web page
To begin, include the necessary DataTable CSS and JavaScript files within your web page. This step ensures that DataTable functionalities are properly imported and accessible.
<!-- DataTable -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.12.0/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/2.0.8/js/dataTables.min.js"></script>
<!-- DataTable -->
Step 2. Fetch Entity records using FetchXML
Retrieve entity records using FetchXML. Modify the FetchXML code snippet according to your specific entity requirements.
Ensure that appropriate table permissions are assigned to the entity(Create Web Roles and Assign Them to Contact in Power Pages).
{% fetchxml students %}
<fetch version="1.0" output-format="xml-platform" mapping="logical" distinct="false">
<entity name="contact">
<attribute name="fullname" />
<attribute name="contactid" />
<attribute name="emailaddress1" />
<attribute name="mobilephone" />
<attribute name="bksedu_currentprogram" />
<filter type="and">
<condition attribute="bksedu_contactgroup" operator="eq" value="2" />
</filter>
</entity>
</fetch>
{% endfetchxml %}
Step 3. Create a Bootstrap table structure
Construct a Bootstrap table structure (<table> with <thead> and <tbody>) where fetched data will be displayed as below using a for loop.
<table class="table table-bordered table-hover" id="student">
<thead class="table-header">
<tr>
<th scope="col">Enroll No.</th>
<th scope="col">Student</th>
<th scope="col">Mobile</th>
<th scope="col">Course</th>
</tr>
</thead>
<tbody>
{% for result in students.results.entities %}
<tr>
<th scope="row">{{result.bksedu_enrollmentno}}</th>
<td>{{result.fullname}}</td>
<td>{{result.mobilephone}}</td>
<td>{{result['academicperiod.bksedu_academicperiodname']}}</td>
</tr>
{% endfor %}
</tbody>
</table>
Step 4. Initialize Data table
Implement DataTable on the constructed table (#student) to enable advanced functionalities like pagination and search.
<script>
$(document).ready(function () {
$('#student').DataTable({
"lengthChange": false, // Hides the page length change option
});
});
</script>
Conclusion
By following these steps, you've successfully integrated the DataTable Plugin into your Power Pages Portal, enhancing your custom table with dynamic features like pagination and search capabilities. This setup not only improves user experience but also streamlines data presentation and interaction on your portal.