Datatable tool tip not working in second page. Works only of first page

Question

I am having some weird issue where tool tip is working only on the page 1. If I click on the next page, I do not see any tool tip.

I am using jquery dataTable. My sample code is in jsfiddle : http://jsfiddle.net/agorur/3r54F/

Any ideas ?

var data = {
    "sEcho": 1,
        "iTotalRecords": 6416,
        "iTotalDisplayRecords": 5,
        "aaData": [{
        "0": 421367,
            "1": "Test1",
            "2": "NEW",
            "3": "Default",
            "4": "18 Aug 2011 20:27:12 GMT",
            "5": "TestBench",
            "6": "NA"
    }, {
        "0": 421368,
            "1": "Test2",
            "2": "NEW",
            "3": "Default",
            "4": "18 Aug 2011 20:27:12 GMT",
            "5": "TestBench",
            "6": "NA"
    }, {
        "0": 421369,
            "1": "Test3",
            "2": "NEW",
            "3": "Default",
            "4": "18 Aug 2011 20:27:12 GMT",
            "5": "TestBench",
            "6": "NA"
    }, {
        "0": 421370,
            "1": "Test4",
            "2": "NEW",
            "3": "Default",
            "4": "18 Aug 2011 20:27:13 GMT",
            "5": "TestBench",
            "6": "NA"
    }, {
        "0": 421371,
            "1": "Test5",
            "2": "NEW",
            "3": "Default",
            "4": "18 Aug 2011 20:27:13 GMT",
            "5": "TestBench",
            "6": "NA"
    },{
                     "0": 421372,
            "1": "Test1",
            "2": "NEW",
            "3": "Default",
            "4": "18 Aug 2011 20:27:12 GMT",
            "5": "TestBench",
            "6": "NA"
    }, {
        "0": 421373,
            "1": "Test2",
            "2": "NEW",
            "3": "Default",
            "4": "18 Aug 2011 20:27:12 GMT",
            "5": "TestBench",
            "6": "NA"
    }, {
        "0": 421374,
            "1": "Test3",
            "2": "NEW",
            "3": "Default",
            "4": "18 Aug 2011 20:27:12 GMT",
            "5": "TestBench",
            "6": "NA"
    }, {
        "0": 421375,
            "1": "Test4",
            "2": "NEW",
            "3": "Default",
            "4": "18 Aug 2011 20:27:13 GMT",
            "5": "TestBench",
            "6": "NA"
    }, {
        "0": 421376,
            "1": "Test5",
            "2": "NEW",
            "3": "Default",
            "4": "18 Aug 2011 20:27:13 GMT",
            "5": "TestBench",
            "6": "NA"
    },
                  {
        "0": 421377,
            "1": "Test4",
            "2": "NEW",
            "3": "Default",
            "4": "18 Aug 2011 20:27:13 GMT",
            "5": "TestBench",
            "6": "NA"
    }, {
        "0": 421378,
            "1": "Test5",
            "2": "NEW",
            "3": "Default",
            "4": "18 Aug 2011 20:27:13 GMT",
            "5": "TestBench",
            "6": "NA"
    }]
};

$(document).ready(function () {
    $('#events').dataTable({
        "bProcessing": true,
            "aaData": data.aaData,
            "bJQueryUI": true,
            "sPaginationType": "full_numbers",
            "aoColumns": [{
            "mData": "0"
        }, {
            "mData": "1"
        }, {
            "mData": "2"
        }, {
            "mData": "3"
        }, {
            "mData": "4"
        }, {
            "mData": "5"
        }, {
            "mData": "6"
        }, ]
    });


    $("#events tbody tr").each(function () {
        this.setAttribute('title', 'ToolTip');
    });
});

When you are clicking on next in paging section then try to add that attribute again... — Ram Singh, Apr 01 '13 at 05:25
http://stackoverflow.com/questions/7407111/detect-page-change-on-datatable review this\ — Ram Singh, Apr 01 '13 at 05:29

score 6 · Accepted Answer · answered Apr 01 '13 at 05:28

6

If I click on the next page, I do not see any tool tip.

that is because your are setting the title attribute in document.ready function... so this works for all the <tr> which is found in the document when document is ready and not for those which is in other page which comes up when you press next...

one way around is to make a function and call it in document.ready and next click... (though not an effiecient way..) (you may need this for prev click too)

try this

