Bootstrap Popover Only Working on First Page of Results

kraftomatic

Hey Allan,

I know this lies outside of DataTables for the most part, but I was hoping this was an easy fix for something I'm missing. I have the Bootstrap popover function added to my table, which works great. The only issue is that it doesn't work past the first page of results. However I have a tooltip function that works no matter what page I'm on. The functions look like:

$(function(){
// tooltip demo
$('.sort_heading').tooltip({
selector: "a[rel=tooltip]"
})
})

$(document).ready(function(){
$('.popover-test').popover()

// popover demo
$("a[rel=popover]")
.popover()
.click(function(e) {
e.preventDefault()
})

});

Any help would be greatly appreciated.

Thanks.

allan

Have a look at the top FAQ: http://datatables.net/faqs#events :-)

Allan

kraftomatic

Thanks Allan. I can quite tell whether pre or post would be preferable. Is there a certain scenario where one would work and the other really wouldn't?

Thanks.

kraftomatic

Allan - I added fnGetNodes in this manner, but it's still having the same problem ..

$(document).ready(function() {

var table = $('#example').dataTable( {
"aaSorting": [[ 1, 'asc' ]],
"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page"
}
} );

// apply popover
$(table.fnGetNodes() ).popover()
$("a[rel=popover]").popover().click(function(e) {
e.preventDefault()
})
} );

I've tried a couple different scenarios of the code, all with the same result. Is there something I'm missing?

Thanks.

allan

[code]
$("a[rel=popover]", table.fnGetNodes()).popover().click(function(e) {
[/code]

Possibly it's easer to understand if you use the $ API method ( http://datatables.net/ref#$ ):

[code]
table.$("a[rel=popover]").popover().click(function(e) {
[/code]

Allan

kraftomatic

That helps a great deal, thanks Allan.

sarabob

Woo, thanks for this!

I had tried using the draw callback but to no avail - this works a treat though. Thx kraftomatic for the preventDefault, too :-)

A few problems trying to work out which code to use (missed the var table bit etc); I ended up with

[code]
$(document).ready(function() {
var table = $('#example').dataTable( {
"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page"
}
} );
table.$("a[rel=popover]").popover().click(function(e) {e.preventDefault();});
});
[/code]
(in case anyone else comes here & wants a simple cut & paste solution :-))

JeremyLeipzig

this thread was a lifesaver. thank you all!

luckvery

Ah! If only i'd found this thread 3 hours ago!

Super helpful!

DinahG

Thank you to kraftomatic, allan and sarabob !

gentunian

I got that tooltip/popover breaks my table layout. Can we post images? I think I got moderated last time i tried to comment with images...

gentunian

Ok, I'll try... here's a shot: http://i.imgur.com/Uf71Fa8.png

When I 'hover' on the cell the layout is moved. I've created an example that shows that column data is moved too: http://live.datatables.net/ujizeq/2

Nevermind. I don't know whats wrong with my head. The solution is in this post by using 'table.fnGetNodes()' as selector.

My problem was that source is from AJAX and I was attaching 'td's individually after AJAX was complete.

Edit: My head is wrong again: http://live.datatables.net/ujizeq/3

[code]$(table.fnGetNodes()).children('td').popover();[/code] behaves erroneously. Just for the record, I know this has nothing to do with DataTables.

Here is the answer: http://stackoverflow.com/questions/13268361/bootstrap-tooltip-and-popover-add-extra-size-in-table

Basically, this will work, in my AJAX complete() for future references:

[code]
"fnServerData": function ( sSource, aoData, fnCallback ) {
$.getJSON( sSource, aoData, function (json) {
// I don't want to modify my JSON data. Adapt it.
fnCallback({ "aaData": json });
}).complete( function(){

// The reference to the DataTable Object
var table = $('#table_id').dataTable()

// My description column has {"sClass": "description_tooltip"}
$( table.fnGetNodes() ).children('td.description_tooltip').popover({
// This is what matters!!
container: "body",
animated: true,
// Just for testing...
title: $(this).text,
placement: "bottom",
trigger: "hover"
});
});
}
[/code]

Regards

flaviosantana

Allan thanks for the solution presented, helped me werent.
"Allan obrigado pela solução apresentada, me ajudou muto."

[code]table.$("a[rel=popover]").popover().click(function(e) {[/code]

mwouters

Why is this not working for me?

Ajax update of table after select dropdown is changed:

[code]
$("#year").change(function () {
var id = $(this).val();
if(id != ""){
var oTable = $('.datatable').dataTable();
oTable.fnReloadAjax(dir_pre + 'ajax/opstelling.php?do=getPresenceDatatable&filter='+ id);
$("a[rel=popover]", oTable.fnGetNodes()).popover({
placement: "top",
html: true,
}).click(function(e) {e.preventDefault(); });
}
return false;
})
[/code]

My table after dynamic load:

[code]

Some test

[/code]

Initially I also load the table with dynamic data, and then it works using:
[code]
var oTable = $('.datatable').dataTable({
"bProcessing": true,
"bDeferRender": true,
"sAjaxSource": '<?php echo $dir_pre;?>ajax/opstelling.php?do=getPresenceDatatable',
"sPaginationType": "bs_full",
"aaSorting": [],
"fnInitComplete": function() {
$('.popoverthis').popover({
placement: "top",
html: true,
});
}
});
[/code]

Thanks a lot!

M.

emptyfish

What I have discovered is that performance in IE is terrible (I have roughly 990 records being loaded via Ajax). If you set bDeferRender, then the peformance is fine, but the above solution stops working - as before, you only get the popovers in the first page of results. Has anyone by chance figured out how to overcome this? Thanks in advance...

allan

Use fnCreatedRow callback to add events to rows as they are created.

Allan