In Part 4, we implemented the GET Request to read data from a HCL Domino View and display it as table in the browser. In this part, I want to quickly add sorting to the table, in our case a quick client side function based on JavaScript.

To do this, I created a new Script Library in the Trips database for Client Side JavaScript and shamlessly copied sort function from added the respective functionality to bi-directionally sort my html table. This is the code:

Then, we have to add our Library to our XPage in the resoures area:

đŸ’¡
<xp:script src="/htmx-addons.js" clientSide="true"></xp:script>

Then, let's add clickable elements to the table headers:

đŸ’¡
<th onclick="sortTable(0)">Date↓↑</th>
<th onclick="sortTable(1)">User ID↓↑</th>
<th onclick="sortTable(2)">Start↓↑</th>
<th onclick="sortTable(3)">Destination↓↑</th>

With that, we can sort our table and the result looks like this:

Clicking on the Destination column re-sorts the table:

Now, this is String sorting - so we have to add some more logic for dates but the basic stuff is working. Again, we could do that on the server side as well, but in this simple use case, we don't need permanent round tripping. So - next up: let's create new trip entries!

cheers,

Heiko.