JSP taglib for DataTables
JSP taglib for DataTables
Hi all !
Just a little thread to introduce you a fresh JSP taglib that I've just finished writing.
You can now quickly create Datatables in your Java/JEE based web application without writing any Javascript code (the taglib cares).
Currently, the taglib implements nearly all the features within DataTables. The missing ones will be added over the time.
You can take a look at it here : http://tduchateau.github.com/DataTables-taglib/
Let me know if you find it useful (or not and so, why :)).
Feel free to send me comments and feedbacks (via this discussion or via the github repo), I'de be happy to improve it.
I look forward to hearing from you all ! :)
Regards,
Thib
Just a little thread to introduce you a fresh JSP taglib that I've just finished writing.
You can now quickly create Datatables in your Java/JEE based web application without writing any Javascript code (the taglib cares).
Currently, the taglib implements nearly all the features within DataTables. The missing ones will be added over the time.
You can take a look at it here : http://tduchateau.github.com/DataTables-taglib/
Let me know if you find it useful (or not and so, why :)).
Feel free to send me comments and feedbacks (via this discussion or via the github repo), I'de be happy to improve it.
I look forward to hearing from you all ! :)
Regards,
Thib
This discussion has been closed.
Replies
First of all, I would like to thank you for sharing.
I am a newbie in J2EE and I am trying to use data table in my JSP page following the example. I am using Eclipse and Tomcat 7. I encountered the following error.
"The absolute uri: http://github.com/tduchateau/DataTables-taglib cannot be resolved in either web.xml or the jar files deployed with this application"
and exception is
"exception
org.apache.jasper.JasperException: The absolute uri: http://github.com/tduchateau/DataTables-taglib cannot be resolved in either web.xml or the jar files deployed with this application
org.apache.jasper.compiler.DefaultErrorHandler.jspError(DefaultErrorHandler.java:56)
org.apache.jasper.compiler.ErrorDispatcher.dispatch(ErrorDispatcher.java:410)
org.apache.jasper.compiler.ErrorDispatcher.jspError(ErrorDispatcher.java:117)
org.apache.jasper.compiler.TagLibraryInfoImpl.generateTLDLocation(TagLibraryInfoImpl.java:311)
org.apache.jasper.compiler.TagLibraryInfoImpl.(TagLibraryInfoImpl.java:152)
org.apache.jasper.compiler.Parser.parseTaglibDirective(Parser.java:410)
org.apache.jasper.compiler.Parser.parseDirective(Parser.java:475)
org.apache.jasper.compiler.Parser.parseElements(Parser.java:1427)
org.apache.jasper.compiler.Parser.parse(Parser.java:138)
org.apache.jasper.compiler.ParserController.doParse(ParserController.java:242)
org.apache.jasper.compiler.ParserController.parse(ParserController.java:102)
org.apache.jasper.compiler.Compiler.generateJava(Compiler.java:198)
org.apache.jasper.compiler.Compiler.compile(Compiler.java:373)
org.apache.jasper.compiler.Compiler.compile(Compiler.java:353)
org.apache.jasper.compiler.Compiler.compile(Compiler.java:340)
org.apache.jasper.JspCompilationContext.compile(JspCompilationContext.java:646)
org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:357)
org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:390)
org.apache.jasper.servlet.JspServlet.service(JspServlet.java:334)
javax.servlet.http.HttpServlet.service(HttpServlet.java:722)<<<<<<<<<<<<<<<<<<<<<<
There is no web.xml file in tomcat 7. I added the zip file into WEB-INF/lib folder of the project.
I used the following tag libraries.
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="datatables" uri="http://github.com/tduchateau/DataTables-taglib" %>
I referenced js files in the header also.
I have servlet. beans & dao objects. Could you pls help me with this problem ?
First of all, you're welcome ! ;)
In my latest tests, I faced the same issue (absolute URI).
This issue (and 2 others : https://github.com/tduchateau/DataTables-taglib/issues/search?q= ) has been fixed in 1.0.2 release.
Nevertheless, you still have some configuration issues.
1) Don't put the zip file (sources) into WEB-INF/lib but the JAR one ! (binaries)
If you use Maven, see the Download section of the github site (for projectId, artifactId and version), or you can get it manually here : https://github.com/tduchateau/DataTables-taglib/downloads (the latest version : for now : 1.0.2)
2) In your JSP :
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"; %>
Remove the ";" (semi-colon) ;)
Hope this helped.
PS : I've almost finished writing a POC for the taglib (Maven, Spring, Spring MVC, DataTables, DataTables-taglib).
I'll publish it ASAP on my blog and will make an announcement here ;)
Thanks for the tips now I can display data in the table. I am using bootstrap.min.css but the display isnt nice. Show and Search box is in two lines and also showing entries and previous-next is also in two lines.
http://twitpic.com/9rbq8m/full
Could you please suggest me how can I style this data table and how to make the columns adjustable.
Thanks and best regards,
Hiding Star.
I think the display issue is related to the DataTables.css which you didn't include in the JSP, did you ?
The taglib doesn't automatically import it. (why not a new feature..? :))
For the columns adjustment, you can use the headerStyle attribute of the column tag.
For instance : headerStyle="width: 10%;".
Regards,
Thibault.
Thanks again. I used boostrap.min.css downloaded from twitter. Where can I get DataTable.css for download ? or Can i develop one using standard .css syntax? Sorry I am very new to web application. I have more than 5 years of windows application development experience. But non for the web development. I have ability to read other people code and develop similar one. To start a new on from a scratch on my own is not possible at the moment. I just started developing JSP in May.
Regards,
Hidingstar.
In the DataTables zip you downloaded, you'll find the css file (jquery.dataTables.css) in the media\css directory.
Once your file is at the same place as other JS and CSS files, you'll need to add the following line in the JSP :
Note : I've just realized that I forgot to mention it in the site... :(
I'll update it tonight..
To conclude, in order to use DataTables with the Twitter's Bootstrap, you'll need :
Hope this helped !
Regards,
Thibault
My data table is working perfectly except for the column adjustment(which is not that important). Column tag means I need to download another tag library ? Thanks a lot for sharing this easy to use & very flexible data table (even for a starter like me).
Best regards,
Hidingstar.
You can adjust the column width with the native HTML attribute style.
e.g. :
...
With the taglib, you can do this :
It will produce the same above HTML code.
;)
PS : you especially have to thank Allan who is the author of DataTables. I just added an overlay on top of it ! :)
Regards,
Thibault.
Thanks again for answering very fast.
If it doesn't work, it's often for the following reasons :
1) td content is too long to stand in 10% of the total width, so the entire column get wider and your browser doesn't care of the width you set (sorry if I don't use the correct words... :/)
2) you set other column's width (before the one which bothers you) until there's not enough width for that one
3) well, for now, I don't see a 3rd one... :)
For the CSS adjustment (margin, padding and other lovely stuff), let me advise you to install the Firefox plugin "Firebug" which allows you to precisely inspect the HTML and CSS applied. You'll be able to see your changes on-the-fly and adapt the CSS accordingly to your changes. We (web developper who don't have any aptitude in design) usually use this. (or if you use Chrome, just right-click and "inspect element" to open the same tab as in Firebug).
Regards,
Thibault
I am also a starter with Jquery and JSP. I would like to have suggestion on the following issues.
1. Is there anyway that I can input hyperlink into the datatable cell content ?
For example, StudentID column has the following data. S123456 , S23456 , etc.
If I click on the S123456, it will lead me to .
2. Is there anyway of displaying the cell content different from database ?
For example, in database, St_Res_Status is 1 or 2 or 3
But If the value from database is 1, I want to display Citizen. Then 2 for Permanent Residence and 3 for Foreigner respectively.
Thanks & best regards,
Yuri
$(document).ready(function()
{
oTable = $('#studentTable').dataTable();
oTable.$('tr').dblclick( function ()
{
var position = oTable.fnGetPosition(this);
var sID = oTable.fnGetData(position)[0];
document.location.href = "editStudent.jsp?StudentID=" + sID;
} );
} );
$(document).ready(function() {
var oTable = $('#studentTable').dataTable();
// Filter to 'Webkit' and get all data for
oTable.fnFilter('');
//var data = oTable._('tr', {"filter": "applied"});
});
I don't know why, if I do not include the second function, a warning message of re-initiating datatable failed.
1) Everything inside the body of the will be evaluated.
So you can put anything :
Spring tags
Struts tags
JSTL expressions
HTML code
...
2) Of course you can :)
This is the purpose of the dataObjectId attribute (of the table tag). This attribute makes each row's object available in the iteration loop.
You can access it with any JSTL (or JSTL-like) instructions.
e.g. :
Edit
assuming that :
* studentList is a Collection of Student
* id is an attribute of the Student Java object.
3) Actually, you don't need to re-initialize the table at all. The taglib makes it automatically.
Just have a look at the generated source code, you'll see that you already have something like :
$(document).ready(function() {
oTable_studentTable = $('#studentTable').dataTable(oTable_studentTableParams);
}
If you need to add custom configuration for your table, take a look at the extraConf or even extraFile attribute (http://tduchateau.github.com/DataTables-taglib/features.html)
Hope this helped !
Regards,
Thibault
Passing parameter to Editing page become a piece of cake after your explanation !
I am still struggling with runtime column resizing. I tried jquery.kiketable.colsizable. Sadly, it didn't work out well for me.
For ExtraConfiguration, I got lost in the way.How to pass '#cityChoice' from datatable? I do not understand how this js function links to datatable. var city is used back somewhere in datatable ? Where can I find the documents?
$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
var cityChoice = $("#cityChoice").val();
var city = aData[3];
if ( cityChoice == "" || cityChoice == "All")
{
return true;
}
else if ( cityChoice == city)
{
return true;
}
return false;
}
);
$("#cityChoice").change( function() { oTable_personTableExtraConf.fnDraw(); });
I really appreciate your time and kind response.
Best regards.
Yuri
I didn't know jquery.kiketable.colsizable. I've just looked at it and it seems amazing ! :)
Well, I noticed it needs et some other HTML code in the TH cell.
Unfortunately, you can't use this plugin with the taglib for the moment but I know now my first challenging new features :)
For extraConf and extraFile, the documentation is not only very clear but in addition I was wrong!! I definitly have to spend more time on site update.. =/
The extraConf attribute is useful when you need some DataTables features that are not embedded in the taglib. It's like an "opened door". The JSON object written in the JS file will be merged with the default DataTables configuration **before** initializing the table.
The extraFile attribute is very similar but in the JS file pointed by this attribute, you can write any Javascript code, not necessary related to DataTables. And the importante difference is that the JS will be interpreted **after** the table initialization.
In your case, when you want to bind a new filter to your table, you'll have to do it after the table initialization in an extra file.
So, how it works :
1) In a separate JS file, called example.js, paste the following code snippet :
-----------------
$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
var cityChoice = $("#cityChoice").val(); // <== get the city you chose in the select
var city = aData[3]; // <== 3 is the index of the column where you have the city is displayed
if ( cityChoice == "" || cityChoice == "All")
{
return true;
}
else if ( cityChoice == city)
{
return true;
}
return false;
}
);
$("#cityChoice").change( function() { oTable_personTableExtraConf.fnDraw(); });
-----------------
In the code above :
* cityChoice is the id you passed to the select element. (<< EDIT)
* oTable_personTableExtraConf is the name of the Javascript object containing the DataTables object. The format is : oTable_[htmlTableId]. (the example in the github site is wrong :(( I was definitly very tired when I pushed to GitHub..)
* the JQuery change() function means as soon as you change a value in the select (cityChoice), it will re-draw the table. That's how it's linked to DataTables.
2) Assuming that example.js is deployed in the WEBAPP_ROOT_DIR/js directory, you'll have the following tag configuration :
...
And that's all :)
TODO :
* if you don't pull the request for the "jquery.kiketable.colsizable" integration on github, I'll do it myself :)
* site update for clearer documentation (and without mistakes...)
Anyway, thanks for your feedback !
Regards,
Thibault
Sorry for my late thank you. I went to a remote place at which there is no wireless access. I will try out with the examples that you mentioned here. I have tried to use a few datatable manipulations. Adding scrolls, trying to export to excel, pdf,csv and of course column resizing. Everytime I tried to
use
$(document).ready(function() {
var oTable = $('#studentTable').dataTable( {
"sScrollY": "200px",
"bPaginate": false
} );
$(window).bind('resize', function () {
oTable.fnAdjustColumnSizing();
} );
} );
and
$(document).ready( function () {
$('#example').dataTable( {
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": '<"H"Tfr>t<"F"ip>',
"oTableTools": {
"aButtons": [
"copy", "csv", "xls", "pdf",
{
"sExtends": "collection",
"sButtonText": "Save",
"aButtons": [ "csv", "xls", "pdf" ]
}
]
}
} );
} );
I received the following Warning message.
DataTables warning(table id='studentTable'): Cannot reinitialise datatable.
To retrieve the DataTables object for this table,pass no arguments or see the docs for bRetreve and bDestroy
When I used with example page without JSTL, it worked fine. Could you please suggest any work around ?
Thanks and Regards,
Yuri
I as told you before, if you use the taglib, your table is already initialized. (the taglib generates HTML and Javascript code)
I think that's why you have the "cannot reinitialize" message.
If you want to add more configuration to your table, you can use the extraConf attribute.
Take a look at the reference (http://tduchateau.github.com/DataTables-taglib/reference.html), a paginate attribute is already available in the table tag.
And remember : if you need a reference to your table in the extraConf (or extraFile) attribute, you can use the global Javascript variable that has been created by the taglib :
oTable_[htmlTableId]
where [htmlTableId] is the value you passed in the htmlTableId table tag attribute.
To sum up, if you want to make the three above code snippets work, you need :
1) to put "sScrollY": "200px" in a separate file and use the extraConf attribute
(paginate can be used directly in the taglib)
2) to put the fnAdjustColumnSizing() in a separate file and use the extraFile attribute
3) to put all the stuff in the same file mentioned in 1) :)
Let me know if it worked ! ;)
Regards,
Thibault
Sorry I didn't get what you meant at the first time. English isn't my first language and my limited knowledge in web application also doesn't help at all. Here is my code
a href="requestEdit.jsp?Reqcode=${row.reqCode}">View/Edit
The Content of extrafunction.js is as follow.
$("#requestTable").dataTable({
"sScrollY": 500,
"sScrollX": "100%",
"sScrollXInner": "110%",
"sScrollYInner": "110%",
"fnInitComplete": function () {
this.fnAdjustColumnSizing();
this.fnDraw();
}
});
The table is still showing, but all the styles are gone and I couldn't see Scrolls also. :( . Sorry to keep troubling you.
Thanks and regards,
Yuri
The content of the file pointed by the extraConf attribute must be a JSON formatted string.
So, try to put the following lines in your extrafunction.js file :
{
"sScrollY": 500,
"sScrollX": "100%",
"sScrollXInner": "110%",
"sScrollYInner": "110%",
"fnInitComplete": function () {
this.fnAdjustColumnSizing();
this.fnDraw();
}
}
Regards,
Thibault
thanks for sharing you taglib :)
i'm having problem with setting fnServerParams function. This is my additional config (i'm using extraConf param from you taglib):
[code]
{
"sScrollY": "300px",
"sScrollX": "100%",
"sScrollXInner": "150%",
"bScrollCollapse": true,
"bPaginate": true,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "/srv/some/address",
"sServerMethod": "POST",
"fnServerParams": function (aoData) { aoData.push({ "page": 1 }) }
}
[/code]
but instead of additional param 'page 1', 'undefined undefined' is sent in POST params...
As you can see in the documentation example for fnServerParams you need to set the 'name' and 'value' properties for the value object.
Allan
Can't agree more :)
For information, a new release is coming, with more Datatables embedded configuration and more extra features.
Stay tuned ! ;)
Have you considered expanding your JSP tag-lib into a data table editor?
Dan Schwartz
I just took a quick look at it and after a 10s reflexion, my first reaction is : why not :)
The only "annoying" thing is that the Editor needs to be purchased to access the full documentation, which is capital to achieve this kind of feature.
Anyway, don't hesite to pull your (huge !) request in Github. I'll be able soon to spend more time on it.
Thanks !
Regards,
Thibault.
I think that a JSP tag library for a data table editor would be a marketable product, so worth the initial investment to buy a copy of Allan's editor.
I will post a request for this on Github.
If you ever get it working, please let me know: dan@danielgschwartz.com. I'd be happy to pay a license fee for a well-functioning product.
Thanks,
Dan
I'm not familiar with Github. I went to http://tduchateau.github.com/DataTables-taglib/,
but it's not clear to me what you are asking me to do? How does one "pull a request" on that website. Am I supposed to create an account or pay a fee?
Dan
Actually I made a mistake. In this case, you can just add a subject (with the "enhancement" label) in the issues section (=> https://github.com/tduchateau/DataTables-taglib/issues)
Thanks a lot!
Okay, I just posted a request. Good luck with it.
Dan