ColReorder breaks a columns inner elements bindings? What I do wrong?

surzhikov

Hello for all, hello Allan!
First - great thanks for DataTables. I think it is one of the most elaborated project on the web.
I use datatables for 3 years, but just now i got a strange and "no-answer" problem , so i decide to register here, and ask!

I got strange problem:
1) I create datatable with columns:

 var columns = [ 
    {name: "c1", data: "id", title: "Id", sortable: true, serchable: true,  visible: true},
    {name: "c2", data: "name", title: "Name", sortable: true, serchable: true,  visible: true},
    {name: "c3", data: "lalala", title: "LaLaLa", sortable: true, serchable: true,  visible: true},
    {name: "edit", title: "edit", sortable: false, serchable: false,  visible: true, render: function (  data, type, row, meta  ) {
        var btn = '<button class="edit-btn btn btn-secondary btn-sm">Edit</button>';
        return btn;
    }}
 ];

The last column "Edit" has default data, drawing with "render" function.

2) After then, in RowCallback, I bind "click" action to this Button (by $(".edit-btn",row").bind(click, function(){...})).

var rowCallback = function(row, data, index)
{
    $("button.edit-btn", row).on("click", function(e){
        e.preventDefault();
        e.stopPropagation();
        window.location = "/competitor/"+data.uuid;
    });
}

3) First time - everything works good: Click the button -> location change!

But when I switch on ColReorder extension (by colReorder: true OR colReorder: {realtime: false}) and do a first column-drag-n-drop, the Edit button lost it`s "click"-binding - so when i click it - nothing happens

There is NO errors in console.

I use DataTables (1.10.15) with Bootstrap 4-alpha styles, +colReorder, ColVis, Select extensions,
Lastest Chrome (57.0.2987.133 (64-bit)) on MacOS

adjenks

I too have an issue with colreorder.
I have onclick settings in my cells and they are destroyed when you move the column.
I think it would be best if we came back with isolated demos of these errors. I will create an example.
In the mean time, I will prevent my users from reordering columns unless they are okay with breaking a few things.

adjenks

I basically re-load the whole table every time a column is moved to solve the problem. This re-renders the cells and generates new event handlers, etc.