Changing the url of an Ajax request dynamically

I have an ordinary Datatables in my web page, it looks like this:

$(document).ready(function() {

    var table = $('#mydb').DataTable({
        "serverSide": true,             
        "ajax": "/myapi/?item=free&format=datatables",
        "columns": [

            {data: "item",
            {data: "Price"},

        ]
    });
    setInterval( function () {
    table.ajax.reload();
}, 10000 );
});

This table refreshes every 10 seconds, retrieving the latest values from my database.

Now, i would like to add a button to change dynamically the content of the webpage, so that it retrieves the values from ?item=taken instead of ?item=free, without refreshing the page.

Here is what i tried:

var myvar = 'item=free'

function ChangeVar(){
        myvar = 'item=taken'

    }

$(document).ready(function() {

    var table = $('#mydb').DataTable({
        "serverSide": true,             
        "ajax": "/myapi/?'+ myvar + '&format=datatables",
        "columns": [

            {data: "item",
            {data: "Price"},

        ]
    });
    setInterval( function () {
    table.ajax.reload();
}, 10000 );
});

Html

<button onclick="ChangeVar()" name="button5" type="submit" class="btn btn-primary">See taken items</button>

I added a button that points to the function ChangeVar(), the function should change the main variable's name, which is used in the ajax request. That didn't work, maybe because i'm not using the variable's scope properly, and i think that it wouldn't work because Ajax is asinchronous, so i would need to add something more.

Can someone point me to a solution that would work to this problem?

from Changing the url of an Ajax request dynamically