Add The People By Location Page

Now that the controller is created and has been committed to our source control it is time to create the page that is associated with it. I’ve started by copying the home.html page to it’s own file called location.html (to match the string returned by the controller in the last entry). I’ll break this in to components in a later part but for now a quick copy is all I need to get the exact same layout as the home page.

For the list of peoples details I’ve decided to use DataTables. This is a jQuery plugin for displaying table data in interactive tables that adds filtering and pagination as required. Just like Bootstrap I could add the DataTables to the static folders in my resources but instead I’m going to make use of WebJars again and import it via a Maven dependency. I’m also excluding jQuery as I’m already importing newer version of it.

I then add the CSS and JS to my page using the same method as I did for BootStrap

We then need to add our table to the page. This is just a standard html table. It has been styled using the BootStrap table styling with the bootstrap table striping and bootstrap table border classes.

The interesting part of the table is the <tr> tag. You can see that here I am using another th:each tag to do a thymeleaf based loop of add the data that was passed in to the model under the people attribute.

Finally I need to tell DataTables to activate against my new table. This is done with a little extra javascript. I’ve elected to out the javascript in to its own file in the static/js folder called phonebook.js and then add it on to the page via a script tag.

Now when I run my application and view my page I see the following results

It is starting to look good but kinda sparse. In the next section I’ll add some more fake data using a generator.