How to dynamically change the dataSrc while keeping the same ajax URL

khicksiv

Hey Team,
Been working on a scenario where i want to dynamically change the dataSrc via something like a drop down. I can see where we can use the ajax.url API to change the URL and reload. But im curious if you can do this without using a different URL. Essentially i have a set of data:
{"group1" : [values],"group2": [values],...}

and when i initialise the dataTable i use:

var jtable = $('#jira').DataTable( {
"ajax": {
"url": 'jira_json.txt',
"dataSrc": "" },
"dom": 'Bfrtip',
"autowdith": true,
"deferRender": true,
"columnDefs": [ {
"targets": 0,
"render": function ( data, type, full, meta ) {
return '<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#Detail" onclick="getData(this.innerHTML);">'+data+'</button>';
}
} ],
});
});

What i would like to do is something like

$('#project').on('change', function () {
var filter = $( "#project option:selected" ).val();
var table = $('#jira').DataTable();
//this next line is wrong for sure but table.ajax.dataSrc is not a property that seems to be changeable
table.ajax = {
"url": 'jira_json.txt',
"dataSrc": filter };
table.draw();
});
on a select box and on change modify the dataSrc i am using and then redraw

Any ideas on what i can do to get this working?

Thanks Kenny

rduncecb

You could implement the ajax option as a function per ajax, the function could make its own ajax calls internally and then 'normalise' the data root element before passing it to the callback.
Remove dataSrc option, assume data default.

"ajax": function (data, callback, settings) {
    $.ajax({ ... your ajax call ... })
    .then(function(data) {
        // normalise data,
        var root;

        if(shouldBeFilterRoot) {
            root = 'filter';
        }
        else if(shouldBeSomethingElseRoot) {
            root = 'somethingElse';
        }

        callback({data: data[root]});
   });
}

khicksiv

Thats a good idea @rduncecb , I did get a work around where i made the initialisaztion a function and passed in the dataSrc id like to look at. I then added the Destroy parameter to the initialisation and on cahnge i call that function to create the dataTable. This seems to work, though it is probably a clunky way to do it.

Still open to other options if they exists.

rduncecb

ajax.dataSrc can be a function, you could also normalise it there instead?

allan

Yes - using ajax.dataSrc to do this would be my suggestion as well. Have the function derive the data array from the source wherever it might be and then return it.

Allan