Prevent order event

annafw

Hello,

I tried to implement resizable columns following the approach given in https://datatables.net/forums/discussion/63231/resizing-columns-using-jquery-ui.
So far, so good - works fine. But somehow the order event of my columns is triggered when I resize them and keep the cursor in the original th. The example doesn't face this problem, maybe because I don't use the ScrollHeader?

I tried to cancel several events, but nothing seemed to work. Seems like mouseup.dt causes order. So I tried "table.off('mouseup.dt');", but that didn't work either.

Is there any possibility to prevent the order event from firing?

Regards

allan

It sounds to me like anything that does a draw is going to cause the columns to realign. You could disable ordering using the ordering option, but paging or filtering would likely still trigger this behaviour.

I'm afraid user column resizing just isn't supported in DataTables at this time.

Allan

annafw

Thanks for your answer, Allan.
Maybe my question wasn't clear enough: Resizing of the columns works fine, they keep that size even on redraw. The resizing itself causes unexpected ordering.

Example: Table is ordered by column B. Now I resize header A and release the mouseclick while the cursor is over header A. This will cause ordering on column A.

I tried creating a working example here: http://live.datatables.net/pezupuqi/1/edit
Not calling "loadDatatable()" in the resizable-stop-function seems to be the issue. Could you tell me whats the exact difference there?

annafw

Ok, I understand why reloading the table (with destroy=true) works in this case. Unfortunately I'm using AJAX data so its a bit ugly.

I would prefer stopping the click on this particular header instead of reloading the whole table. Do you have any idea how I could accomplish that?

annafw

Nevermind, I finally found a working solution. In case anyone faces similar issues: Adding Eventlistener "click" to "th" in the capture phase and removing it after resizing stopped worked for me.

$('#' + tableName + '_wrapper thead th').resizable({

        handles: "e",

        alsoResize: '#' + tableName + '_wrapper table', //Not essential but makes the resizing smoother

        start: function (e) {
            console.log('started resizing')

            document.querySelectorAll('th').forEach(target => {
                target.addEventListener("click", preventOrdering, true);
            })

        },

        stop: function (e) {
            console.log("Stopped resizing");
            saveColumnSettings(table, tableName);
            document.querySelectorAll('th').forEach(target => {
                target.removeEventListener("click", preventOrdering, true);
            })
        }
    });

function preventOrdering(e) {
    console.log('click capture th');
    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();
}

I'll try to update the fiddle later.

annafw

Updatet fiddle: http://live.datatables.net/cefarazo/1/edit
"table.on('mouseup.dt', preventOrdering);" (and table.off('mouseup.dt', preventOrdering);) in start/stop was also necessary.