Datatable fnAddData - class and tooltip not working
Datatable fnAddData - class and tooltip not working
Hi All,
I have a table
[code]
Gfall
Description
Actions
AAA
Full price for gum?!
[/code]
class checkbox and the tooltip work fine. Now I am loading with Ajax some data, and use the fnAddData for adding. Works fine, but class and tooltip dont work. here is the code :
[code]
tmp1 = ' ';
tmp2 = res.DATA[i][0] + ' - ' + res.DATA[i][1];
tmp3 = res.DATA[i][2];
tmp4 = ' ';
[/code]
[code]
$('#datatable_example').dataTable().fnAddData( [
tmp1
, tmp2
, tmp3
, tmp4
] );
[/code]
Any Ideas?
I have a table
[code]
Gfall
Description
Actions
AAA
Full price for gum?!
[/code]
class checkbox and the tooltip work fine. Now I am loading with Ajax some data, and use the fnAddData for adding. Works fine, but class and tooltip dont work. here is the code :
[code]
tmp1 = ' ';
tmp2 = res.DATA[i][0] + ' - ' + res.DATA[i][1];
tmp3 = res.DATA[i][2];
tmp4 = ' ';
[/code]
[code]
$('#datatable_example').dataTable().fnAddData( [
tmp1
, tmp2
, tmp3
, tmp4
] );
[/code]
Any Ideas?
This discussion has been closed.
Replies
Allan
thx for ur answer. Unfortuantely it's not working. I added the code same as in your example at the end of the definition.
[code] /* Init DataTables */
var oTable = $('#datatable_example').dataTable();
/* Apply the tooltips */
$( oTable.fnGetNodes() ).tooltip( {
"delay": 0,
"track": true,
"fade": 250
} );
[/code]
I have to say, the new Rows are read with an Ajax service and populated line 10 seconds later, cause ther server needs 10 seconds (special constellation). During this time the table is empty. I also tried with server-side script-sample, but still the same result, Class and tooltip given back in JSON format is does not be considered.
JSON-Result from Server-Code:
[code]
{"sEcho": 0
,"iTotalRecords": 10
,"iTotalDisplayRecords": 10
, "aaData": [
[" ",
"M1A - 4513",
"ASHMORE ",
" "
]
,
[" ",
"M1A - 4512",
"ASHMORE ",
" "
]
,
[" ",
"MAV - 25389",
"2.6881 % INTESA SANPAOLO ",
" "
]
] }
[/code]
the [quote]class='checkbox'[/quote] from the label is not considered, and it seems, that also the other tags are not considered.
Corrado
if I use title="tooltip", the tooltip is showing up. The problme is, the [quote]rel='tooltip' data-placement='left' data-original-title=' Edit '[/quote] does not work, after loaded with server-side script. The [quote] [/quote] is also not working, once loaded with server-sode script. It looks like, inside tags are not considered after loading with server-side script. I tried also to do e redraw with simple [quote]$('#datatable_closeBsc').dataTable()[/quote]. Doesn't change.
Thanks for picking up the DataTables support option.
With server-side processing, you would likely need to call the tooltips after each draw of the table, since the nodes int he table's body are being recreated for each draw (that's how server-side processing works).
You would do that with fnDrawCallback:
[code]
// In your DataTables' initialisation object
fnDrawCallback: function () {
$( this.fnGetNodes() ).tooltip( {
"delay": 0,
"track": true,
"fade": 250
} );
}
[/code]
If you are doing it with Ajax loading, but without server-side processing, you would use fnInitComplete, so it runs once only - when the table's data has loaded:
[code]
// In your DataTables' initialisation object
fnInitComplete: function () {
$( this.fnGetNodes() ).tooltip( {
"delay": 0,
"track": true,
"fade": 250
} );
}
[/code]
After fnAddData, depending upon the tooltip control you are using, you very likely should be able to just use the function as expected.
Are you able to link me to a page showing where you are having the problem? That will let me see exactly what is happening and help resolve it.
Regards,
Allan
no I can't, cause is inside Company, cannot acces from outside. I added the code above, still does not change the style. But, I use the Metro Bootstrap and there is a sample with fixed table. All I did is, changing the static table to dynamic with following response (linke to bootstrap
download link : http://www.marinaro.ch/metro/themeforest-3408505-start-metro-ui-responsive-admin-template.zip
In there, i used tables_static.html and adjusted it to 4 columns
[quote]
Open Business Case(s) for #Session.workUserU#
X
Sel
Gfall
Status
Description
Actions
[/quote]
My Javascript is:
[quote]
/**** Specific JS for this page ****/
// Datatables
$(document).ready(function() {
var dontSort = [];
$('#datatable_openBsc thead th').each( function () {
if ( $(this).hasClass( 'no_sort' )) {
dontSort.push( { "bSortable": false } );
} else {
dontSort.push( null );
}
} );
$('#datatable_openBsc').dataTable( {
"sDom": "<'row-fluid table_top_bar'<'span12'<'to_hide_phone' f>>>rti<'row-fluid control-group full top' <'span4 to_hide_tablet'l><'span8 pagination'p>>",
"aaSorting": [[ 1, "asc" ]],
"bPaginate": true,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "srvScript/getBusCase.cfm?func=datatable_openBsc",
"aoColumns": [
{ "mData": "Sel" },
{ "mData": "Gfall" },
{ "mData": "Status" },
{ "mData": "Description" },
{ "mData": "Actions" },
],
"fnInitComplete": function(oSettings, json) {
$( this.fnGetNodes() ).tooltip( {
"delay": 0,
"track": true,
"fade": 250
} );
},
"sPaginationType": "full_numbers",
"bJQueryUI": false,
"aoColumns": dontSort,
} );
$.extend( $.fn.dataTableExt.oStdClasses, {
"s`": "dataTables_wrapper form-inline"
} );
$(".chzn-select, .dataTables_length select").chosen({
disable_search_threshold: 10
});
// In your DataTables' initialisation object
_fnInitComplete: function (oSettings, json) {
$( this.fnGetNodes() ).tooltip( {
"delay": 0,
"track": true,
"fade": 250
} );
}
});
[/quote]
the sAjaxSource": "srvScript/getBusCase.cfm?func=datatable_openBsc is the service I call, but here is the response...
[quote]
{"sEcho": 0
,"iTotalRecords": 4
,"iTotalDisplayRecords": 4
, "aaData": [
[" ",
"GSO - 2120",
"IN BEARBEITUNG",
"CERRO RESOURCES NL",
" "
]
,
[" ",
"UDV - 38981",
"None",
"AKT. FIRSTSERVICE CORP",
" "
]
,
[" ",
"MAV - 24523",
"None",
"ANT. WISDOMTREE TRUST",
" "
]
,
[" ",
"MAV - 24700",
"None",
"ANT. THREADNEEDLE",
" "
]
] }
[/quote]
The other thing is that sEcho (in your JSON response) is 0 - that is invalid. It should never be 0 :-). From the documentation ( http://datatables.net/usage/server-side ):
> sEcho: An unaltered copy of sEcho sent from the client side. This parameter will change with each draw (it is basically a draw count) - so it is important that this is implemented. Note that it strongly recommended for security reasons that you 'cast' this parameter to an integer in order to prevent Cross Site Scripting (XSS) attacks.
DataTables never sends 0, which is why it should never be 0. It starts at one, and increments for each draw.
Regards,
Allan
thx for your answer. It still does not the job. Any other suggesions?
The function is called after the data is loaded, I put en alert to check that.
But, the json in is undefined
"fnDrawCallback": function(oSettings, json) {
Am I mising something?
-> I changed the sEcho aswell, forgot to increment.
Allan
I thought sEcho was to remain unaltered. Is that not the case?
* http://twitter.github.com/bootstrap/javascript.html#tooltips
* Inspired by the original jQuery.tipsy by Jason Frame
* ===========================================================
* Copyright 2012 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
I just found this in the net.. It looks like it is a IE problem...
[quote]http://forum.jquery.com/topic/jquery-css-styles-being-lost-in-ie-after-ajax-form-submission[/quote]
> $( this.fnGetNodes() ).tooltip( {
To:
[code]
$( 'a', this.fnGetNodes() ).tooltip( {
[/code]
and that will hopefully do the business for you.
If not, you can e-mail me: allan AT this domain.net :-)
Thanks
Allan
[code]
$( 'a, label', this.fnGetNodes() ).tooltip( {
[/code]
Regards,
Allan
I tried, no change. The css-style class for label and input is not changing.
My change was
[quote]$( 'a, label, input', this.fnGetNodes() ).tooltip( {[/quote]
If I put tooltip's style in label and input (same as in the 'a'), the style for tooltip works.
I guess, another call other the .tooltip has to be made to refresh input-tag oder label-tag
please advice.
Allan
and are defined with the class 'checkbox', which are not considered after loaded the data from the server. These Tags has nothing to do with tooltip. Just the CSS-Style in Input and Label Tag are not working.
I'm afraid that without a link to the page you are working on, I really can't say why the styles aren't being applied. the way I'd approach it myself is to use the Chrome developer tools (or Firebug if you use Firefox) and 'inspect' the element to see what classes are applied to it. Comparing the elements that don't work, to those that do will show why the difference is and why there is a difference.
Regards,
Allan
But now, it works. Anyway, the tooltip part you helped me a lot, thx so far.
Cheers
one for tooltip (tip from your side)
one for uniform input, text and label which in this case is:
$("input, textarea, select, button").uniform();
This case may be closed, many thanks for assistance.
Regards,
Allan
Can you please point me to the source code with the complete demo to display tool-tip on any cell of the column using server-side?
Thank you,
San