add custom parameters to ajax url after initialization and get new json

jna

Hi
What is the best way to add parameters to the ajax url and get the new filtered json from the server?
What I want is to change the json data when doing an 'onchange' on a select with that selected value
So: I get the value:

type=mySelect[MySelect.selectedIndex].value 
and append it to the ajaxurl:  this.apiUrl += '&type=' + type

that is no problem
When I initialize datatables first my ajaxurl looks like this:
http://127.0.0.1:3000/mockData/searchResult.json?a=1&draw=1&columns%5B0%5D%5Bdata%5D=function&columns%5B0%5D%5Bname%5D=&columns%5B0%5D%5Bsearchable%5D=true&columns%5B0%5D%5Borderable%5D=false&columns%5B0%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B0%5D%5Bsearch%5D%5Bregex%5D=false&start=0&length=10&search%5Bvalue%5D=&search%5Bregex%5D=false&_=1536235815080

And when i try to modify/add parameter it looks like this: http://127.0.0.1:3000/mockData/searchResult.json?a=1&type=type-2

So all the original parameters are stripped since they are attached by datatable init.

Am I going down the wrong path or is there a better way to do this?

My initialization looks like this:

table.DataTable( {
            "processing": true,
            "serverSide": true,
            "searching": false,
            "ordering": false,
            "deferRender": true,
            "lengthChange": false,
            "info": false,
            "paging": true,
            'retrieve': true,
            "ajax": {
                url: this.apiUrl
            },
} );

colin

Hi @jna ,

Probably the best way would be to use ajax.data as in this example here to add your additional values.

Hope that helps,

Cheers,

Colin

jna

Yes, that works but only on first initialization. Somehov I have trouble re-initialize datatable. I guess I should see a new json url in my network with the new select value when doing my onchange

Basically i now init datatable in a function with a parameter:

initDataTable(subjectValue);

I do that both on load and onchange, but on change nothing happens?
I thought initDataTable() with 'retrieve': true, would allow it?

initDataTable(subjectValue) {
        const table = this.$datatable;

        table.DataTable( {
            "processing": true,
            "serverSide": true,
            "searching": false,
            "ordering": false,
            "deferRender": true,
            "lengthChange": false,
            "info": false,
            "paging": true,
            //"type": 'POST',
            'retrieve': true,

            "ajax": {
                url: this.apiUrl,
                data: function ( d ) {
                    d.subject = subjectValue;

                }
            },
        } );

now my json url with subjectparameter looks like this: http://127.0.0.1:3000/mockData/searchResult.json?a=1&draw=1&columns%5B0%5D%5Bdata%5D=function&columns%5B0%5D%5Bname%5D=&columns%5B0%5D%5Bsearchable%5D=true&columns%5B0%5D%5Borderable%5D=false&columns%5B0%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B0%5D%5Bsearch%5D%5Bregex%5D=false&start=0&length=10&search%5Bvalue%5D=&search%5Bregex%5D=false&subject=subject-1&_=1536311199943

jna

Guess I should use ajax.reload https://datatables.net/reference/api/ajax.reload()

But how do I call table.ajax.reload(); from my external select function?

colin

Hi @jna ,

Yep, ajax.reload() sounds like it's the way to go. If it's the only table on the page, you could call it like

$('table').DataTable().ajax.reload()

and that would do the trick,

Cheers,

Colin

jna

That works. In my onchange event i call

this.$datatable.DataTable().ajax.reload();

and in my datatable options it just listens to the value of the select

data: function ( d ) {
d.subject = jQuery('select[data-ref="search-filterbar__subject"]').val();
}

Perfect! thanks