DataTable Plugin in PowerApps Portal

Introduction: This blog explains how to add search, sorting, and pagination functionality to the custom table in PowerApps Portal.

In my previous blog, we saw how we can use FetchXML and liquid code to display data on PowerApps Portal. Display records using FetchXML and liquid code in the PowerApps portal – Vblogs.

In this blog, we will see how we can use DataTable Plugin to add search, sort, and pagination functionality to our table. 

Steps to be followed:

1. Go to “https://datatables.net/“
2. We have to add references to CSS and JS files.

3. There are two ways by which we can add this in PowerApps Portal.

• Copy these values and directly add them as a reference on the webpage where you want to use this.
• Create two web files one for CSS and one for JS and add them as a reference on the webpage where you want to use them.

Method 1:

1. Copy CSS and JS file reference.
2. Go to the webpage where you want to use this.
3. Add reference on the webpage.

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
<script type="text/javascript" src="//cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>

4. Add below script on the webpage.

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

• Browse the website you can see the changes.

Method 2:

1. Copy the file reference

2. Download both the files locally.

3. Create two web file records in PowerApps Portal.

• CSS Web File:

attach CSS file as notes attachment.

• JS Web File:

attach JavaScript file as notes attachment.

4. Add reference of both these web files on the webpage.

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

5. Add below script on the webpage.

• Browse website you can see the changes.

NOTE:

• The table must be valid, well-formatted HTML, with a header (thead) and a single body (tbody). An optional footer (tfoot) can also be used. (Table must have thead, tbody tags, and option tfoot tag)

Example:

     <table id="authorTable">
        <thead>
          <tr>
            <th>Title</th>
            <th>Description</th>
            <th>Topic</th>
            <th>Date</th>
          </tr>
        </thead>
        <tbody>
          {% for result in authorTopics.results.entities %}
          <tr>
            <td>{{ result.cr3a5_topic }} </td>
            <td>{{ result.cr3a5_description }} </td>
            <td>{{ result.cr3a5_title.label }}</td>
            <td>{{ result.cr3a5_date }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>