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');
    });
});

Answer 1

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