oTable Initialisation Problem
oTable Initialisation Problem
lyndonwil
Posts: 40Questions: 5Answers: 0
I am playing around with the highlighting example (http://www.datatables.net/release-datatables/examples/api/highlight.html) and would like the same functionality within my program.
I have a strange issue in that, when i set oTable to the datatable, i can't seem to access it.
[code]
var oTable;
$(document).ready(function() {
oTable = $('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "tablephp.php"
});
oTable.$('td').hover( function() {
var iCol = $('td', this.parentNode).index(this) % 7;
$('td:nth-child('+(iCol+1)+')', oTable.$('tr')).css('background-color','red' );
}, function() {
oTable.$('td.highlighted').css('background-color','white' );
} );
} );
[/code]
The strange thing though, is that, if I place an alert after i initialise the table, it starts to work. but only in firefox. I am guessing that this is a question of timing in the DOM ?
I have a live link at http://cloud-contractor.co.uk/test.php
I have a strange issue in that, when i set oTable to the datatable, i can't seem to access it.
[code]
var oTable;
$(document).ready(function() {
oTable = $('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "tablephp.php"
});
oTable.$('td').hover( function() {
var iCol = $('td', this.parentNode).index(this) % 7;
$('td:nth-child('+(iCol+1)+')', oTable.$('tr')).css('background-color','red' );
}, function() {
oTable.$('td.highlighted').css('background-color','white' );
} );
} );
[/code]
The strange thing though, is that, if I place an alert after i initialise the table, it starts to work. but only in firefox. I am guessing that this is a question of timing in the DOM ?
I have a live link at http://cloud-contractor.co.uk/test.php
This discussion has been closed.
Replies
Really want you want is to use a mouseevent and mouseleave event in a delegated event:
[code]
$('example')
.on( 'mouseenter', 'tbody td', function () {
...
} )
.on( 'mouseleave', 'tbody td', function () {
...
} );
[/code]
Sorry I don't have time to fill in the gaps at the moment, in a bit of a rush!
Thinking about it it might be more optimal to have the just a mouse enter handler, which would remove the old highlight and a mouse leave on the whole table to remove any highlighting that that point.
Although worth pointing out that it will be a heck of a lot easier with 1.10's API :-)
Allan
thank you for your reply. That makes perfect sense.
love the current version and looking forward to 1.10.. :-)