Row drag and drop
Row drag and drop
I'm trying to set up row drag and drop with jQuery UI sortable() function. I've found solutions with a (hidden) column for indexing and then sorting, but this is no option for me.
I've tried this:
[code]
var table = document.getElementById('example');
var settings = {
'bSort' : false
// other settings
};
$(table).dataTable(settings);
$('tbody', table).sortable({
update : function(event, ui) {
$(table).dataTable($.extend({
'bDestroy' : true
}, settings));
}
});
[/code]
But on update() the table is reinitialized with the original row order, not the new one. I thought that bDestroy would make a new DataTable from scratch, reading the DOM element once again (i.e. with the new order set by sortable()). What am I missing?
I've tried this:
[code]
var table = document.getElementById('example');
var settings = {
'bSort' : false
// other settings
};
$(table).dataTable(settings);
$('tbody', table).sortable({
update : function(event, ui) {
$(table).dataTable($.extend({
'bDestroy' : true
}, settings));
}
});
[/code]
But on update() the table is reinitialized with the original row order, not the new one. I thought that bDestroy would make a new DataTable from scratch, reading the DOM element once again (i.e. with the new order set by sortable()). What am I missing?
This discussion has been closed.
Replies
[quote]Restore the table to its original state in the DOM by removing all of DataTables enhancements, alterations to the DOM structure of the table and event listeners.
[/quote]
and I just realized why this is necessary. Then, how can I change the internal DataTable's row order without sorting?
You don't :-). If you want to allow reordering by drop and drag, then just use the built in sorting to apply the order (since you must have an order given by the drop/drag). This blog post about drop and drag by Jovan Popovic might be interesting to you: http://www.codeproject.com/Articles/331986/Table-Row-Drag-and-Drop-in-ASP-NET-MVC-JQuery-Data?utm_source=twitterfeed&utm_medium=twitter .
Allan