Using DataTables with XPages

Sunday, January 4, 2015 4:03 AM UTC

For a current project I looked for a way to extend HTML tables to display a fixed header row, a static height and a way to scroll through the data. I also wanted the first column to be fixed, too. After some researches I found the great jQuery plugin called DataTables. The fixed header row is a default feature, the fixed column can be added as an extension very easily.

The plugin out-of-the-box comes with a ready-to-use interface that modifies the static HTML table to a very dynamic and neat data table. There is also a way to adapt it to other frameworks like Bootstrap and Foundation. This wasn't that easy though especially in an XPages environment. This post shows you how to adapt it to work with XPages and Bootstrap (from the BS4XSP plugin or with the latest Extlib versions that contain Bootstrap).

Getting started

I used my BS3 template again, created an ODP for source control and downloaded the DataTables files with Bower directly into the WebContent folder on my disk. Afterwards I synched the project back in the NSF with Domino Designer. If you want to know more about how to use Bower with DDE see the blog post from Frank van der Linden here: http://elstarit.nl/?p=186

bower install DataTables

Of course you can add the files manually after downloading them from here: https://github.com/DataTables/DataTables

I then created a new theme to load the new resources to my application. The theme extends a predefined theme I already used in my template. In my case I use the Bootstrap styling so I only added the CSS for that. The Bootstrap styling is not included in the Git repository so you have to download it separately: http://datatables.net/examples/styling/bootstrap.html

When using the Bootstrap version make sure you use a different function name: instead of "DataTable" you use "dataTable" to use the Bootstrap renderer.

Caveats

Instead of showing code here I'd suggest you to visit my Git repository to have close look and to download and try it for yourself: https://github.com/zeromancer1972/DataTables

As there are some caveats when integrating the plugin into an XPages application I will focus on them here. The major problem was that the Bootstrap extension uses AMD to load the main modules to extend them. This won't work on Domino correctly so I had to comment this part out of the source. Have a look at the last function block in the code here.

Though the original code checks if AMD is available (and it is in modern browsers and on Domino in general) it doesn't work with jQuery in that case - I don't know why exactly. We discussed that several times on Stackoverflow with many other plugins in the XSP context.

The second problem occurs when you use resource aggregation - again, we had that when using Bootstrap themes that load the Glyphicons fonts with relative paths in the CSS. The CSS of DataTables also uses relative paths to some images for the sorting options (arrows up and down). These images are referenced to another folder relative to the current position. This will end up in an uncorrect path as the resource aggregation transforms the URLs to the .ibmmodres paths. There is only one solution when using runtime optimized aggregation: customize the CSS. I modified the CSS to contain the full path to the images relative to the XSP context. Watch for the .sorting classes.

Being through with that I finally can run the script against my simple table. In my case I use AJAX data that will be loaded by the plugin itself. The data is created via an XAgent page and a Java class that uses the OpenNTF API to generate JSON with the IBM JSON classes. The data is the fake names collection containg about 1300 documents. Remember: the JSON contains ALL documents so be aware of large responses when having a lot more data in your application. Once loaded the data is fully controlled in the browser by the plugin: sorting, displaying, pagination - no further request are made against the server. I also modiified some labels of the finally rendered table via the language options of the plugin - and this is the final script:

The live demo application is here: http://notesx.net/datatables.nsf/index.xsp

A video of a live demonstration can be watched here: https://www.youtube.com/watch?v=0_bBmwqzJyk

So have fun with another cool plugin in your toolbox Lächelnd

Update

Meanwhile I tweaked the demo a bit to use the Extlib REST service instead of the XAgent page. I also added dynamic view bean to display any view your application depending on the URL parameter called "viewName".





Latest comments to this post

Luis wrote on 06.06.2015, 17:24

Hello Mr. Busse, nice demo! 

I have been using Datatables with a Rest control in my xpages for a one year and a half, it's a good javascript client component. 

 Link to this comment
Prashant Bhavsar wrote on 24.03.2015, 02:10

Excellent demo Oliver, 

Will you be able to add the nsf in your downloads.

 Link to this comment
Thomas Adrian wrote on 04.01.2015, 15:27

Thanks Oliver for sharing, looks really nice

 Link to this comment
Frank van der Linden wrote on 04.01.2015, 09:05

Hi Oliver,

Nice demo and thanks for mention my Bower blog.

 Link to this comment
Marky wrote on 04.01.2015, 06:22

Nice demo Oliver :)

I like data tables if you want a simple vanilla REST filling table. It has limitations though.

 

 

 Link to this comment

Leave a comment right here