What is the variable name of the data being send by Editor, when creating a new row or editing.

huertoVerde

Hello,
I am new to js and jquery so please correct any wrong statment I make.
i have a couple of questions.
I've acomplished loading data into my Datatable with an ajax request.

Now i would like to add new, edit and delete rows in my table. I am Using Spring MVC for my Backend. I am having trouble receiving the information on the backend.

I've read the Documentation and know what is being sent.
https://editor.datatables.net/manual/server#Create

How ever i would like to log it in the console when the button is being clicked. Where should i place my console.log() and what is the variable name of the information being sent?

I would like to add a row below a selected row. How can i replace the [0] in the payload?

and last in what format is the information being sent? JSON?

heres my code.
thanxs in advanced.

var editor;
var arbeitsTabelle;

        editor = new $.fn.dataTable.Editor( {
            ajax: {
                create:{
                    type:'POST',
                    url: '/editor/create'
                },
                edit:{
                    type:'PUT',
                    url: '/editor/edit',
                },
                remove:{
                    type:'DELETE',
                    url: '/editor/remove'
                },
            },

            table: "#arbeitsTabelle",
            idSrc:'id',
            fields: [ {
                    label: "Pid:",
                    name: "pid"
                }, {
                    label: "Vorgaenger:",
                    name: "vorgaenger",
                },
                   ...
            ]
        } );

        arbeitsTabelle = $('#arbeitsTabelle').DataTable({
            retrieve: true,
            paging: false,
            info: false,

            columns: [
                { data: "id" },
                { data: "pid" },
                { data: "vorgaenger" },
                 ...
            ], 
            dom: "Bfrt",
            buttons: [
                { extend: "create", editor: editor },
                { extend: "edit",   editor: editor },
                { extend: "remove", editor: editor },
            ]
        });

colin

How ever i would like to log it in the console when the button is being clicked. Where should i place my console.log() and what is the variable name of the information being sent?

The easiest way would be use postCreate or another of the events. See example here. If you want to see what's being sent to the server, you can use ajax.data.

I would like to add a row below a selected row. How can i replace the [0] in the payload?

I'm not clear what you mean here. You can add to the data being sent, see my reply above, but you wouldn't want to change it as the server-side scripts expect the data in a specific format.

Also, when you say "add a row" - is that to the payload, or into the table itself?

Colin

huertoVerde

Thanks for the answer.
so i achived what iw anted with this code

            ajax: {
                create:{
                    type:'POST',
                    url: '/editor/create',
                    data: function(d){
                        console.log(JSON.stringify(d))
                    }
                },

i would like to add a new row to the table, but not at the top, i would like to add it under a selected row.

colin

i would like to add a new row to the table, but not at the top, i would like to add it under a selected row.

You can use row.add() to create a row in the local data. If you want Editor to create on the search, then call create(). This example here is creating a blank row, then inline editing, so may be useful.

The only problem with doing this is because of the ordering of the table, you can't guarantee it'll be beneath the other row unless the ordering permits it. It would be slotted into the table where the ordering determines,

Colin

huertoVerde

Well i have disabled ordering, Because the server gives me the Data in a specific order.

Thankyou for the example. However i do not understand why when using the make empty button, editor is being opend but there is no submit or create buton, on the example when i hit enter it does work.

colin

That's because it's inline editing - and by default you need to press 'Enter' to submit that data. That can be changed to submitting on blur (when focus is lost) - see example here.

Colin

huertoVerde

Hello colin,

i have a follow up question. With this code i have achieved what i want to do.
After selecting the row in the table, the row data is set to the variable xdata. wich then is available when I click on the create button. How ever, this is not always the case, if for example the user clicks on somethin else before clicken the create button.
so i added this code to my .on('initCreate') method on line 14

xdata = arbeitsTabelle.rows( { selected: true } ).data();

my console log outputs

Name: undefined ID: undefined

what am i doing wrong on row 14?

var xdata;
var rID;

$('#arbeitsTabelle').on('click', 'tr', function () {
     xdata = arbeitsTabelle.row( this ).data();
        console.log("Name: " + xdata.name + " ID: " + xdata.id);
        if (xdata.status== 'ETAT' || xdata.status=='ETATp' ){
            updateProgressBar();
            rID=xdata.id;               
        }
} );

editor.on('initCreate', function() {
        xdata = arbeitsTabelle.rows( { selected: true } ).data();
        console.log("Name: " + xdata.name + " ID: " + xdata.id);
        if(xdata.status=='ETAT' || xdata.status == 'ETATp'){
            editor.field('pid').def(xdata.id);
            editor.field('pid').disable();
            editor.field('wurzel').def(0);
        }       
});

thankyou in advanced for any help.

kthorngren

arbeitsTabelle.rows( { selected: true } )

The rows() API returns an array of rows even if its just one. xdata will be an array so you will need to do something like xdata[0].name. Or use row() to return one row for example: xdata = arbeitsTabelle.row( { selected: true } ).data();.

Kevin