CODEWITHSUNDEEP
javascriptjquerypaginationdatatables
user5991491
user5991491

Reputation:

Tooltip does not work with pagination on datatables

How can I get my tooltip being displayed when using pagination within the datatable plugin? I am using the plugin protip in connection with datatables to display tooltips, when text inside a column is too long. The tooltips plugin already works with the following snippet:

//Datatable Setup
jQuery(document).ready(function($) {
var table = $('#irp-table.raab').DataTable({
    "columnDefs": [
        { visible: false, targets: 2 },
        { className: 'mdl-data-table__cell--non-numeric', targets: [0, 1]}
    ],
    "order": [[ 0, 'asc' ]],
    "displayLength": 25,
    "drawCallback": function ( settings ) {
        var api = this.api();
        var rows = api.rows( {page:'current'} ).nodes();
        var last=null;

        api.column(2, {page:'current'} ).data().each( function ( group, i ) {
            if ( last !== group ) {
                $(rows).eq( i ).before(
                    '<tr class="group"><td colspan="3">'+group+'</td></tr>'
                );

                last = group;
            }
        } );
    }
} );

//Initialize ToolTip
jQuery(document).ready(function($) {
$.protip();
});

//ToolTip hover behaviour
jQuery(document).ready(function($) {
$('td').bind('mouseenter', function () {
  var $this = $(this);
    if (this.offsetWidth < this.scrollWidth) {

      var text = $this.text();
      $this.attr("data-pt-title", text);
      $this.protipShow()
    }
}).mouseenter();
});

However it just works on the first site for the case I am using pagination on my datatable and navigate to another site.

Upvotes: 2

Views: 2571

Answers (1)

Gyrocode.com
Gyrocode.com

Reputation: 58880

SOLUTION

You need to use drawCallback to initialize tooltips every time DataTables redraws the table. This is needed because TR and TD elements for pages other than first are not present in DOM at the time first page is displayed.

Also the call to mouseenter() is not needed.

For example:

"drawCallback": function ( settings ) {
   var api = this.api();

   // ... skipped ...

   $.protip();

   $('td', api.table().container()).on('mouseenter', function () {
      var $this = $(this);
      if (this.offsetWidth < this.scrollWidth) {
         var text = $this.text();
         $this.attr("data-pt-title", text);
         $this.protipShow();
      }
   });
}

LINKS

See jQuery DataTables: Custom control does not work on second page and after for more examples and details.

Upvotes: 1

Related Questions