Bootstrap Popover Only Working on First Page of Results
Bootstrap Popover Only Working on First Page of Results
kraftomatic
Posts: 78Questions: 13Answers: 0
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.
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.
This discussion has been closed.
Replies
Allan
Thanks.
$(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.
$("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
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 :-))
Super helpful!
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
"Allan obrigado pela solução apresentada, me ajudou muto."
[code]table.$("a[rel=popover]").popover().click(function(e) {[/code]
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.
Allan