column-reorder event is not firing

dpanscik

I need to use the column-reorder event to trigger a re-render of check boxes after columns move.

Soo.... step one. Getting the column-reorder event to trigger.

Right now, its not triggering.

here is my column-reorder event handler

        $("#ApForm").on('column-reorder', function (e, settings, details) {
            alert("column reorder");
        });

its along side my other event handlers

        $("#ApForm").on('column-reorder', function (e, settings, details) {
            alert("column reorder");
        });

        $('#ApForm').on('change', 'input.editor-pinkHighlight', function () {
            editor
                .edit($(this).closest('tr'), false)
                .set('pinkHighlight', $(this).prop('checked') ? 1 : 0)
                .submit();

        });
        $('#ApForm').on('change', 'input.editor-yellowHighlight', function () {

            editor
                .edit($(this).closest('tr'), false)
                .set('yellowHighlight', $(this).prop('checked') ? 1 : 0)
                .submit();
        });

        $('#ApForm').on('click', 'tbody td:not(".excludeFromSubmit")', function (e) {
            editor
                .inline(this, {
                    //onBlur: 'submit'
                });
        });

I'm not getting a browser alert when I am moving columns.

colin

It seems OK here - https://live.datatables.net/jatilobi/1/edit

Could you look at that, please, and see if it helps. If it's still not working for you, please can you update my example, or link to your page, so that we can see the problem.

Cheers,

Colin

dpanscik

Hi Colin,

I got this to work.

so... I figured out two things.

the event MUST be in the code after the table creation.

and...

For some reason this does not work

        $('#myTable').DataTable( {
    colReorder: true
} );
$('#myTable').on('column-reorder', function (e, settings, details) {
            alert('column changed')
        });

But this does work

        var table = $('#myTable').DataTable( {
    colReorder: true
} );
table.on('column-reorder', function (e, settings, details) {
            alert('column changed')
        });

kthorngren

For $('#myTable').on('column-reorder') to work I believe you need to ad the dt namespace as described in the events docs, for example: $('#myTable').on('column-reorder.dt').

Kevin

dpanscik

adding in the .dt worked! Thank you!