Override Editor Data default function

Lucho_1312

Hi!
Is it possible to override the default function used in the ajax data method?

I mean, I want to set up the Editor to work by default like this:

var editor = new $.fn.Editor( {
    ajax:  {
        url: 'php/staff.php',
        contentType: 'application/json',
        data: function ( d ) {
            return JSON.stringify( d );
        }
    }
} );

But I want to be able to setup the editor like this:
https://editor.datatables.net/examples/advanced/REST.html

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

Thanks!
Luciano

Lucho_1312

That's because my REST server needs the data in JSON format, not as parameters.

allan

Yes, simply use the extra parameters you need in the REST objects - e.g.:

        create: {
            type: 'POST',
            url:  '../php/rest/create.php',
            contentType: 'application/json',
            data: function ( d ) {
                return JSON.stringify( d );
            }
        },

Allan

Lucho_1312

Thanks!
I found something like that in a post here, so I made this (in case someone else needs something like me):

    var _overrideEditorAjax = function(data) {
        var ajax = {};

        switch (data.editorOverrideAjax) {
            case 'restify':
                var urls = data.editorRestifyUrls;
                var ajaxBase = {
                    contentType: 'application/json; charset=utf-8',
                    processData: 'false',
                    dataType: 'json',
                    data: function(d) {
                        return JSON.stringify(d);
                    }
                };
                ajax = {
                    create: $.extend(true, {
                        type: 'POST',
                        url: urls.create
                    }, ajaxBase),
                    edit: $.extend(true, {
                        type: 'PUT',
                        url: urls.edit
                    }, ajaxBase),
                    remove: $.extend(true, {
                        type: 'DELETE',
                        url: urls.remove
                    }, ajaxBase)
                };
                break;
            default:
                ajax = data.editorAjax;
                break;
        }
        return ajax;
    };

Using that, I can set all the table from html attributes (I'm trying to probe that making a jQuery plugin, I can set any dataTables + Editor just using data-* attributes, to make some tests with a NodeJS app)

So, the way I instance dataTables +editor is this:

<div data-plugin="datatable-editor-plugin" data-load-on-init="true">
<table 
    class="datatable-editor-plugin-data-table  dataTable" 
    data-order'[[1, "asc"], [2, "asc"]]' 
    data-ajax='{
        "url": "/api/v1/get-data-endpoint", 
        "cache": "false"
    }' 
    data-editor-override-ajax="restify"
    data-editor-restify-urls='{
        "create": "/api/v1/add-data-endpoint",
        "edit": "/api/v1/edit-data-endpoint/_id_",
        "remove": "/api/v1/remove-data-endpoint/_id_"
    }' 
    data-editor-id-src="_id">
    
    <thead>
        <tr>
            <th data-data="_id" data-visible="false">_id</th>
            <th data-data="name" data-class-name="custom-class-name"
            <th data-data="slug">Slug</th>
            <th data-data="enabled" data-type="checkbox">Active</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
</div>

and then using a plugin, I set everything in a generic way:

[... some code to initialize the jQuery plugin ...]
    var dataTableSelector = '.datatable-editor-plugin-data-table';
    var DataTableCrud = function(element, options) {
        this.$element = $(element);
        this.options = options;

        // If the loadOnInit param exists and is enabled, load the dataTable
        if (this.options.loadOnInit) {
            var dataTable = this.$element.find(dataTableSelector);

            this.options.editor = new $.fn.dataTable.Editor({
                ajax: _overrideEditorAjax(dataTable.data()),
                table: dataTable,
                idSrc: dataTable.data().editorIdSrc,
                fields: _generateEditorFields(dataTable),
                formOptions: {
                    inline: {
                        submitOnBlur: true
                    }
                }
            });

            this.options.editor
                .on('preSubmit', _modelPreSubmitData)
                .on('postSubmit', _modelPostSubmitData);


            _loadTableData(dataTable, options);

        }


        // Example of Binding element events
        this.$element
            .on(click, '.rd-toggle-extra-columns', $.proxy(this.toggleExtraColumns, this));
    };

/**
 * Generates the array of fields needed to initialize a Editor in a dataTable
 * @param  {jQuery selector} dataTable      DataTable selector
 * @return {Array}                          Array with the fields needed in the Editors initialization
 */
var _generateEditorFields = function(dataTable) {

    var _prepareField = function(th) {
        var columnData = $(th).data();
        var field = {
            // Uses the th data-label value. If it doesn't exist, uses the HTML inside
            label: columnData.label || $(th).html(),
            data: columnData.data,
            // Uses the th data-name value. If it doesn't exist, uses the data-data value
            name: columnData.name || columnData.data
        };

        switch (columnData.type) {
            case 'checkbox':
                field = $.extend(true, field, {
                    type: 'checkbox',
                    separator: '|',
                    options: [{
                        label: '',
                        value: 1
                    }]
                });
                break;
            // I can add more custom types here! 
        }
        return field;
    };

    var fields = [];
    dataTable.find('thead th').each(function(index, th) {

        fields.push(_prepareField(th));
    });
    return fields;
};