Using JavaScript with Dandelion Datatables

I wanted to avoid the traditional design approach for managing Roles in the NixMash Spring Administration module. By “traditional design” I’m referring to a Roles List Page with a separate Role Edit page and possibly a third page to Add a Role. Since we’re only talking about a single property for now, Role Name, there was no reason we couldn’t use a single page for everything.

It turns out that Dandelion Datatables can be manipulated with JavaScript just like the Datatables Core product. Dandelion Datatables also support a ton of design-time properties, but that’s another topic. Here I’ll be showing you how we’re using JavaScript to manipulate Dandelion DataTables and other elements on our [single] Role Administration page.

First the screen displays, starting with the Roles List.

Our Edit Roles button calls a JavaScript function that hides the Role Name column and displays a column containing a Thymeleaf Role Edit form.

Here’s the Dandelion Datatable Thymeleaf HTML with the hidden form. We initially hide the form column with a simple dt:visible=”false” property.

We added a separate non-Dandelion table on the page which is initially hidden. When we want to add a Role, this table is displayed and the Dandelion Datatable is hidden.

Below is the JavaScript for the Add, Edit and Cancel buttons. The first line is important, as it is how we sync-up with an existing Dandelion Datatable. We cannot initialize the Datatable like the Core JavaScript Datatable because it is already initialized in Spring.

You can see how we make columns visible and hidden in the #editRoles onClick() function. One other point to make is that to hide a Dandelion Datatable we don’t hide its Table Element but rather the wrapper it creates around the table and its decorative items like paging controls and search boxes.

Source Code Notes for this Post

All source code discussed in this post can be found in my NixMash Spring GitHub repo and viewed online here.