Dynamicaly created table with Tooltips Post Initialised

netman

First of all i'd like to thank you for this great ALL-IN-ONE (Regarding Data tables) app. I've manage to get what i needed in less than 1/2 hour, having in mind that that i'm a complete "noob" with JS or/any other scripting/programming language. Anyway, to my point.

Here after you may find the code i'm using in order to create a table. As you can (Alan) easily observe (By reading the code), i've read most (If not all) of your examples.The problem is that i can't get the post Initialised Tooltips to work. Keep in mind that i'm not using the jquery.Toooltip plug-in but the clueTip (I may also try qtip or ... ... ...).
Here's the code, but before that, once more keep in mind that i'm a complete "noob" so if there will be any answer, please be it KISS (Keep It Simple for the Stupid ;-) )
In the next piece of code you will see that i'm trying to initialise the ToolTip by using the class property of the href (I don't even know if what i'm writing is correct)
[code]
var cTips = function () {
$('a.clue').cluetip({ cluetipClass: 'rounded', dropShadow: false, sticky: true, ajaxCache: false, arrows: true});
};
var initMatrix;


$(document).ready(function() {
$('#dynamic').html( '' );
initMatrix = $('#2bsorted').dataTable( {
"sAjaxSource": 'json_source.json',
"aoColumns": [
{ "sTitle": "City/Town" },
{ "sTitle": "Browser" },
{ "sTitle": "Platform" },
{ "sTitle": "Temp ℃", "sClass": "center" },
{
"sTitle": "Grade",
"sClass": "center",
"fnRender": function(obj) {
var sReturn = obj.aData[ obj.iDataColumn ];
if ( sReturn == "A" ) {
sReturn = "Attika";
}
return sReturn;
}
}
],
"bJQueryUI": true,
"bProcessing": true,
"sPaginationType": "full_numbers",
"bStateSave": true,
"aaSorting": [[ 1, "asc" ], [ 0, "asc" ] ],
"oLanguage": {
"sLengthMenu": "???????????? _MENU_ ???????? ??? ??????",
"sZeroRecords": "??? ???????? ???????? - ??????????",
"sInfo": "???????????? _START_ ??? _END_ ??? _TOTAL_ ????????",
"sInfoEmtpy": "???????????? 0 ??? 0 ??? 0 ????????",
"sInfoFiltered": "(??????????? ??? _MAX_ ???????? ????????)"
}
} );

initMatrix.fnGetNodes();
cTips();
} );

[/code]

And yes i've also used your "Visual Event" FF Plug-in that shows no event (i.e mouseover) attached to the table cells in question.
Regards
Steve

P.S Sorry for the "???????" in oLanguage, these are just Greek Characters. I thought the forum was utf-8 enabled.

allan

Hi netman,

Thanks for your post and providing all this information/details :-). The principle of what you've done is correct - but there is a 'trick' to it when you are using "sAjaxSource". When loading data using Ajax, you need to remember that it is asynchronous. As such you get the following ordering:

1. Start DataTables initialisation
2. Send XHR for Ajax data
3. Add tooltip events
4. Insert data from XHR

But what you want is for 3 and 4 to change places. To do this, put your tooltips creation code into fnInitComplete() which is called when the table's data has been fully loaded for the server and DataTables as constructed the required DOM nodes: http://datatables.net/usage/callbacks#fnInitComplete

Hope this helps,
Allan

ps. I thought the forum was UTF-8 as well! I'll check that out - bit poor that it's not... :-)

rhiggins

Allan,

Thanks for that, I had missed the fnInitComplete callback. This helped alot.....

netman

Allan,
Yes !!!
That was the answer. It worked.

Here is the code ... just in case there's another "noob" like me:
[code]


$(document).ready(function() {
$('#dynamic').html( '' );
$('#2bsorted').dataTable( {
"sAjaxSource": 'json_source.json',
"aoColumns": [
{ "sTitle": "?????/????" },
{ "sTitle": "Browser" },
{ "sTitle": "Platform" },
{ "sTitle": "??????????? ℃", "sClass": "center" },
{
"sTitle": "Grade",
"sClass": "center",
"fnRender": function(obj) {
var sReturn = obj.aData[ obj.iDataColumn ];
if ( sReturn == "A" ) {
sReturn = "??????";
}
return sReturn;
}
}
],
"fnInitComplete": function() {
$('a.clue').cluetip({ cluetipClass: 'rounded', dropShadow: false, sticky: true, ajaxCache: false, arrows: true});
},
"bJQueryUI": true,
"bProcessing": true,
"sPaginationType": "full_numbers",
"bStateSave": true,
"aaSorting": [[ 1, "asc" ], [ 0, "asc" ] ],
"oLanguage": {
"sLengthMenu": "???????????? _MENU_ ???????? ??? ??????",
"sZeroRecords": "??? ???????? ???????? - ??????????",
"sInfo": "???????????? _START_ ??? _END_ ??? _TOTAL_ ????????",
"sInfoEmtpy": "???????????? 0 ??? 0 ??? 0 ????????",
"sInfoFiltered": "(??????????? ??? _MAX_ ???????? ????????)"
}
} );
[/code]

Best Regards
Steve

netman

Hi Allan .. again.
Well ... it ... almost worked! What do i mean?! I mean that i'm able to use/apply tooltips but ONLY at the FIRST PAGE (10 rows) of the table!!!
What am I missing (again :-) ) ?!

Regards
Steve

netman

OK, found it.
I removed the fInitComplete(). I'm using the fnDrawCallback() and it works perfectly.
Is there anyone (Allan) who can explain me why ?! :-)

Regards
Steve

allan

Hi Steve,

I certainly can - the reason is that with fnInitCallback, the events are only added to the visible elements in the DOM (DataTables removed the unused rows), hence only the first 10 rows will have events added to them. However, with fnDrawCallback() the events are always added on each draw. Actually, this can be bad... for example if you click page forward then page back, the rows on your first page will now have two events assigned to them. Forwards/back again and you'll have three events on them, etc... Have a look at this example for how to do events, post initialisation, this will work inside fnInitCallback as well - which I think you'll need for this case: http://datatables.net/examples/advanced_init/events_post_init.html

Regards,
Allan