[WTA]Server Side Database Driven Edit/Delete Tutorial

sangprabv

Hi,
I am new with Data Tables and want to add server side database edit/delete feature to my Row. Currently I am using PHP and MySQL. Please help. Thanks

fbas

I recommend this example, which gives you a sample PHP/MySQL script for the server side which does (almost) everything you'd ever want for server processing.

http://www.datatables.net/release-datatables/examples/data_sources/server_side.html

you can also read up on the AJAX call and parameters that are used during server processing for the system to work:
http://www.datatables.net/usage/server-side

this page has info on fnServerData, which is the function called for the server call. there's an example on the ref page that shows adding custom parameters to the aoData object, if you wish:
http://www.datatables.net/ref#fnServerData (see the 2nd definition)

fbas

oh, you want edits. you can check out the jeditable integration:
http://code.google.com/p/jquery-datatables-editable/

sangprabv

Hi thanks for the reply. Im reading on it now. I still don't get the idea how my update script recognize each field name sent.

fbas

What are you sending to the server? Write your code to look for that. I don't understand the problem you're having.

sangprabv

[code]

$(document).ready(function() {
var oTable =$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sScrollY": 400,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
/*
"fnDrawCallback": function () {
$('#example tbody td').editable( '../phonebook/ajax.php', {
"callback": function( sValue, y ) {
oTable.fnDraw();
},
"height": "14px"
} );
},
*/
/*
"sDom": '<"H"Tfr>t<"F"ip>',
"oTableTools": {
"sSwfPath": "../media/swf/copy_cvs_xls_pdf.swf"
},
*/
"sAjaxSource": "../phonebook/ajax.php",
"aoColumnDefs": [
{
"fnRender": function ( oObj ) {

return "edit";
},
"aTargets": [ 3 ]
}
]
} );

} );

[/code]
As you see I have 2 approaches here. First the inline editing and the second one is a normal link which carries the primary key value. The inline editing is OK, I can edited the column. But don't know how it sends value for each edited column to the script.

fbas

that's a jeditable question, not datatables question. you can see http://www.appelsiini.net/projects/jeditable
the id of your element is sent as well as the value after editing.

[quote]
What is sent to server?
When submitting change following data will be POST:ed to server:

[code] id=elements_id&value=user_edited_content[/code]

In some cases you might want to change default parameter names. If you want to data to be POST:ed as:

[code] elementid=elements_id&newvalue=user_edited_content[/code]

you need to add two parameters:

[code] $(document).ready(function() {
$('.edit').editable('http://www.example.com/save.php', {
id : 'elementid',
name : 'newvalue'
});
});[/code]
[/quote]

you could also use your debugger to view the AJAX call to see this.

fbas

see also: "submitdata" if you want to add more parameters to the call (i.e. need to send your row's primary key)

[quote]
(Mixed) submitdata: Extra parameters when submitting content. Can be either a hash or function returning a hash.

$(".editable").editable("http://www.example.com/save.php";, {
submitdata : {foo: "bar"};
});
$(".editable").editable("http://www.example.com/save.php";, {
submitdata : function(value, settings) {
return {foo: "bar"};
}
});
[/quote]

sangprabv

Alright thanks. I am reading the tutorial now. Will back to you soon :)

btvbill

http://www.datatables.net/release-datatables/examples/data_sources/server_side.html didn't work so well for me. After entering in all of my "Easy set variables" I was greeted by a page full of undefined index and undefined variable messages like this one: Notice: Undefined index: bSearchable_1 in C:\wamp\www\datatablesTest\test.php on line 100

allan

Can you link to your demo page with the errors please? Also being able to see the PHP source would be useful as well, if you could link to that as a text file.

Thanks,
Allan