Datatables Server Side + jEditable base

supersonique

Hello,

First I'm always in love from Datatables who is mar-ve-lous !

I already use both datatable and jeditable without problem but it was 1 year ago, and I'm lil confuse (and an not really familiarized with JS stuff).

There is lots of thread talking about playing with Datatables Server Side and jEditable. But I'm sorry, I haven't found stuff who help me (or what I can understand as it).

That's why I'm post this question and this help request:

Actually this is my code who init datatable :
[code]
oTable = $('#tdata').dataTable( {
"oLanguage": {
"sSearch": "full search:"
},
"fnInitComplete": function() {
var oSettings = $('#tdata').dataTable().fnSettings();
for ( var i=0 ; i0){
$("tfoot input")[i].value = oSettings.aoPreSearchCols[i].sSearch;
$("tfoot input")[i].className = "";
}
}
},
"bSortClasses": false,
"aoColumnDefs": [
{"sName": "ProdFamily", "aTargets": [ 0 ], "sType": "string" },
{ "sName": "ProdClass", "aTargets": [ 1 ], "sType": "string" },
{ "sName": "ProdSubclass", "aTargets": [ 2 ], "sType": "string" },
{ "sClass": "editable", "sName": "SubclassDefaultMarge", "aTargets": [ 3 ], "sType": "numeric" }
],
"bJQueryUI": true,
"bPaginate": true,
"sPaginationType": "full_numbers",
"bStateSave": false,
"bLengthChange": true,
"bInfo": true,
"bAutoWidth": false,
"bProcessing": true,
"bServerSide": true,
"bStateSave": false,
"sAjaxSource": "stdout_json.php?r=mytable"
} );
[/code]
Datatables work perfect and as you can see I add class to select only editable td.
But I have a problem to enable jEditable using tutorial. See bellow my jEditable call :
[code]
$('.editable', oTable.fnGetNodes()).editable( 'editable_ajax.php', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
"submitdata": function ( value, settings ) {
return {
"row_id": this.parentNode.getAttribute('id'),
"column": oTable.fnGetPosition( this )[2]
};
},
"height": "14px"
} );
[/code]

I have no error message nor initialization. In fact nothing change.
May somebody can put me on the right direction, or give me a helping hands ?

Thanks for all.

allan

Hi supersonique,

Where are you calling that code for initialising the jEditable plug-in? With server-side processing it will likely need to be done in the fnDrawCallback function since jEditable doesn't do live events.

Allan

supersonique

Thanks for your help Allan,

Now I well select the td witch need to be editable like this.

[code]
...
oTable = $('#tdata').dataTable( {
"oLanguage": {
"sSearch": "Full search:"
},
"fnInitComplete": function() {
var oSettings = $('#tdata').dataTable().fnSettings();
for ( var i=0 ; i0){
$("tfoot input")[i].value = oSettings.aoPreSearchCols[i].sSearch;
$("tfoot input")[i].className = "";
}
}
},
"fnDrawCallback": function () {
/* Apply the jEditable handlers to the table */
$('.editable', this.fnGetNodes()).editable( 'editable_ajax.php', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
"submitdata": function ( value, settings ) {
return {
"row_id": this.parentNode.getAttribute('id'),
"column": oTable.fnGetPosition( this )[2]
};
},
"height": "14px"
} );
},
"bSortClasses": false,
<?php echo($aoColumnDefs); ?>
"bJQueryUI": true,
"bPaginate": true,
"sPaginationType": "full_numbers",
"bStateSave": false,
"bLengthChange": true,
"bInfo": true,
"bAutoWidth": true,
"bProcessing": true,
"bServerSide": true,
"bStateSave": false,
"sAjaxSource": "stdout_json.php?r=table"
} );
...
[/code]

About the data update, witch is the most interesting way to send enought data (like the full row) to do the server side stuff? Because I haven't the id of my row to do a simple update.

May I can add the id as hidden column in row 0 ? And get it's value to do the server side update.

Thanks

supersonique

I found this snipet from forum and i get the id (I add id column in pos 0)
ref : http://datatables.net/forums/comments.php?DiscussionID=679

"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
var id = aData[0];
$(nRow).attr("id",id);
return nRow;
},

But now I will be interested to set/get the column name. I already set it in the "thead th".

Can I access to the th or must I set the id of the cell using the same way to id set?

allan

Since you are using aData[0], can you just use $('#table_id thead th:eq(0)').text()?

Allan

supersonique

Thanks Allan,

I finaly doing the stuff using :

[code]
"submitdata": function ( value, settings ) {
return {
"row_id": this.parentNode.getAttribute('id'),
"column": oTable.fnGetPosition( this )[1],
"fieldname" : $('#tdata thead th:eq('+ oTable.fnGetPosition( this )[1] +')').attr("id"),
"table": "<?php echo($table); ?>",
"idfield": "<?php echo($idfield); ?>"
};
},
[/code]

There is a smarter and/or cleanens way o do the same stuff.
Because my fieldname call seem a lil rough ;-) .

Mike

allan

That looks fine. Since you are using "oTable.fnGetPosition( this )[1]" twice, you could store it in a var at the start of the function and just reuse it.

Allan