Other jquery plugin working only on the first page
Other jquery plugin working only on the first page
Dear datatablers,
I would like to include some plugins in my datatable.
I tried some ToolTips plugins, they're working well on the first page, but if I go to the second page of results, it stops displaying.
In the same way, I tried to include Edit In Place plugin, to allow modification of the fields right away... It works on the first page but not on the other results.
Any clue on how to fix that ?
I would like to include some plugins in my datatable.
I tried some ToolTips plugins, they're working well on the first page, but if I go to the second page of results, it stops displaying.
In the same way, I tried to include Edit In Place plugin, to allow modification of the fields right away... It works on the first page but not on the other results.
Any clue on how to fix that ?
This discussion has been closed.
Replies
It sounds like the event handlers haven't been applied. Here are some useful links:
http://datatables.net/examples/example_events_pre_init.html
http://datatables.net/examples/example_events_post_init.html
http://datatables.net/forums/comments.php?DiscussionID=159
http://sprymedia.co.uk/article/Visual+Event - lets you see what elements have events applied to them.
Hope this helps,
Allan
Just had to change the way I initialize my plugins...
Thanks a lot, for this great plugin and for this very efficient help !
Two great plugins which cannot be used together ??
With http://code.google.com/p/jquery-in-place-editor/, I make editable the fields in the table, which I display with datatables (client-side).
It crashes when I leave the page in Firefox and Chrome, seems ok in IE (but who is using IE ??).
Note sure this will look nice, if that can help (more code if you need) :
[code]
$(document).ready( function() {
$('#titre1').FontEffect({
gradient:true,
gradientColor:"#f3845B",
mirror:true,
mirrorColor:"#b3441b"
});
$(".pdf").attr("target","_blank");
$("#footer").positionFooter(true);
$("td.editable").editInPlace({
url: "save.php",
show_buttons: true,
default_text: "",
field_type: "textarea",
textarea_cols: 30,
textarea_rows: 3
});
$('#example').dataTable( {
"sPaginationType": "full_numbers",
"bStateSave": false,
"bSortClasses": false
});
})
[/code]
I don't see anything obvious from your code sample which would cause this to fail - there shouldn't be any incompatibility with DataTables. If you comment out the DataTables initialisation does it work okay?
You might be interested in this example for editing a table: http://datatables.net/examples/example_editable.html - it uses jEditable rather than editinplace, but the principle should be the same.
Allan
I think it simply comes from the fact that I'm treating more than 1000 entries.
I get the same issue with jEditable.
However, I'm now implementing the server-side processing.
Could you give an example of using the live() function to re-initialize the jEditable at each display ??
Thanks again,
Jonathan
If you are using server-side processing then this problem doesn't really exist since there are a limited number of rows. You can just use fnDrawCallback() to add the event handler required.
Something like this should do it:
[code]
$('td', oTable.fnGetNodes()).editable( 'media/examples_support/editable_ajax.php', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
"height": "14px"
} );
[/code]
* note not actually tested!...
Allan
Here is the code:
[code]
var oTable;
$(document).ready( function() {
oTable = $('#example').dataTable( {
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "server_processing.php",
"bAutoWidth": false,
"bSortClasses": false
});
$("td", oTable.fnGetNodes()).editable( 'save.php', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
indicator : 'Saving...',
type : 'textarea',
submit : 'OK',
id : 'element_id',
name : 'update_value'
});
})
[/code]
Did you give Visual Event a go ( http://sprymedia.co.uk/article/Visual+Event )? It really is most useful for seeing what elements have events on them.
Allan
It works on Google Chrome, very slowly though.
It makes Firefox crashes and IE displays "No matching results found" with 1589 entries detected.
[code]
oTable = $('#example').dataTable( {
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "server_processing.php",
"bAutoWidth": false,
"bSortClasses": false,
"fnDrawCallback": function () {
$('td').each( function () {
var iPos = oTable.fnGetPosition( this );
$("td", oTable.fnGetNodes()).editable( 'save.php', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
indicator : 'Saving...',
type : 'textarea',
submit : 'OK',
id : 'element_id',
name : 'update_value'
});
});
}
});
[/code]
I tried with JEdit in Place, which loads much faster, but doesn't send any argument by $_POST...
Any idea ?
Till a tutorial appears with Server-side + jEditable !
Thanks anyway for your great job, I'm still using it on other projects !
Perhaps you could try this:
[code]
var oTable;
$(document).ready(function() {
oTable = $('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "../examples_support/server_processing.php",
"fnDrawCallback": function () {
$('#example tbody td').editable( '../examples_support/editable_ajax.php', {
"callback": function( sValue, y ) {
/* Redraw the table from the new data on the server */
oTable.fnDraw();
},
"height": "14px"
} );
}
} );
} );
[/code]
It works for me here. The server_processing.php needs to update the database on the server-side (you'll need to pass the row id and column to the server using jEditable's callback functions) and then fnDraw() pull the new information from the server and draws it on the page :-)
Allan
I tried your code and it's working really fine.
However, I'm still not able to pass the new value and the id (I formatted it like that : id=columnName_rowNumber). The post which I send remains empty...
Did you use the "submitdata" callback function that jEditable presents? Have a look at the jEditable documentation for this callback function: http://www.appelsiini.net/projects/jeditable . You can return an object with extra data to be posted to the server. This data can be derived from wherever you want - most likely the row in question. See the discussion here for information about that: http://datatables.net/forums/comments.php?DiscussionID=200
Allan
I understood the way submitdata works, but I don't know from where I can get the id that I used to pass so easily before...
I'm using Firebug to monitor the sent arguments, and whatever I try, I always end with the new and the old value... which is sadly not enough for updating the database...
[code]
var oTable;
$(document).ready( function() {
oTable = $('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "server_processing.php",
"fnDrawCallback": function () {
oEditable = $('#example tbody td').editable( 'save.php', {
"callback": function(sValue, y) {
/* Redraw the table from the new data on the server */
var aPos = oTable.fnGetPosition( this );
var aData = oTable.fnGetData( aPos[0] );
oTable.fnUpdate(sValue, aPos[0], aPos[1]);
oTable.fnDraw();
},
submitdata : function(aPos, aData) {
return {aPos: aPos, aData: aData};
},
id : 'element_id',
name : 'update_value'
});
}
} );
})
[/code]
Sorry to disturb you again...
You need to use fnGetPosition etc in the submitdata() function, obtain the unique ID from there and then pass it back.
Allan
I'm now able to pass all the values of one row, I guess I could put the id of the row in the first column and not display it - so if you could just explain to me the functions calls, so I can complete my beginner level in jQuery+DataTables+jEditable...
Thanks a lot for your help Allan, your help has been really useful to me.
Allan
Thanks for all your help and your wonderful plugin !
am interrested in ths solution described below because facing the same problem but the solution is not given here.
Am a newbe i n jquery, so...
thanks for your help
I'm afraid I won't write the code for you (no one learns that way), but I can help a bit (hopefully). Inside submitdata() the special variable "this" is the TD in question. What you need to do is find out where that TD is in DataTables so you can get the ID of the row in question. This is achieved by fnGetPosition() and fnGetData() - more information about these functions is in the documentation. Have an experiment - see what happens :-)
Regards,
Allan
I got this working,
client side
[code]
$(document).ready(function() {
oTable = $('#datatable').dataTable({
"bJQueryUI": true,
"bProcessing": true,
"sAjaxSource": 'mysourcescript.php',
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
/*
* Add id to row from first column value
*/
$(nRow).attr("id",$('td:eq(0)', nRow).html());
return nRow;
},
"fnDrawCallback": function () {
$('#datatable tbody td').editable( 'myupdatescript.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]
Server side update script, it's codeigniter controler method, but logic is understandable
[code]
if(isset($_POST['row_id']) && isset($_POST['value']) && isset($_POST['column'])){
$id = $_POST['row_id'];
$value = $_POST['value'];
$column = $_POST['column'];
$columns = array( 2 => 'somecolumn', 3 => 'somecolumn', 4 => 'somecolumn', 5 => 'somecolumn');
$data = array(
$columns[$column] => $value
);
$this->db->where('id', $id);
$this->db->update('mytable', $data );
echo $value;
}
[/code]
I'v got same problem with jquery is only workig on the first page. What the changes is you make it for solved the problem? Can you give me some exmple scripts? thanks.
Allan