Reordering not triggering server editor update

Reordering not triggering server editor update

p3loadsp3loads Posts: 11Questions: 3Answers: 0

Hi,

I am trying to use reordering feature as by example https://editor.datatables.net/examples/extensions/rowReorder.html
I am also using Bootstrap 4.3.1 styling, and I have imported:

CSS
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"

"https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css"
"https://cdn.datatables.net/buttons/1.6.0/css/buttons.bootstrap4.min.css"
"https://cdn.datatables.net/select/1.3.1/css/select.bootstrap4.min.css"
"https://cdn.datatables.net/keytable/2.5.1/css/keyTable.bootstrap4.min.css"
"https://cdn.datatables.net/rowreorder/1.2.6/css/rowReorder.bootstrap4.min.css"
"/datatable/editor-1.9.1/css/editor.bootstrap4.min.css"

and JS

"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"

"https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js">
"https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js">
"https://cdn.datatables.net/buttons/1.6.0/js/dataTables.buttons.min.js">
"https://cdn.datatables.net/buttons/1.6.0/js/buttons.bootstrap4.min.js">
"https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js">
"https://cdn.datatables.net/select/1.3.1/js/select.bootstrap4.min.js">
"https://cdn.datatables.net/keytable/2.5.1/js/dataTables.keyTable.min.js">
"https://cdn.datatables.net/rowreorder/1.2.6/js/dataTables.rowReorder.min.js">
"/datatable/editor-1.9.1/js/dataTables.editor.min.js">
"/datatable/editor-1.9.1/js/editor.bootstrap4.min.js">

After drag-drop operation on datatable, rows get reordered, but editor is not posting anything to server side.

Thanks for helping/advising.

This question has accepted answers - jump to:

Answers

  • p3loadsp3loads Posts: 11Questions: 3Answers: 0
    edited October 2019

    Jquery code ('...url' is fictitious):

    `
    var tableId = '#pagesTable';

        var editor = new $.fn.dataTable.Editor({
            ajax: '...url',
            table: tableId,
            idSrc: 'pageid',
            fields: [
                { label: 'Order:', name: 'ordering', fieldInfo: 'This field can only be edited via click and drag row reordering.' },
                { label: 'Title:', name: 'title' },
            ]
        });
    
    
        var table = $(tableId).DataTable({
            ajax: '...url',
            columns: [
                { data: 'ordering' },
                { data: 'title' },
            ],
            rowReorder: {
                dataSrc: 'ordering',
                editor:  editor
            },
    
        });
    

    `

  • p3loadsp3loads Posts: 11Questions: 3Answers: 0
    edited October 2019

    I have also added some event listeners to "debug" the code:

            table.on( 'row-reordered', function ( e, diff, edit ) {
                console.log("reorder");
            });
    
            editor
                .on('postCreate postRemove', function () {
                    console.log("postCreate");
                })
                .on('initCreate', function () {
                    console.log("initCreate");
                })
                .on('initEdit', function () {
                    console.log("initEdit");
                })
                .on('preSubmit', function () {
                    console.log("preSubmit");
                });
    

    Without an editor in rowReorder options, the 'row-reordered' event is fired by table.

    However, if I set editor (as code in my previous post) only 'initEdit' events get fired.

    Thanks

  • colincolin Posts: 15,179Questions: 1Answers: 2,590
    Answer ✓

    Hi @p3loads ,

    It's working as expected in this example, so it's going to be something to do with your implementation. Are you able to link to your page, or create a test case if that's not possible.

    Cheers,

    Colin

  • p3loadsp3loads Posts: 11Questions: 3Answers: 0

    Hi @colin
    thanks four your feedback. I have packaged a static html file that you can access here:
    https://u25e.z16.web.core.windows.net
    The example gets few data at startup from a static json file '/json/pages.json'.
    On JS console you can verify that only 'initEdit' event is triggered after reordering through d-n-d.
    I have attempted to figure out but withou success so far.

    Thanks for your feedbacks.
    Regards

  • p3loadsp3loads Posts: 11Questions: 3Answers: 0

    Hi @colin, did you give a look into it?
    Best

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    Answer ✓

    Hi,

    I'm going to take over from Colin here - thanks for the example. Could you add rowId: 'pageid' to your DataTable initialisation object please?

    Thanks,
    Allan

  • p3loadsp3loads Posts: 11Questions: 3Answers: 0

    Hi @allan ,

    yes now it works! Now correctly fires a 'preSubmit' event right before posting to server. Sorry, but I was unable to figure out.
    Thanks a lot for your valuable support.
    Best to All

This discussion has been closed.