#### Step 1 : collecting information
The first thing to do is to gather information in order to know what dependencies will be needed.

what template engine is being used?

Dandelion-Datatables provides a JSP taglib and a Thymeleaf dialect, allowing you to use both template engines.

In our case, the Petclinic app is based on plain old JSP.

what version of the servlet API is being used?

By default, Dandelion-Datatables takes advantage of one of the key features added in the Servlet 3.x API (JSR 315) : configuration through annotations, allowing us to qualify some classes as a Servlet or a Filter. This way, no need to manually update the deployment descriptor ( web.xml ) any longer.

Note that currently, the Servlet 3.x API is supported by almost all application servers in their latest version. For example Tomcat 7.x or JBoss AS 7.

In our case, in order to keep a backward compatibility with a large majority of legacy app servers, we’ll use the datatables-servlet2 extra.

#### Step 2 : updating the dependencies
Since the build of the Petclinic app is based on Maven, let’s add the needed dependencies in the pom.xml.

#### Step 4 : replacing plain old HTML tables with DataTables
At this point, we’re done regarding the Dandelion-Datatables configuration. Now we just have to update the JSPs that use the plain old table and use the Dandelion-Datatables taglib instead.

With Dandelion-Datatables, you don’t need to use the native HTML table tag any longer. All the HTML markup will be generated by the taglib thanks to the datatables:table tag

The id and data attributes are mandatory here.

* id is just a HTML pass through attribute
* data is the data source used to populate the table. We use Expression Language here to access the collection previously set in the request.

The row attribute is quite important here: this attribute tells Dandelion-Datatables to set a variable (page-scoped) that will be available during the iteration through the name it was assigned (“vet” here). This way, you will be able to use this variable and so access all the bean’s properties in the columns.

We use the cdn attribute here to tell Dandelion-Datatables to grab the needed static resources from a compatible CDN (the Microsoft’s one today). This way, all JS and CSS needed by DataTables will be automatically loaded in the page

We also use one of the the cool features of Dandelion-Datatables : theming. Today, Bootstrap 2 and jQuery UI ThemeRoller are supported. Just use the theme attribute to activate the theme you want.
Note that the static resources needed by those themes must be added manually before using the taglib.

cssClass is, as for id, a HTML pass through attribute

Now let’s comment a bit the datatables:column tag and its attributes :

Since no property is directly displayed in a column, we can’t use the property attribute but instead, we set a body to the datatables:column tag. This will allows us to use anything we need inside (JSTL, Expression Language, plain HTML, …)

The title attribute is used to fill the th cells

At this point, the taglib will generate the needed DataTables configuration (composed of Javascript and potentially CSS) and the table will be rendered using DataTables. Pretty cool right? :-)

##### ownersList.jsp
Let’s adapt the other JSP. This time, we also use the JSTL c:forEach tag to iterate over a collection of owners.

Info!
Note that the above filter configuration is automatically done using a Servlet 3.x compatible container, so that you don’t need to add anything in the web.xml file.

Let’s adapt the markup now.

Enabling export is quite easy. Just set the export table attribute to the type of export you want (pdf here). Remember that Dandelion-Datatables will use the datatables-export-itext extra by default (based on the iText library).

You need to bind the tag using the type attribute and then add all the configuration you need (css classes to apply, the export file name, header inclusion/exclusion, …).
In our case, we just add the Bootstrap classes as we did before on buttons using the cssClass attribute.

Second, more important, HTML markup appears in the PDF export.

Fortunately, you can also configure the column’s content in each export. Let’s see how to do this.
Actually, you want two different types of display, one for the HTML (containing the HTML markup, links, formatting, …) and another one for the PDF, without any HTML markup.

For this purpose, you can use the display attribute of the datatables:column tag as follows :