DataTables & jEditable
DataTables & jEditable
I'm new to DataTables.
Trying to get jEditable to work with serverside processing but can't get it to work.
Using code:
[code]
$(document).ready(function() {
$('#example').dataTable({
"bProcessing": true,
"bServerSide": true,
"bJQueryUI": true,
"sAjaxSource": "DataTables_1_7_6/examples/examples_support/server_processing.php"
});
} );
$(document).ready(function() {
/* Init DataTables */
var oTable = $('#example').dataTable();
/* Apply the jEditable handlers to the table */
$('td', oTable.fnGetNodes()).editable( 'DataTables_1_7_6/examples/examples_support/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]
Trying to get jEditable to work with serverside processing but can't get it to work.
Using code:
[code]
$(document).ready(function() {
$('#example').dataTable({
"bProcessing": true,
"bServerSide": true,
"bJQueryUI": true,
"sAjaxSource": "DataTables_1_7_6/examples/examples_support/server_processing.php"
});
} );
$(document).ready(function() {
/* Init DataTables */
var oTable = $('#example').dataTable();
/* Apply the jEditable handlers to the table */
$('td', oTable.fnGetNodes()).editable( 'DataTables_1_7_6/examples/examples_support/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]
This discussion has been closed.
Replies
Try editable add-on for DataTables see http://jquery-datatables-editable.googlecode.com/svn/trunk/inline-edit.html.
In the initialization cann you should set URL of the server-side page as in the following example:
[code]
$(document).ready( function () {
$('#example').dataTable().makeEditable({
sUpdateURL: "UpdateData.php"
});
}
[/code]
You can see on the site what parameters are sent to the server-side.
Are you referring to a different plugin?
DataTables will add standard functionalities but this plugin will make implementaiton of editing easier. However, you still must use it with the DataTables plugin. It is the same code as the one you can find on this site but it is just placed within the plugin so you dn't need to worry about the implementation- just pass parameters you need.
I think we are talking about two different plugins.
I'm using jeditable by Mika Tuupola: http://www.appelsiini.net/projects/jeditable and trying to configure it as was done here: http://datatables.net/examples/api/editable.html
DataTables editable is a plugin that binds Allan's DataTable plugin and Mika's JEditable similar way you can find on the http://datatables.net/examples/api/editable.html. If you go to the URL above you will see that both data tables and jeditable are included there.
Plugin do the same thing as you can find on the DataTables site but everything is encapsulated so you just need to send configuration parameters. You can use original DataTables/Editable code you can find on this site but with the editable plugin configuration will be easier.
Regards,
Jovan
You lost me.
I looked at DataTables Editable plugin from http://code.google.com/p/jquery-datatables-editable/ but I'm using serverside processing and could not figure out how to configure and thus send id from the tr tag so I gave up and was trying to use Mika's solution. Are you saying I don't need to set up my html (i.e. "Each TR tag in the body of the table must have an id of the record that is listed in the table row. ") if using your plugin? I assume you are jocapc from http://code.google.com/p/jquery-datatables-editable/.
Yes I'm jocapc from that site. This plugin works even when you are using the server-side processing mode, however in that case instead of setting id of the TR you will need to send ID as a first column and make it hidden in the data tables configuration.
As an example on the http://jquery-datatables-editable.googlecode.com/svn/trunk/server_side_processing.html is returned JSON array from the server-side and first column is set to be non visible.
Editable plugin takes the first column and set this value as an attirbute of the TR tag once page is loaded. You can see generated source of any of the TR:
[code]
Firefox 1.0
Win 98+ / OSX.2+
1.7
A
[/code]
If you trace it in the firebug you will see that "Gecko" is a first column and it is set as an ID of the row (you will probably use actual ID).
Note that in this page instead of the URL for editing is placed inline function however logic is same if you set sUpdateURL to be path to the page.
If you are ASP.NET MVC developer you can see how this plugin can be integrated with the server side code in the following article: http://www.codeproject.com/KB/aspnet/MVC-CRUD-DataTable.aspx
Sorry but I'm a newbie and using PHP and not ASP.
One of my columns aleady contains unique ID. So do I have to use hidden column method?
Please share what Initialization code and UpdateData.php would look like.
My sample is here: http://www.howperksworks.com/syndication/searchbysourcemarket.php
Then add an aoColumns array to hide the ID cell, other setting can be left blank.
Then apply makeEditable call and pass the 'editable_ajax.php' as sUpdateURL parameter.
The code should look like the following:
[code]
$(document).ready(function() {
$('#example').dataTable({
"bProcessing": true,
"bServerSide": true,
"bJQueryUI": true,
"sAjaxSource": "DataTables_1_7_6/examples/examples_support/server_processing.php",
"aoColumns":[
{
"bVisible" : false
}, //ID is hidden
{},//Source market
{},//Advertiser
{},//Value prop
{},//Deal sales price
{}//Distributor markets
]
}).makeEditable({
sUpdateURL: 'DataTables_1_7_6/examples/examples_support/editable_ajax.php'
});
} );
[/code]
I cannot try it but I'm sure that it would work maybe with some minor adjustements.
Make sure that you include javascript files from the editable data table site (jquery.datatables.editable.js)- otherwise it would not find make editable function.
You can see in firebug what values are sent to the server-side once cell is edited. You would need to adjust your editable_ajax.php to accept value, columnId and id parameters.
Thanks for all your help thus far.
I made some changes and it is working although with some issues. I did not understand how to see values in Firebug but followed your PHP example for handling database updates. I then modified editable_ajax.php to do some actual updates to the database. I added a "status" column but can only make edits successfully to that column and not the other column fields. My editable_ajax.php code is as follows. I've removed actual DB credentials:
[code]
echo $_POST['value'].' (server updated)';
$value = $_REQUEST['value'] ;
$column = $_REQUEST['columnName'] ;
$id = $_REQUEST['id'] ;
echo $column;
echo $id;
$link = mysql_connect( 'localhost', 'user', 'pass' ) or die( 'Could not open connection to server' );
mysql_select_db( 'database', $link );
$query=" UPDATE table SET $column='$value' WHERE id='$id' ";
mysql_query($query);
[/code]
Test is at http://www.howperksworks.com/syndication/searchbysourcemarket.php
When you edit first column the following request is sent:
columnId: 1
columnName: Source Market
columnPosition: 0
id: 1
rowId: 0
value : Austin, Texas
Note that column name has space because this text is placed in the column heading. This will break the query because the query:
UPDATE table SET $column='$value' WHERE id='$id'
will become:
UPDATE table SET Source Market='Austin, Texas WHERE id='1'
Probably status column is the only column that matches by name both in the HTML table and database table.
I don't know what are your actual names of the columns but you can put some PHP code on the server side that check something like:
if($column=='Source Market') $column='SourceMarket';
if($column=='Value Prop.') $column='ValueProperty';
i.e. depending on the column name in the table set the column name that should be used in data base.
You are using plugin 1.0.0. - take the latest version http://code.google.com/p/jquery-datatables-editable/source/browse/trunk/media/js/jquery.dataTables.editable.js.
Regards,
Jovan
I'll try your suggestion.
On another note, do you have examples of how to insert select tag as a means of entering form data in, say, "Status" column?
[code]
Approved
Disapproved
Need More Info
[/code]
You can find lot of additional examples on the site.
Back to the issue of unique ID for your plugin to work.
I do have it working but the ID I'm using is one from my table and a column I've called "id." It is auto-generated when a user submits my form. Per your instructions, it is hidden but used with your plugin.
I'd like to make my "id" visible as it uniquely identifies each record. Furthermore, I'd like to add a link to the "id" column cell contents that takes the user to that specific record. I have link code working but not with your plugin because the id I'm linking from is being used by your plugin and does not function properly (of course) when configured as a link.
So, how do I use my "id" to work with your plugin but also allow me to make it linkable?
Hope this makes sense.
10Austin
11Dallas
etc
In that case, plugin will use first column as an id and the second will be shown as a regular column.
Here's what I used to successfully generate link in id column when not using editable plugin. This is in server_processing.php in output section:
[code]
/*
* Output
*/
$output = array(
"sEcho" => intval($_GET['sEcho']),
"iTotalRecords" => $iTotal,
"iTotalDisplayRecords" => $iFilteredTotal,
"aaData" => array()
);
while ( $aRow = mysql_fetch_array( $rResult ) )
{
$row = array();
for ( $i=0 ; $i
As the last option (although I do not recommend it) you can concat values directly in the SQL query you are using e.g.:
SELECT id AS id, ''+sourcemarket + '' AS sourcemarket
FROM table
Onto my previous question on formatting select tag in a column. I looked at your examples but does not work for me:
[code]
$(document).ready(function() {
$('#example').dataTable({
"bProcessing": true,
"bServerSide": true,
"bJQueryUI": true,
"sAjaxSource": "DataTables_1_7_6/examples/examples_support/server_processing.php",
"aoColumns":[
{
"bVisible" : false
}, //ID is hidden
{},//Source market
{},//Advertiser
{},//Value prop
{},//Deal sales price
{},//Distributor markets
{
indicator: 'Saving Status...',
tooltip: 'Click to select Syndication Status',
loadtext: 'loading...',
type: 'select',
onblur: 'submit',
data: "{'':'Please select...', 'Accepted':'Accepted','Rejected':'Rejected','Need More Info.':'Need More Info.'}"
}//Status
]
}).makeEditable({
sUpdateURL: 'DataTables_1_7_6/examples/examples_support/editable_ajax.php'
});
} );
[/code]
2. You need to pass aoColumns as a parameter of the makeEditable call. Try something like thisL:
[code]
$(document).ready(function() {
$('#example').dataTable({
"bProcessing": true,
"bServerSide": true,
"bJQueryUI": true,
"sAjaxSource": "DataTables_1_7_6/examples/examples_support/server_processing.php",
"aoColumns":[
{
"bVisible" : false
}, //ID is hidden
{},//Source market
{},//Advertiser
{},//Value prop
{},//Deal sales price
{},//Distributor markets
{
indicator: 'Saving Status...',
tooltip: 'Click to select Syndication Status',
loadtext: 'loading...',
type: 'select',
onblur: 'submit',
data: "{'':'Please select...', 'Accepted':'Accepted','Rejected':'Rejected','Need More Info.':'Need More Info.'}"
}//Status
]
}).makeEditable({
sUpdateURL: 'DataTables_1_7_6/examples/examples_support/editable_ajax.php',
,
"aoColumns":[
{},//Source market
{},//Advertiser
{},//Value prop
{},//Deal sales price
{},//Distributor markets
{
indicator: 'Saving Status...',
tooltip: 'Click to select Syndication Status',
loadtext: 'loading...',
type: 'select',
onblur: 'submit',
data: "{'':'Please select...', 'Accepted':'Accepted','Rejected':'Rejected','Need More Info.':'Need More Info.'}"
}//Status
});
} );
[/code]
Select tag still not showing up.
http://www.howperksworks.com/syndication/searchbysourcemarket.php
{
"bVisible" : false
}, //ID is hidden
in the makeEditable call number of aoColumns should be equal to the number of visible columns in the table.
See http://jquery-datatables-editable.googlecode.com/svn/trunk/server_side_processing.html
it will edit only the columns 4,5,9,10 and 11
[code]
$('td:eq(3), td:eq(4), td:eq(8), td:eq(9), td:eq(10)', oTable.fnGetNodes()).editable( 'update.php', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
"submitdata": function ( value, settings ) {
var aPos2 = oTable.fnGetPosition( this );
var aoColumns2 = oTable.fnSettings().aoColumns;
var hValue2 = aoColumns2[aPos2[1]].sTitle;
var id2 = oTable.fnGetData( aPos2[0] );
return {
"row_id": this.parentNode.getAttribute('id'),
"column": oTable.fnGetPosition( this )[2],
"value2": hValue2,
"id2": id2[10],
"id": 'RECEBIMENTO_ID' ,
"tab": 'RECEBIMENTO'
};
},
"height": "20px",
"event" : "dblclick",
"tooltip" : "Clique 2 vezes para editar..."
} );[/code]
[code]$(document).ready( function () {
$('#example').dataTable().makeEditable({
sUpdateURL: "UpdateData.php"
});
}[/code]
how do i get callback value and put it into the cell, in this case into td value which i was editing, please help, i get an js alert, but i need it to set it into the cell
I just edited, ajax.php
elseif ( $aColumns[$i] == "created" )
{
/* Special output formatting for 'id' */
$id = $aRow[ 'id' ];
$row[] = $aRow[ 'created'];
$row[] = "VIEW";
$row[] = "EDIT";
$row[] = "DELETE";
}
This does your last sql col, in my case created and adds three more with view/edit/delete.
Working example if anyone wants more email me nathan@njcsolutions.co.uk