Where am I?
Table of Contents
- Event Management
- Messaging support
- Error persistence
- Build and deploy
DataTablesWhat is DataTables?
Before we proceed with the development, let's preview the final output:
DevelopmentSince we've already discussed the controller and service classes in the previous section, we just need to discuss the JSP pages. We actually have five JSP pages:
- Primary page
- Supporting pages
1. Primary pageThe primary page contains the main view. It's a single page containing the following sections:
- Conversion of links to buttons
- Attaching link functions
- Retrieval of records and conversion to DataTables
Let's discuss each section:
The following section declares two URLs which uses the JSTL core tag: the root and the resources URLs respectively. These URLs are here for reusability purposes:
The following section declares a menu list:
The following section creates an empty table and three HTML links (controller links) for adding, editing, and deleting of records. Take note of the table id, eventTable, because this id will be referenced multiple times:
The following section includes four external JSPs. The first three JSPs contain form elements for adding, editing, and deleting of records respectively. The fourth dialog is used for displaying generic messages.
f. Conversion of links to buttons
The following section converts the previous three links to a button. This is mainly for aesthetic purposes:
g. Attaching link functions
The following section attaches a function to our controller buttons. Each function will trigger a dialog box. These dialog boxes are the four dialog JSPs we included earlier:
h. Retrieval of records and conversion to DataTables
The following section calls a custom getRecords() function which will retrieve Event records, populate our table with data, and convert the table to DataTables:
If you want to disable DataTables, just change the previous function to the following:
ResultsWhen we run the application, the result should be similar to the following image (this is an actual screenshot taken from a live deployment):
LimitationsOur DataTables page has some limitations. However, these are not DataTables limitations but rather something that we intentionally (and unintentionally) did not implement:
- The status "Showing 1 to 4 Entries" has a bug when adding or deleting a record. You need to refresh the whole page to show the correct status
- Date conversion is in integer format instead of Date
- UI validation is not implemented
PlaygroundSome developers might not have time to build the entire project. Maybe they just want something to play around really fast. Because of that, I've deployed live samples to Cloud Foundry and added sample fiddles via JSFiddle.
JSFiddleIf you want to explore more about DataTables, I've provided fiddles for you to play around. These fiddles do not need any server-side programs to run. Feel free to fork them.
Here are the fiddles:
- Plain table with static data: http://jsfiddle.net/krams/Us9S5/
- Plain table with dynamic data: http://jsfiddle.net/krams/jD67t/
- Add form: http://jsfiddle.net/krams/8QKAe/
- Edit form: http://jsfiddle.net/krams/Kf4MF/
- Full table with DataTables and buttons: http://jsfiddle.net/krams/9Syqc/
What is JSFiddle?
Cloud FoundryIf you want to tinker with a live deployment, I suggest you visit the application's live site at http://spring-mysql-mongo-rabbit.cloudfoundry.com/event
What is Cloud Foundry?
Cloud Foundry is the open platform as a service project initiated by VMware. It can support multiple frameworks, multiple cloud providers, and multiple application services all on a cloud scale platform.
Next SectionIn the next section, we will explore jQgrid, a jQuery plugin, for displaying tabular data. Read next.
Share the joy:
Subscribe by reader Subscribe by email Share