Power Apps Portal #16- DataTable Plugin to Custom Entity List [Part 2]

Introduction

In this blog will see how to add DataTable Plugin to the Custom Entity List in the Power Apps Portals. DataTable Plugin will provide the CSS styling and pagination to the custom Entity List and the relevant search will be enabled to the table.

In my previous blog explained adding CSS and JavaScript references a Custom Entity List to the Web Page using the FetchXML and Liquid code. Power Apps Portal #15- DataTable Plugin to Custom Entity List [Part 1]

Steps to add DataTable Plugin to Custom Entity List

1. Go to https://datatables.net/.
2. Copy the CSS and JS references.

3. Copy the CSS reference from DataTable Plugin and run in the browser.

4. Save this CSS code into the local machine as jquery.dataTables.min.css

5. Copy the Javascript DataTable reference and run it in the browser.

6. Save this JavaScript code into the local machine as jquery.dataTables.min.js

7. Go to Power Apps Maker Portal and Open the Power Management Model driven App.

8. Click on Web Files in the site map.

9. Create a new Web File for jquery.dataTables.min.css

10. Add the jquery.dataTables.min.css file in the Notes section as an attachment.

11. Create a new Web File for jquery.dataTables.min.js

12. Add the jquery.dataTables.min.js file in Notes as an attachment.

13. Add references to both these web files on the webpage.

<link rel="stylesheet" type="text/css" href="/jquery.dataTables.min.css">
/jquery.dataTables.min.js

15. Copy and Add the JaveScript DataTable reference to the Web Page.

$(document).ready( function () {
    $('#myTable').DataTable();
} );

16. Run the Web Site.