Row reorder with create, update, remove ajax call

paweltrela

I have ajax calls like this:

        editor = new $.fn.dataTable.Editor( {
            idSrc:  'id',
            ajax: {
                cache: true,
                create: {
                    type: "POST",
                    url: "/api/boards"
                },
                edit: {
                    type: "PATCH",
                    url: "/api/boards/_id_"
                },
                remove: {
                    type: "DELETE",
                    url: "/api/boards/_id_"
                }
            },
......

Is it possible to call rowReorder extension and update row order with the structure like this?
It works fine but i dont have idea how i could create ajax endpoint after dropping a row in different place.

paweltrela

Full javascript code:

<script type="text/javascript">

    var editor; // use a global for the submit and return data rendering in the examples

    $(document).ready(function() {

        editor = new $.fn.dataTable.Editor( {
            idSrc:  'id',
            ajax: {
                cache: true,
                create: {
                    type: "POST",
                    url: "/api/boards"
                },
                edit: {
                    type: "PATCH",
                    url: "/api/boards/_id_"
                },
                remove: {
                    type: "DELETE",
                    url: "/api/boards/_id_"
                }
            },
            table: "#example",
            fields: [ 
                {
                    label: 'Order:',
                    name: 'order',
                    fieldInfo: 'This field can only be edited via click and drag row reordering.'
                }, {
                    label: "First name:",
                    name: "name"
                }, {
                    label: "Last name:",
                    name: "surname"
                }, {
                    label: "Country:",
                    name: "country",
                    type: "select",
                    options: [
                        "Poland",
                        "Germany",
                        "Sweden"
                    ]
                }, {
                    type: "hidden",
                    name: "board_id",
                    default: "<%= @board.id %>"
                }
            ]
        } );

        // $('#example').on( 'click', 'tbody td', function () {
        //     editor.inline( this, {
        //         submitOnBlur: true
        //     } );
        // } );
     
        var table = $('#example').DataTable( {
            dom: "Bfrtip",
            ajax: {
                cache: true,
                "url": "/api/boards/<%= @board.id %>",
                "dataSrc": ""
            },
            columnDefs: [
            {
                targets: '_all',
                defaultContent: " ",
                orderable: false
            }],
            columns: [
                {
                    data: "order",
                    className: 'reorder'
                },
                { 
                    data: "id"
                },
                { 
                    data: "name", 
                    render: $.fn.dataTable.render.text()
                },
                { 
                    data: "surname",
                    render: $.fn.dataTable.render.text()
                },
                { 
                    data: "country",
                    render: $.fn.dataTable.render.text()
                }
            ],
            buttons: [
                { extend: "create", editor: editor },
                { extend: "edit", editor: editor },
                { extend: "remove", editor: editor }
            ],
            rowReorder: {
                dataSrc: 'order',
                editor:  editor,
            },
            select: true,
            paging: false,
        } );

    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();
        } );

    } );

</script>

paweltrela

Here you can see my project :

https://crmclone.herokuapp.com/boards/1

colin

The RowReorder is classed as an edit - so it would just work the same as a normal edit. This example here should help. Please let us know if that doesn't solve it,

Colin