dataSrc for Editor?

TieKei

Hi,
I'm using ajax.dataSrc in DataTables to manipulate my data to restructure a complex json to fit the needs of selectize. This works.

But since I'm using an inline Editor I need the same function for DataTables Editor, after it POSTs the users changes to my server.

Any hints on that?

Thanks,
Tim

tangerine

This already has answers in the Forum. For example:

https://datatables.net/forums/discussion/24809/feature-request-add-ajax-datasrc-to-editor

TieKei

thanks for the link, maybe I'm failing to see something obvious, but how is this supposed to work?

The documentation Example shows how to define the custom ajax function, but how do I actually use it?

I mean, somewhere I have to call this function and fill in the parameters, right? Where and how?

This is my code (example with added dataFilter)

editor = new $.fn.dataTable.Editor({
            table: "#table",
            ajax: function ( method, url, data, success, error ) {
                $.ajax( {
                    type: method,
                    data: data,
                    dataType: "json",
                    url: url,
                    success: function (json) {
                        success( json );
                    },
                    error: function (xhr, error, thrown) {
                        error( xhr, error, thrown );
                    },
                    dataFilter: function (jsonString, type) {
                        if (type == "json") {
                            var json = JSON.parse(jsonString);
                            return doSomething(json);
                        }
                        return jsonString;
                    }
                });
            },

tangerine

Sorry Tim, I'm not sure enough on the detailed implementation. No doubt Allan will step in on Monday.

allan

The ajax.dataStc option is primarily designed to be able to tell DataTables where in a JSON object the data for the table is located. Editor doesn't need such an option since it reads the data from the rows in the DataTable.

What I'm to quite clear on here is what you want to achieve with respect to the interface between Editor and Selectize. Do you have data in each Ajax return that Editor receives that you want to be able to modify and then use in Selectize? If so, the postSubmit event provides the option to be able to modify the JSON object returned from the server before Editor does any processing on it.

Allan

TieKei

Hi Allan,

I'm using ajax.dataSrc to reduce complexity of my data source (the articles part):

{
    "data": [
        {
            "DT_RowId": "row_1",
            "articles": [
                {
                    "articleid": 22,
                    "articletype": "f",
                    "description": "article one (type f)"
                },
                {
                    "articleid": 23,
                    "articletype": "p",
                    "description": "article two (type p)"
                },

my function called by ajax.dataSrc transforms this into:

{
    "data": [
        {
            "DT_RowId": "row_1",
            "p": [ "23", ... ],
            "f": [ "22", ... ],
            "articles": [ 
                {
                    "articleid": 22,
                    "articletype": "f",
                    "description": "article one (type f)"
                },
                {
                    "articleid": 23,
                    "articletype": "p",
                    "description": "article two (type p)"
                },

which is then used by selectize to work correctly.

If there is a manual way to feed data into selectize please tell me, this may work with an event then.

allan

If there is a manual way to feed data into selectize please tell me

You can use the update() method of the selectize field type.

Allan

TieKei

Thanks allan!
For reference, my solution looks like this:

$("#licence-table").DataTable({
            "ajax": {
                "url": "...",
                "dataSrc": function ( json ) {
                    for ( var i=0, ien=json.data.length ; i<ien ; i++ ) {
                        json.data[i] = restructureJSON(json.data[i]); // this function does some transformation of my data before it is processed by DataTable
                    }
                    return json.data;
                }
            },

licenceEditor = new $.fn.dataTable.Editor({
    ...
});

// transform data returned by server, after editing a row, before it is processed by DtEditor
licenceEditor.on('postSubmit', function( e, json, data, action ){
            if(action == "edit") {
                json.row = restructureJSON(json.row); // same function as above in DataTables
            }
});

this allows me to simplify my datastructure at the client. Not included: transforming it back to the original datastructure (b.c. I was able to modify the backend :P )