dataTables more excel like

Jay C

I'm working towards using dataTables as an active table similar to an excel spreadsheet. I have the aaData populating the table from my database using a PHP file. Now I trying to figure out how to leverage the form example and make it use AJAX to update an element in a row.

Having some trouble getting the following working like I'm assuming it should:
$('#example tbody td').click( function () {
/* Get the position of the current data from the node */
var aPos = oTable.fnGetPosition( this );

/* Get the data array for this row */
var aData = oTable.fnGetData( aPos[0] );

/* Update the data array and return the value */
aData[ aPos[1] ] = 'clicked';
this.innerHTML = 'clicked';
var result = oTable.fnUpdate( 'here', aPos[0], aPos[1] ); // Single cell
alert( "Result:"+result );
} );

It does nothing.

Here is the code I use to create the table:
var oTable;
var giRedraw = false;
$(document).ready(function() {
oTable = $('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": 'adm_dc_query.php'
} );
} );

I think it's obvious that I'm still very much a newbie to jQuery :) despite reading a lot. Any direction would be appreciated.

Jay

allan

Hi Jay,

Sounds like a very interest application of DataTables - let us know how you get on with it!

It looks to me that your code is actually mostly okay, it's just where you apply the click event handler that might be a problem. Using the following (which is your code exactly, but with the 'click' assignment inside the document.ready function) works for me:

[code lang="js"]
var oTable;
$(document).ready(function() {
$('#example tbody td').click( function () {
/* Get the position of the current data from the node */
var aPos = oTable.fnGetPosition( this );

/* Get the data array for this row */
var aData = oTable.fnGetData( aPos[0] );

/* Update the data array and return the value */
aData[ aPos[1] ] = 'clicked';
this.innerHTML = 'clicked';
var result = oTable.fnUpdate( 'here', aPos[0], aPos[1] ); // Single cell
alert( "Result:"+result );
} );

oTable = $('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": 'adm_dc_query.php'
} );
} );
[/code]

Hope this does the trick for you.

Regards,
Allan

giorgio79

Thanks Allan, I got a nice example of this going on here combined with infinite scrolling and jeditable:
http://s53452.gridserver.com/DataTables-1.7.5/extras/KeyTable/keytable_editing_scrolling.html

Some issues:
1. When clicking with the mouse, I need to click exactly at the text to make it editable straight away. It would be nice to detect the entire cell
2. After scrolling KeyTable focus stays and does not follow scrolling
3. Would love to make it work with keyboard navigation, so
TAB key: Cell is saved, and goes to next cell
Arrow key UP/ DOWN: Cell is saved, and goes to appropriate cell
Arrow key LEFT/ RIGHT: If at the edge of a text cell, cell is saved and goes to next cell, if in middle of text cell, it goes inside text cell

Would also be interested in sponsoring this, and believe this would give Datatables a truly Excel like behavior that is unparalleled in the world.

samyesz

Thanks for the example and I would like to add one comment that if we want to make it editable by a mouse click or return key, we can simply replace the "keys.event.action(...)" with "keys.event.focus(...)" in the original example. Hope this help.