Editable Row

simeptk

HI Allan,
I am Using Asp.Net with C#, I am getting datas from DbServer and Converted into table format. I need to give full editable table. I need example for editable table with using datatables. Please help me...

Thanks in advance.

Regards,
simeptk

allan

Hi simeptk,

If you have a look through the examples ( http://datatables.net/usage ) you see an editable example: http://datatables.net/examples/example_editable.html

This is also discussed at length in other threads in this forum - for example: http://datatables.net/forums/comments.php?DiscussionID=123&page=1#Item_7

Allan

simeptk

Hi Allan,

Thanks for your quick reply. In the "example_editable.html", I modified some cell, but the modified data was not reflect in the cell. How can we update?. I don't need any server side process...I am new in JQuery and datatables. Please help me...

Thanks in Advance

allan

Hi simeptk,

I think this might be more of a question for the jEditable folks rather than a DataTables question, but you might try the following:

[code]
var oTable;

$(document).ready(function() {
/* Apply the jEditable handlers to the table */
$('#example tbody td').editable( function( sValue ) {
/* 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] ] = sValue;
return sValue;
}, { "onblur": 'submit' } ); /* Submit the form when bluring a field */

/* Init DataTables */
oTable = $('#example').dataTable();
} );
[/code]

It won't send information to the server - but it will update DataTables.

Allan

simeptk

Hi Allan,

Thanks for your reply. Sorry to say, still i am facing the same problem. Editable textbox came, but it's gone immediately. I am unable to modified / entered in the editable textbox. Please help me..Actually where I missed the code?...Please...

Thanks lot...


My Code:
(My code is working but only the modifications cell data is not happening...)
var oTable;
var asInitVals = new Array();

$(document).ready(function() {
/* Apply the jEditable handlers to the table */
$('#GridView1 tbody td').editable( function( sValue ) {
/* 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] ] = sValue;
return sValue;
}, { "onblur": 'submit' } ); /* Submit the form when bluring a field */

oTable = $('#GridView1').dataTable( {
"oLanguage": {
"sSearch": "Search all columns:"
}
} );

$("tfoot input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("tfoot input").index(this) );
} );

/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes in
* the footer
*/
$("tfoot input").each( function (i) {
asInitVals[i] = this.value;
} );

$("tfoot input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );

$("tfoot input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("tfoot input").index(this)];
}
} );
} );

90degreeturn

After a couple of hours searching, I finally found this thread.
It has allowed me to
- add extra information to the submitdata so that the database table can be identified
- add an id from the datatable to the submitdata so that I can fill the WHERE clause of the mysql query.

What I still can't figure out is getting the column name of the table current position.
Because to update the database, I will need a query like this:

[CODE]UPDATE tablename SET column_name = 'value' WHERE id = 'id';[/CODE]

With the help of this thread, I have the tablename, the value and the id.
How do I get the column_name of the field that is edited?

90degreeturn

Oh, okay. It turns out I can use the server-side function "fnColumnToField" to get the column name from the row number.
Thanks for this great script!

Mithrus

Where you find fnColumnToField() at? I looked on the site and couldn't even find a reference to that function.

90degreeturn

It's in the server side processing php script.
The function is used to convert a numeric index to the database column name.
You could also add an "sName" to the javascript and submit this column name via POST.
You would have to make sure to thoroughly check it before using it, though.