Raduken Raduken -4 years ago 176
JSON Question

Jquery Datatables delete row is not working with drag and drop

I am using: jquery.dataTables.js from: https://datatables.net

my delete button it is not working, I would like know what I am doing wrong.

If I remove the drag and drop functionality the button works fine.

someone knows what I am doing wrong?

jsfiddle: http://jsfiddle.net/f7debwj2/24/

rowReorder: {
dataSrc: 'order',
selector: 'tr',
},


if I remove
selector: 'tr'
,works fine, but i Can't because the whole row need be draggable

html:

<table id="example" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th>order</th>
<th>name</th>
<th>country</th>
<th>action</th>
</tr>
</thead>
</table>


jquery

$(document).ready(function() {
var dt = $('#example').dataTable();
dt.fnDestroy();
});

$(document).ready(function() {
var url = 'http://www.json-generator.com/api/json/get/bQzyuEGndu?indent=2';
var table = $('#example').DataTable({
ajax: url,
rowReorder: {
dataSrc: 'order',
selector: 'tr',
},
columns: [{
data: 'order'
}, {
data: 'place'
}, {
data: 'name'
}, {
data: 'delete'
}],
"fnDrawCallback": function(oSettings) {
$("i.fa.fa-minus-square").click(function(event) {
$(this).closest("tr").remove();
});
}
});
});

Answer Source

With a very small modification of the rowReorder.js I managed to make it work, hopefully it won't have any other fallback.

I changed the rowReorder.js file in line 182 from: return false; to return;

Why? Because Jquery has the following code:

ret = ( ( jQuery.event.special[ handleObj.origType ] || {} ).handle ||
                        handleObj.handler ).apply( matched.elem, args );

                    if ( ret !== undefined ) {
                        if ( ( event.result = ret ) === false ) {
                            event.preventDefault();
                            event.stopPropagation();
                        }
                    }

When return false; the ret value is false and the code:

event.preventDefault();
event.stopPropagation();

is being executes. event.stopPropogation stops from the event to bubble and that causes your "mousedown" event not to work.

When we use only return; the condition isn't true and there is no stoppropagation of the event and it works as you can see in this Demo: Working Demo.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download