I use a jQuery plugin (DataTable with Scroller extension) that allows me to display HTML table with thousand lines thanks to a defer rendering.
I want to make it sortable (with sortable jQuery-UI plugin).
The issue is that when I drag an element and want to drop it far away lower, the first nodes of the table disappears from the DOM and the new ones appears. So I'm no longer able to drop the dragged element.
An exemple is better than long texts : http://jsfiddle.net/91dr6utg/
$(document).ready(function() {
$('#example').DataTable( {
data: data,
deferRender: true,
dom: "frtiS",
scrollY: 200,
scrollCollapse: true
} );
$('#example tbody').sortable({
helper: "clone",
start: function (event, ui) {
ui.item.appendTo($('#dragSave'));
ui.helper.appendTo($('#dragSave'));
},
}).disableSelection();
});
var data = [ "A lot of datas !" ];<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>First name</th>
<th>Last name</th>
<th>ZIP / Post code</th>
<th>Country</th>
</tr>
</thead>
</table>
<div id="dragSave"></div>If I drag the fist element, I can't drop it after the 90th element.
More information :
I did the start function to prevent that the dragged line disappears. Indeed, if the original node is removed from the DOM, the sortable plugin can no longer drop the element (it doesn't know it anymore). So I move it in another container of the DOM which is never updated.
If we remove this function, we'll see that the original node is removed approx fifty lines lower
=> Ok that comes from the DOM regeneration
BUT we can still drop the element until ninety line lower
=> because the next lines where never generated in the DOM, it's the limit
