DataTables examples: Having fun with table data and Java

Requirements:

  • Any web application server java compatible
  • Java 1.7 (because of the use of some features like switch string statements)
  • jQuery and dateformat plugin
  • Guava
  • Apache commons lang
  • Jstl 1.2
  • Log4J

Download demo

The simple example

DataTables simple example

Server code
Javascript code
Html code:
 

Some notes:

With this option

Render the column not searchable and orderable for all the columns with class = not-search-orderable.

CreatedRow is a callback for the generated row. It’s a good place to put the the code for generating the progressive number on the first column

When user do a sort or search action, the progressive number must rigenerate itself. This callback function do the needed job:

The Ajax example

Ajax sample

 

Server code

Javascript code

HTML Code

From the server code, we can notice that data is put on a map that is converted to Json and sent to response

The request values belongs from the serialized form, then are decodified and splitted (using the Guava Splitter class).

The crux steps are:

The way the person’s notes are shown is slightly different from the simple example, because there’s a single div in the page that is dinamically filled by clicking on the specified column.

The date column can be formatted in this way

In order to use $.format.date function, the dateFormat plugin is required.

The Pipeline example

The pipeline example is similar to ajax example, except for the fact that the table uses a cache control before the ajax call; the cache works for paging. Every time a new search or sorting is requested, the cache must be cleared.

The Send example

send

This example shows how to elaborate the existent data of a datatable and process it through the server using a form hidden field in which is a json string value is set; data is sent through a standard form post method but can be done using ajax as well.

HTML Form code
Javascript code
Server code

Add a loading box between web pages

Let’s add a loading box that appears everytime a button with a certain class is clicked and prevent the user to do any operation before it disappears:

css file:

js file:
html file:

Create an image link using jQuery and css

Suppose to have a web site with generic icon for doing some operations.

It would be handy to use a specific class to show the wanted icon, instead of writing several times the same code as below

Solution with jQuery

By using jQuery it’s possible to automatically generate the image inside the anchor.

Put this code on the load event of the document:

whenever you need to display the detail image on a link, the code to write is simple:

Solution with css

Without using jQuery, is a common practice to use the background-image property of css

Create an image link in this way is maybe more clean than using jQuery, although width and height property of the image must be specified