How to retain the sort order after an fnDeleteRow?

paulg

One problem I'm having is that I am also implementing row deletion along with the nice drag-drop sort example found here:

http://www.jonathonjoyce.co.uk/2011/04/08/updating-datatables-display-orders-by-drag-and-drop/trackback/

... but the subsequent redraw following a fnDeleteRow causes the table row order to revert back to the original pre-sort row order (minus the deleted row). I am not reloading the table via ajax or anything. I am doing everything client-side for now.

Do I need to rebuild the underlying aoData array following the drag-drop sort? If so, how do I do that?

Any ideas about how I can retain the drag-drop-sorted row order persist AFTER a row delete? (without making a trip to the server).

allan

I haven't tried it (away from my own computer at the moment), but it is odd that DataTables is doing any sorting at all given that bSort: false is given. Do you have that flag set? With it then DataTables shouldn't do any sorting (although it has it's own internal data order, so it is perfectly possible that it is just restoring the unsorted state, since it isn't told otherwise. Without sorting disabled, then DataTables will blitz whatever sorttable does.

Basically I think what is needed is for the sorting to update the DataTables internal cache and make use of aaSortingFixed which will force the sorted to be what is in your fixed column (and that would be the order of the rows).

Allan

paulg

OK...I think I'm starting to understand. The Jonathon Joyce drag-drop jquery-ui sorting is sorting the UI, but the underlying data model still retains the old/original unsorted rows. So that's why it doesn't matter whether or not bSort is true/false. In turn, the fnDraw following the fnDeleteRow is going to restore the original pre-sorted order.

So I gather that the first thing I should try is to turn on bSort? and then fiddle around with aaSortingFixed...

By the way, if it's any help, here is the simple code (lifted from the Jonathon Joyce example) for the jquery-ui drag-drop sort which sorts the UI, whether or not bSort is true/false:

[code]
$("#idOfTable tbody").sortable({
cursor: "move",
start:function(event, ui){
// a placeholder
},
update: function(event, ui) {
// a placeholder
}
});
[/code]

paulg

I set the table init params as you suggested. Then I updated the underlying data/column of the table with the new sort order displayed in the UI. Then I did a redraw at the end. It worked! Thanks for the help. For the possible benefit of others, I am including some code fragments below.

Here are the pertinent table/column init params:

"aaSortingFixed": [[0,'asc']],
"bSort": true

Obviously, I am setting column 0 as the column to used to contain the sort order. What is (kind of) interesting is that the column definition for column 0 can be "bSortable: true or false (doesn't matter). I guess aaSortingFixed overrides?

Anyway, here's the drag-n-drop update code that updates the underlying data and sort order:

[code]
$("#idOfTable tbody").sortable({
cursor: "move",
start:function(event, ui){
// a placeholder
},
update: function(event, ui) {
$("#idOfTable tbody tr").each(function(index) {
var pos = qTable.fnGetPosition(this); // get row position in current model
qTable.fnUpdate( index, pos, 0, false ); // false = defer redraw until all row updates are done
});
qTable.fnDraw();
}
});
[/code]

allan

That's excellent - good to hear you got it working :-). And thanks for posting your solution!

Regards,
Allan

Arthur

@palg's solution didn't work form me... instead this worked:
[code]
update: function(event, ui) {
var i = 0;
var dataclone = $("#datatable-wrapper tbody tr").clone();
$(dataclone).each(function() {
var pos = oTable.fnGetPosition(this); // get row position in current model
var el = Array();
$(this).children().each( function() { el.push( $(this).html() );});
oTable.fnUpdate( el, i, 0, false ); // false = defer redraw until all row updates are done
i++;
});
oTable.fnDraw();

endPosition = ui.item.prevAll().length + 1;
}
[/code]