2012-07-03 13 views
5

¿Cómo puedo modificar el código para mostrar la información de cada celda en una información sobre herramientas?¿Cómo se muestra la información sobre herramientas para cada celda?

http://datatables.net/release-datatables/examples/advanced_init/events_post_init.html

$(document).ready(function() { 
/* 
* First step is to create title attributes for the rows in the table 
* This isn't needed if the required 'title' attribute is already set in the HTML in the 
* DOM 
*/ 
$('#example tbody tr').each(function() { 
var sTitle; 
var nTds = $('td', this); 
var sBrowser = $(nTds[1]).text(); 
var sGrade = $(nTds[4]).text(); 

if (sGrade == "A") 
sTitle = sBrowser+' will provide a first class (A) level of CSS support.'; 
else if (sGrade == "C") 
sTitle = sBrowser+' will provide a core (C) level of CSS support.'; 
else if (sGrade == "X") 
sTitle = sBrowser+' does not provide CSS support or has a broken implementation. Block CSS.'; 
else 
sTitle = sBrowser+' will provide an undefined level of CSS support.'; 

this.setAttribute('title', sTitle); 
}); 

/* Init DataTables */ 
var oTable = $('#example').dataTable(); 

/* Apply the tooltips */ 
oTable.$('tr').tooltip({ 
"delay": 0, 
"track": true, 
"fade": 250 
}); 
}); 

Respuesta

2

Puede configurar el título simplemente setAttribute para cada td

$('#example tbody tr td').each(function() { 
    this.setAttribute('title', $(this).text()); 
}); 

y llamar a información sobre herramientas en td

oTable.$('td').tooltip({ 
"delay": 0, 
"track": true, 
"fade": 250 
}); 
+0

Yup. Y si el contenido de la información sobre herramientas no está destinado a ser el texto, en teoría podría recuperar otra información de otro lugar (por ejemplo, un atributo de datos) utilizando esencialmente la misma técnica. –

9

Usted puede hacer

{ "sTitle": "...", ... 
    'fnCreatedCell': function(nTd, sData, oData, iRow, iCol) { 
     nTd.title = 'Some more information'; 
    } 
} 

en la configuración de su columna. Puede usar todos los datos de fila fácilmente así. De causa, esto no debe faltar:

oTable.$('td').tooltip({ 
    "delay": 0, 
    "track": true, 
    "fade": 100 
}); 
+1

Fantástico pequeño consejo allí! He estado trabajando con tablas de datos recientemente, y es increíblemente robusto. Mi única pregunta, ¿cómo funciona esto? ¿Por qué configurar el título es suficiente para exponer una información sobre herramientas? Estoy confundido por eso. – rkd80

+0

Hola, rkd80, información sobre herramientas es un componente de interfaz de usuario jQuery (https://jqueryui.com/tooltip/) que leerá el atributo del título. "oTable. $ ('td'). tooltip (..." le dice al componente de información sobre herramientas que muestre la información sobre herramientas para cada elemento td en la tabla. –

Cuestiones relacionadas