qtip for a particular column

datatables_help

Hi ,

I am trying to get qtip work with datatables . If datatables has a feature to do it , will be more than happy to use it also.
Goal is to popup a window on mouse over for a particular column with some small details based on data from a server (using PHP/MySQL combination).

I have the datatable working , here's the code ...
[code]

Example site

@import "../datatables/media/css/demo_page.css";
@import "../datatables/media/css/demo_table.css";
@import "../datatables/media/css/jquery.dataTables_themeroller.css";
@import "../datatables/media/css/jquery-ui-1.10.1.custom.css";





$(document).ready(function() {
$('#example').dataTable( {
"bJQueryUI": true,
"bProcessing": true,
"bServerSide": true,
<!-- determine # of records to display -->
"iDisplayLength": 50,
<!-- save the state which user has set -->
"bStateSave": true,
"sPaginationType": "full_numbers",
"sAjaxSource": "datatablestest.php"

} );
} );

[/code]

Now , I am completely lost at this point (I'm a newbie that would explain it)

Should I use aoColumn to drill down to a column and then use qtip (or datatable feature) ?

How can I use php to read data from server to be displayed on mouseover popup?

GregP

I would use aoColumns to add an sClass. From there it's nothing special that you have to do with DataTables necessarily. Bind a listener to cells with that class and do your "something".

You might need to do "more" with DataTables if you want to store some data in the cell or otherwise modify contents directly. fnRowCallback is your friend there. Add href, title, or data-* attributes containing the information that is used for the event.

[code]
$('.dataTable').on('click', '.someClass', function(e) {
var $this = $(this); // cache this object.. probably a cell
var qTipContent = $(this).attr('href'); // maybe it's test.php?name=George
var qTipContainer = $('td.beatsMe', $this.closest('tr')); // making stuff up; I don't know qtip
qTipContainer.load(qTipContent, function() {
//qTipContent is now loaded into qTipContainer and I am inside the success callback
});
})
[/code]