function toolTip() {
  $("#events tbody tr").each(function () {
    this.setAttribute('title', 'Ajay');
  });
}

$(document).ready(function () {
   ...
   toolTip(); //<--- call this when document is ready so it gets all tr
   $('.next').click(function () {
    toolTip();  //and in next click which gets for next tr
   });
});

fiddlehere

answered Apr 01 '13 at 05:28

bipen

36,319
9
49
62

next click is working fine. But if I have more number of pages, if I click on page 2,3,4 ... it is not working. Any idea ? – Think Apr 01 '13 at 19:45
Never mind I added the click event on $('.pagination'), seems to be working fine. Thank @bipen – Think Apr 01 '13 at 20:13
hey... was away.... late to see your comment anyways.. glad to sloved it yourself.. :).. cheers.... welcome... happy coding..:) – bipen Apr 02 '13 at 05:41

score 6 · Answer 2 · answered Sep 13 '16 at 14:24

6

A better solution

Include this code in your datatables

"drawCallback": function( settings ) {

                            toolTipShow(); // your tootlip function.

                        },

answered Sep 13 '16 at 14:24

Rahul

128
1
14

score 3 · Answer 3 · edited Jun 18 '18 at 19:21

3

Initialize tooltip every time the table is redrawn.

$('#your-datatable-id').on('draw.dt', function() {
     $('[data-toggle="tooltip"]').tooltip(); // Or your function for tooltips
});

edited Jun 18 '18 at 19:21

Gyrocode.com

57,606
14
150
185

answered Jun 18 '18 at 16:34

Jose

158
3
14

score 1 · Answer 4 · answered Aug 27 '13 at 15:23

I know this is a bit late but I've just run into a similar issue and this would be how my solution applies to your case.

DataTables has a $ function that works like the regular jQuery $ function except that it's limited to that instance of data table. http://datatables.net/api To select every row of a data table instance you'd do $('#id').dataTable().$('tr');

Using this the title attribute is assigned once instead every time the user clicks next. It also works over all pages of a data table.

For your implementation it'd work like this: (jsFiddle)

$(document).ready(function () {
    $('#events').dataTable({
        "bProcessing": true,
            "aaData": data.aaData,
            "bJQueryUI": true,
            "sPaginationType": "full_numbers",
            "aoColumns": [{
            "mData": "0"
        }, {
            "mData": "1"
        }, {
            "mData": "2"
        }, {
            "mData": "3"
        }, {
            "mData": "4"
        }, {
            "mData": "5"
        }, {
            "mData": "6"
        }, ]
    }).$("tr").each(function () {
        this.setAttribute('title', 'Ajay');
    });
});

score 1 · Answer 5 · answered Jun 25 '14 at 13:35

1

Just add following code in your js file or within your script.

$("a[rel='tooltip']").tooltip();

But don't include it in document.ready() function

answered Jun 25 '14 at 13:35

Piyush Balapure

1,023
9
14

score 0 · Answer 6 · answered Nov 08 '18 at 03:56

Solved the same issue with Bootstrap tooltip by,

"drawCallback": function (oSettings) {
                var api = this.api();
                api.rows( { page: 'current' } ).every( function () {
                    var rowData = this.data();
                    var sTitle = "Modified Count: " + rowData.ModifiedCount;
                    $(api.cell(this.index(), 1).node()).find('a').attr('title', sTitle).tooltip({ container: 'body' });
                } );
            }

Below code also shows tooltip but for first row it is not visible

$(api.cell(this.index(), 1).node()).attr('title', sTitle).tooltip({ container: 'body' });

So I added tooltip to <a> in 2nd cell solves the above issue too.

$(api.cell(this.index(), 1).node()).find('a').attr('title', sTitle).tooltip({ container: 'body' });

Note: api.cell(this.index(), 1) adds tooltip to 2nd cell

score 0 · Answer 7 · edited Nov 26 '21 at 19:51

0

I checked the class that the datatable's paging buttons had in common and created a function in jquery to start the bootstrap tooltip at the click event. The button's class is 'paginate_button'.

Therefore

        $(document).on('click', 'a.paginate_button', function() {
            $('[data-toggle="tooltip"]').tooltip();
        })

in root of a main script after doc load

edited Nov 26 '21 at 19:51

undetected Selenium

183,867
41
278
352

answered Nov 26 '21 at 17:00

Hélio 'el-leen' Torres

1

Datatable tool tip not working in second page. Works only of first page

7 Answers7