column-reorder event is not firing

column-reorder event is not firing

dpanscikdpanscik Posts: 125Questions: 32Answers: 0

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.

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,200Questions: 1Answers: 2,592

    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

  • dpanscikdpanscik Posts: 125Questions: 32Answers: 0

    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')
            });
    
  • kthorngrenkthorngren Posts: 20,537Questions: 26Answers: 4,816
    Answer ✓

    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

  • dpanscikdpanscik Posts: 125Questions: 32Answers: 0

    adding in the .dt worked! Thank you!

Sign In or Register to comment.