Reordering not triggering server editor update

p3loads

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.

p3loads

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
        },

    });

`

p3loads

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

colin

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

p3loads

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

p3loads

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

allan

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

p3loads

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