DataTables

Hi HidingStar !

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 ;)

Hi,

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.

Don't worry, everyone needs to begin (web) one day ;)

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 :
<link href="css/jquery.dataTables.css" rel="stylesheet">

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 :

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/jquery.dataTables.css" rel="stylesheet">

<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.dataTables.min.js"></script>

Hope this helped !

Regards,
Thibault

Nearly there ! :)

You can adjust the column width with the native HTML attribute style.
e.g. :

<table>
<thead>
<th style="width: 10%;">
</thead>
...
</table>

With the taglib, you can do this :

<datatables:table ...>
<datatables:column headerStyle="width: 10%;" ... />
</datatables:table>

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.

Tables are usually a bit tricky...
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

Hi from Singapore.

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 <a href= "EditStudent.jsp?ID=S12345">.

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

Hi from France, :)

1) Everything inside the body of the <datatables:column> 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. :

<datatables:table htmlTableId="studentTable" data="${studentList}" dataObjectId="row">
<datatables:column title="Action">
<a href="EditStudent.jsp?ID=${row.id}">Edit</a>
</datatables:column>
</datatables:table>

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

You're welcome :)

I didn't know jquery.kiketable.colsizable. I've just looked at it and it seems amazing ! :)
Well, I noticed it needs <colgroup> 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 :
<datatables:table ... extraFile="WEBAPP_ROOT_DIR/js/example.js">
...
</datatables:table>

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

Hi 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

Hi 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

i'm having problem with setting fnServerParams function

As you can see in the documentation example for fnServerParams you need to set the 'name' and 'value' properties for the value object.

Allan

oopss..I missed that :( thanks for help!

Hi Dan,

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.

Hello again, Thib,

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

Hi Thib,

Okay, I just posted a request. Good luck with it.

Dan

Hi Thib,

I am using data tables in jsp. It is working fine , may I use editable row DataTables in jsp?

Hi Thib,

I have to use editable row in jsp , on change of row it should submit the data through ajax.
I want to use jquery.
Any suggestion ?
Thank you!

Regards,
Sachin

i want editable gridview in jsp....please

This is moving away from the original topic. Closing.