Dica de ferramenta datável não está funcionando na segunda página. Funciona apenas na primeira página - jquery, tooltip, datatables

Estou tendo algum problema estranho em que a dica de ferramenta está funcionando apenas na página 1. Se eu clicar na próxima página, não vejo nenhuma dica de ferramenta.

Eu estou usando o jQuery dataTable. Meu código de amostra está em jsfiddle: http://jsfiddle.net/agorur/3r54F/

Alguma ideia ?

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

Respostas:

6 para resposta № 1

Se eu clicar na próxima página, não vejo nenhuma dica de ferramenta.

isso é porque você está definindo o atributo title na função document.ready ... então isso funciona para todos os <tr> que é encontrado no documento quando o documento está pronto e não para aqueles que estão em outra página que aparece quando você pressiona o próximo ...

uma maneira é fazer uma função e chamá-la em document.ready e next click ... (embora não seja uma maneira eficiente ...) (você pode precisar disso também para clicar anteriormente)

tente isso

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

---

1 para resposta № 2

Eu sei que isso é um pouco tarde, mas eu acabei de me deparar com um problema semelhante e isso seria como a minha solução se aplica ao seu caso.

DataTables tem uma função $ que funciona como a função jQuery $ regular, exceto que é limitada a essa instância da tabela de dados. http://datatables.net/api Para selecionar todas as linhas de uma instância da tabela de dados que você faria $("#id").dataTable().$("tr");

Usando isso, o atributo title é atribuído uma vez a cada vez que o usuário clica em seguida. Também funciona em todas as páginas de uma tabela de dados.

Para sua implementação, funcionaria assim: (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");
});
});

---

1 para resposta № 3

Uma solução melhor

Inclua este código nas suas informações de dados

"drawCallback": function( settings ) {

toolTipShow(); // your tootlip function.

},

---

1 para resposta № 4

Inicialize a dica de ferramenta toda vez que a tabela for redesenhada.

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

---

0 para a resposta № 5

Basta adicionar o seguinte código no seu arquivo js ou no seu script.

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

Mas não inclua na função document.ready ()

---