Inline edit javascript dataTable without AJAX backend datasource

Inline edit javascript dataTable without AJAX backend datasource

Denis.David@dqs.deDenis.David@dqs.de Posts: 28Questions: 8Answers: 1

I have a dataTable with javascript datasource and a dataEditor (whith inline edit enabled) which is bound to the dataTable.
When editing data I want the changes only to be reflected in the DOM, not in any AJAX backend datasource and not in localstorage.
How can I simply shortcut the ajax: parameter function in the Editor initialization?

I already tried to following approach but unfortunately it does not work correctly. Although changes are saved in the DOM, selecting a changed record again for inline editing shows the wrong record's data in the inline edit field.

var output = { data: [] };

        if ( d.action === 'create' ) {
            $.each( d.data, function (key, value) {
                var rec = {};
                rec[key] = value;
                output.data.push( rec );
            } );
        }
        else if ( d.action === 'edit' ) {
            $.each( d.data, function (key, value) {
        var currentRow = $("#tableName").dataTable().fnGetData(d);
                currentRow.id = key;
                $.extend(currentRow, value);
                output.data.push(currentRow);
            });
        }
    successCallback(output);

Have I missed something?

Thanks for your help,

Denis

This question has an accepted answers - jump to answer

Answers

  • Denis.David@dqs.deDenis.David@dqs.de Posts: 28Questions: 8Answers: 1

    Just tried with regular edit - same result.
    It seems as if the dataTable is updated correctly with the changed values but when selecting a record and hitting edit the wrong record is pulled into the edit field,

  • Denis.David@dqs.deDenis.David@dqs.de Posts: 28Questions: 8Answers: 1
    edited August 2015 Answer ✓

    Finally got it working (code designed for single row edit only):

    var editor = new $.fn.dataTable.Editor({
    
    ajax: function ( method, url, d, successCallback, errorCallback ) {
               var output = { data: [] };
    
                if ( d.action === 'create' ) {
                var addedRow = d.data[Object.keys(d.data)[0]];
                        addedRow.id = uuid.new(); // get new GUID from custom method
                        output.data.push(addedRow);
                }
    
                else if ( d.action === 'edit' ) {
            var key = Object.keys(d.data)[0];
                    var editedRow = d.data[Object.keys(d.data)[0]];
                    editedRow.id = key;
                    output.data.push(editedRow);
                }
    
            successCallback(output);
    }
    });
    
  • Denis.David@dqs.deDenis.David@dqs.de Posts: 28Questions: 8Answers: 1

    @admin: please kindly mark last reply as solution. Unfortunately I have no clue how I do this for my own reply. Thanks.

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin

    Hi Denis,

    Good to hear you got this working in the end :-)

    Allan

This discussion has been closed.