fnPageChange return value to confirm completion
fnPageChange return value to confirm completion
I'm looking for a way to confirm that the redraw has completed after calling fnPageChange(). I have a situation where I need to page to the last page of data and then add a row there. For various assorted reasons, I cannot use DT's row adding function. Here are a few pertinent lines of my code:
[code]
function fnClickAddRow() {
/* This adds a row to the datatable */
var lastID = $('#quotes_editor tbody tr:last td:first').text(); /* grab the last quote id to validate add request */
if (lastID != '--') {
oTable.fnPageChange('last', true);
var tbody = document.getElementById('quotes_editor');
var lastRow = tbody.rows.length;
var row = tbody.insertRow(lastRow);
...
[/code]
Unfortunately what happens is that the row is added before the redraw can complete, so it shows up at the bottom of the current page and then is immediately deleted by the redraw moving to the last page.
I need to delay until the redraw is finished.
Am I overlooking a simple way to do this or is this really a feature request?
Kind Regards,
Chris
[code]
function fnClickAddRow() {
/* This adds a row to the datatable */
var lastID = $('#quotes_editor tbody tr:last td:first').text(); /* grab the last quote id to validate add request */
if (lastID != '--') {
oTable.fnPageChange('last', true);
var tbody = document.getElementById('quotes_editor');
var lastRow = tbody.rows.length;
var row = tbody.insertRow(lastRow);
...
[/code]
Unfortunately what happens is that the row is added before the redraw can complete, so it shows up at the bottom of the current page and then is immediately deleted by the redraw moving to the last page.
I need to delay until the redraw is finished.
Am I overlooking a simple way to do this or is this really a feature request?
Kind Regards,
Chris
This discussion has been closed.
Replies
Are you using server-side processing? I'm guessing so, since I think that's the only way in which fnPageChange can be asynchronous.
So there are a couple of options here:
1. You could listen for the 'draw' event by attaching a listener - $(oTable).bind('draw', function (){...}); for example - and then unbind that when it occurs (so it can be rebound next time etc - possibly the jQuery 'one' method might be useful).
2. You could set a flag and use fnDrawCallback - the callback function would check if the flag has been set and then take the required action (I think 1 is cleaner though).
3. Yes this could be a feature request to have a 'draw complete' callback parameter for the API methods :-).
Regards,
Allan
Thanks for your suggestions.
Yes, I am using server-side processing. I add a row to the table, which the user populates and the data is then posted back to the server via jEditable handlers.
I am thinking that #1 is the most straightforward for my use. So I tried this:
[code]
function fnClickAddRow() {
/* This adds a row to the datatable */
var lastID = $('#quotes_editor tbody tr:last td:first').text(); /* grab the last quote id to validate add request */
if (lastID != '--') {
$(oTable).one('draw', function (){
var tbody = document.getElementById('quotes_editor');
var lastRow = tbody.rows.length;
var row = tbody.insertRow(lastRow);
var currentRow = lastRow+1;
...
});
oTable.fnPageChange('last', true);
...
[/code]
However, the pagination occurs properly, but no row is added. Two questions:
1. Am I attaching to the correct element?
2. Do I have the right event? (ie. draw)
Kind Regards,
Chris
http://www.sprymedia.co.uk/article/Visual+Event+2
shows this listener is attached, but for some reason does not trigger.
Thanks for an excellent solution, Allan, as well as a class in advanced debugging of jQuery!
Kind Regards,
Chris
Great to hear you got this going! There were no events fired at all in DataTables 1.8.1 (a few basic ones were introduced in 1.8.2 and formalised in 1.9.x) which is why it would have worked before.
Regards,
Allan
Thanks again Allan.
Kind Regards,
Chris