Why rowReorder is not sending ordercolumn value as param? How it works?

paweltrela

Hello,

i have big issue with rowReorder feature.
I have bought dataTables editor but can't make rowReorder function to work.

When i drag an item, it works, but it is not sending data through the api.
The only thing which request is sending is row id.

I think that it should send me order parameter? Then i should modify it in controller, and
send response with new order which will update the query?

My code:

editor = new $.fn.dataTable.Editor({
    idSrc: 'id',
    ajax: {
        create: {
            type: "POST",
            url: "/api/production"
        },
        edit: {
            type: "PATCH",
            url: "/api/production/_id_"
        },
        remove: {
            type: "DELETE",
            url: "/api/production/_id_"
        }
    },
    table: "#example",
    fields: [{
        label: 'Order:',
        name: 'order',
        fieldInfo: 'This field can only be edited via click and drag row reordering.'
    }, {
        label: "Zadanie:",
        name: "name"
    }, {
        label: "Deadline:",
        name: "task_deadline",
        type: "date",
        def: function() {
            return new Date();
        }
    }, {
        label: "Status:",
        name: "task_status",
        type: "select",
        options: [
            "Nie przypisano",
            "Przypisano",
            "W trakcie",
            "Po stronie klienta",
            "Wstrzymano",
            "Zaakceptowano",
            "Strona na domenie"
        ]
    }, {
        type: "hidden",
        name: "board_id",
        default: "<%= @board.id %>"
    }, {
        type: "hidden",
        name: "user_id",
        default: "<%= current_user.id %>"
    }, {
        label: "Grupa:",
        name: 'task_group',
        type: "select2",
        opts: {
            minimumResultsForSearch: 20,
        },
        options: < %= raw @board.task_group % >
    }, {
        label: "Przypisano:",
        name: "assigned",
        type: "select",
        multiple: true,
        options: [ <
            % @users.each do |item | % > {
                    label: "<%= item.name %>",
                    value: "<%= item.id %>"
                }, <
                % end % >
        ]
    }]
});

$('#example').on('click', 'tbody td', function() {
    editor.inline(this, {
        submitOnBlur: true
    });
});

var groupColumn = 5;
var table = $('#example').DataTable({
    dom: "Bfrtip",
    ajax: {
        "url": "/api/boards/<%= @board.id %>",
    },
    columnDefs: [{
        targets: '_all',
        defaultContent: " ",
        orderable: false,
        targets: groupColumn,
    }, {
        targets: 4,
        render: $.fn.dataTable.render.moment('YYYY-MM-DD', 'DD MMM YYYY', 'pl')
    }],
    //order: [[ groupColumn, 'asc' ]],
    order: [
        [0, 'asc']
    ],
    drawCallback: function(settings) {
        var api = this.api();
        var rows = api.rows({
            page: 'current'
        }).nodes();
        var last = null;
        var removeButton = '';

        api.column(groupColumn, {
            page: 'current'
        }).data().each(function(group, i) {
            if (last !== group) {
                $(rows).eq(i).before(
                    '<tr class="group"><td colspan="7"><strong>Grupa: </strong>' + group + ' ' + removeButton + '</td></tr>'
                );

                last = group;
            }
        });
    },
    rowGroup: {
        emptyDataGroup: null
    },
    columns: [{
        data: "order",
        className: 'reorder order',
        width: "20px"
    }, {
        className: "text-center",
        render: function(data, type, full, meta) {
            var task_id = '<a data-toggle="modal" data-target="#updateModal" data-remote="true" href="/updates/show?task_id=' + full.id + '"><i class="fas fa-comment-alt"></i></a><span id="task_' + full.id + '" class="task_counter">1</span>';
            return task_id;
        },
        sortable: false,
        width: "20px"
    }, {
        data: "name",
        render: $.fn.dataTable.render.text(),
        width: "400px"
    }, {
        data: "task_status",
        render: $.fn.dataTable.render.text(),
        className: 'status-col-padding',
        width: "140px",
        render: function(data, type, full, meta) {
            var column_edit_style = 'column_edit_style'
            if (full.task_status == "Nie przypisano") {
                var color_class = "color_class_grey";
            } else if (full.task_status == "Przypisano") {
                var color_class = "color_class_light_green";
            } else if (full.task_status == "W trakcie") {
                var color_class = "color_class_orange";
            } else if (full.task_status == "Po stronie klienta") {
                var color_class = "color_class_light_blue";
            } else if (full.task_status == "Wstrzymano") {
                var color_class = "color_class_red";
            } else if (full.task_status == "Zaakceptowano") {
                var color_class = "color_class_pastel_green";
            } else if (full.task_status == "Strona na domenie") {
                var color_class = "color_class_dark_blue";
            }
            var task_status = '<div class="status_square ' + column_edit_style + ' ' + color_class + '">' + full.task_status + '</div>';
            return task_status;
        }
    }, {
        data: "task_deadline",
        width: "80px"
    }, {
        data: "task_group",
        render: $.fn.dataTable.render.text(),
        sortable: false,
    }, {
        data: "assigned",
        editField: "assigned",
        render: function(data, type, full, meta) {
            var full_assigned = full.assigned;
            items_assigned = '';
            full_assigned.forEach(printAssigned);

            function printAssigned(item) {
                items_assigned = items_assigned + item['label'] + ' ';
            }
            return items_assigned;
        },
    }],
    rowId: function(a) {
        return 'id_' + a.id;
    },
    buttons: [{
            extend: "create",
            editor: editor
        },
        {
            extend: "remove",
            editor: editor
        }
    ],
    rowReorder: {
        enable: true,
        dataSrc: 'order',
        editor: editor
    },
    language: {
        buttons: {
            "create": "Nowy task",
            "remove": "Usuń"
        },
        select: {
            rows: ""
        },
        search: "Szukaj:",
        info: "Liczba zadań w tej tablicy: <strong>_TOTAL_</strong>",
        infoEmpty: "",
        emptyTable: "Brak zadań w tej tablicy",
    },
    select: true,
    paging: false,
    fixedHeader: true
});

$('#example tbody').on('click', 'tr.group', function() {
    var currentOrder = table.order()[0];
    if (currentOrder[0] === groupColumn && currentOrder[1] === 'asc') {
        table.order([groupColumn, 'desc']).draw();
    } else {
        table.order([groupColumn, 'asc']).draw();
    }
});

editor
    .on('postCreate postRemove', function() {
        // After create or edit, a number of other rows might have been effected -
        // so we need to reload the table, keeping the paging in the current position
        table.ajax.reload(null, false);
    })
    .on('initCreate', function() {
        // Enable order for create
        editor.field('order').disable();
    })
    .on('initEdit', function() {
        // Disable for edit (re-ordering is performed by click and drag)
        editor.field('order').disable();
    })

});

colin

There are a couple of things that might be the issue.

1. rowId - you're creating your own tag there, but this should be the same as that used in the Editor initialisation, which is just the field id.
2. you've declared columnDefs and columns - if you're using columns, then you shouldn't have columnDefs as they'll be overwritten. Merge them both in the columns

Hope that helps,

Colin

paweltrela

@colin Thank you very much ! rowReorder is the function i am fighting since last month and it finally works!

What i did:

1. i've removed idSrc from my code and added DT_RowId field in my json with the value from id, it looks like this

"DT_RowId":215

i've removed columnDefs and moved everything to the column fields.

And now javascript is sending parameters through the PATCH method.
Thank you!