DataTables In Line Editor

Philwn

Im currently in the trial period of editor and If i can make it work within this period we will be buying, Im reallt struggling with this though and can't find documentation on here to help me...

I have the inline editor working to a point that on enter the changed data is sent via ajax, the database record is updated correctly, datatables errors on the returned object so when it is trying to update the datatables table. If i refresh the page the data is correct as it fetches the database entries again.

            // assemble the successful data response
            $resSuccessful = [];

            foreach( $rowIdArray as $rowId) {
                $resSuccessful[] = array('DT_RowId' => 'row_' .$rowId) + $input['data'][$rowId] ;
            }

            return response()->json(
                array(
                    'data' =>  $resSuccessful
                )
            );

The sent parameters:

action=edit
data[1][title]=test

The response/returned object:

{"data":[{"DT_RowId":"row_1","title":"test"}]}

I have tried changing the returned response to a number of different keys/values all vary in similar errors. I cant find anything on here about how the data needs to be for it to succesfully update without reloading the page.

(function($){

$(document).ready(function() {
    var editor = new $.fn.dataTable.Editor( {
        ajax: {
            url: '/pipim/public/projects/anyData',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        },
        table: '#projects',
        idSrc:  'id',
        fields: [
            {
                "label": "id:",
                "name": "id"
            },
            {
                "label": "proj:",
                "name": "proj"
            },
            {
                "label": "title:",
                "name": "title"
            },
            {
                "label": "leadBy:",
                "name": "leadBy"
            },
            {
                "label": "launchdate:",
                "name": "launchdate",
                "type": "datetime",
                "format": "YYYY-MM-DD"
            },
            {
                "label": "textWritten:",
                "name": "textWritten",
                "type": "checkbox",
                "separator": ",",
                "options": [
                    "1"
                ]
            },
            {
                "label": "translations:",
                "name": "translations",
                "type": "checkbox",
                "separator": ",",
                "options": [
                    "1"
                ]
            },
            {
                "label": "images:",
                "name": "images",
                "type": "checkbox",
                "separator": ",",
                "options": [
                    "1"
                ]
            }
        ]
    } );

    $('#projects').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this );
    } );

    $('#projects').DataTable( {
        dom: 'Bfrtip',
        ajax: '{!!route('projects.data')!!}',
        columns: [
            {   
                "data": "id"
            },
            {
                "data": "proj"
            },
            {
                "data": "title"
            },
            {
                "data": "leadBy"
            },
            {
                "data": "launchdate"
            },
            {
                "data": "textWritten"
            },
            {
                "data": "translations"
            },
            {
                "data": "images"
            }
        ],
        select: true,
        lengthChange: false,
        buttons: [
            { extend: 'create', editor: editor },
            { extend: 'edit',   editor: editor },
            { extend: 'remove', editor: editor }
        ]
    } );
} );

}(jQuery));

Any help much appreciated.

allan

Hi,

Thanks for your question. The problem is that the response only includes a sub-set of the values required for the row. At the moment Editor requires that the full data object for the row be returned.

What might be compounding the issue is that, by default, Editor will only submit the data that has changed when inline editing (typically only the cell that has been edited). You can use the submit option of the form-options object to control that - for example:

editor.inline( this, {
  submit: 'allIfChanged'
} );

That may or may not be useful for you, but the key here is to return the full data set for the row. Otherwise DataTables should be showing a "Unknown property" error.

Regards,
Allan

Philwn

hmmm, ok Thanks allan. This has solved that problem but kind of brought a new one to the table.

My table has multiple fields which are actually joins and not to be editable. is there a way to prevent cells from being editable and if so do they still need returning in the object?

Philwn

I have made some of the fields editable, this now prevents the non editable cells from being submitted which in turn prevents them from being returned.

Can you recomend a way around this?

allan

is there a way to prevent cells from being editable

Your update post suggests you've got this addressed already, but in case anyone else reads this thread - this example shows how it might be done.

and if so do they still need returning in the object?

Yes. The full row's data must be returned in the JSON response from the server. There is currently no option to disable that requirement. It will be optional in 1.6.

Allan