CODEWITHSUNDEEP
jquery-pluginstwitter-bootstrapdatatablespopover
afranco
afranco

Reputation: 181

Twitter Bootstrap Popovers not working after filtering on Datatables

I've got a datatable with pagination and I've got anchors with popovers generated for each row but popovers are only shown on first results page. While filtering results or moving to another results page, popovers don't appear.

I wonder if someone already had the same problem and what I can do to fix this issue.

Upvotes: 3

Views: 3609

Answers (3)

JonV
JonV

Reputation: 523

(Bootstrap 4, DataTables 1.10.25)

In my situation popovers worked on the first page - but NOT subsequent pages (page number > 1).

For my application this code allowed popovers to work on subsequent pages:

const rows = $("#tbl").dataTable().fnGetNodes();
$(rows).find('[data-toggle="popover"]').popover({ html: true, trigger: 'hover', placement: 'bottom', content: function () { return $(this).data('content') ; } });

Upvotes: 0

Igor Parra
Igor Parra

Reputation: 10348

An alternative to ditscheri 's solution is using fnDrawCallback: 

"fnDrawCallback": function ( oSettings ) {
  $(".js_popover").popover({ html:true });
  // $("[data-toggle=popover]").popover({ html:true });
},

Upvotes: 4

ditscheri
ditscheri

Reputation: 579

The DataTables Plugin destroys and rebuilds the DOM elements on filtering/sorting. You might get along with something like this:

var myTable = $('#myTable').dataTable();
/* Apply the popover using the API */
myTable.$("[id^=popover-]").popover();

Here's some documentation on it: http://www.datatables.net/release-datatables/examples/advanced_init/events_post_init.html

If it doesn't help, you might want to provide a basic example of you code.

Upvotes: 3

Related Questions