javascript - Reload datatable after dropdown value changed

Question

I have a datatable and a dropdown. I want to change the datatable after dropdown value change. First of all, I tried the simplest trial & error by getting return value from controller after dropdown changes value and it works smoothly. Here is my code:

$('#ID_Univ').change(function () { 
    $.ajax({
        type: 'GET',
        url: '@Url.Action("Get_Approved")',
        data: { ID: _Id },
        success: function (data) {
                    // data, I got return value
                    // do something here
        }
    });
});

and then here is my datatable code

var tbl_Approved = $('#tbl_Approved').DataTable({
    lengthMenu: [10, 25, 50, 75, 100],
    searchPane: {
        columns: [':contains("Name")', ':contains("Period")'],
        threshold: 0
    },
    ////////////////////////////////////
    processing: true,
    serverSide: true,

    ajax: { ??? },

    ////////////////////////////////////
    columns: [
        { data: 'ID_Approved_Monthly', title: "ID" },
        { data: 'Name', title: "Name" },
        { data: 'Period', title: "Period" },
        { data: 'Approved', title: "Approved" },
        { data: 'Approved_Date', title: "Approval Date" },
        { data: 'Paid_Status', title: "Paid Date" },
    ],
    columnDefs: [{
        targets: [0],
        visible: false,
        searchable: false
    }],
    dom: 'Rlfrtip'

    });

I put datatable code outside $(document).ready(function (). So, when the page reload, it just reload the datatable as variable and whenever dropdown's value changed it just call datatableName.ajax.reload();. That's the idea.

Now, my question are,

1. how do I put the ajax call in the datatable to reload datatable that det return value from controller (ASP .Net Core). I see someone did this flawlessly in youtube but it made by PHP. I have same idea with this youtube.
2. why I don't see any change in my datatable when dropdown value change ? even, I've put ajax.data according to "Add data to the request (returning an object)"
3. in this case, do I have to use server side ?

So here is my complete code, what I've been trying till right now and still get stuck.

<script type="text/javascript">    

    var tbl_Approved = $('#tbl_Approved').DataTable({
        lengthMenu: [10, 25, 50, 75, 100],
        searchPane: {
            columns: [':contains("Name")', ':contains("Period")'],
            threshold: 0
        },
        ////////////////////////////////////
        processing: true,
        serverSide: true,

        ajax: {    //I get get stuck here :((
            "datatype": "json",
            type: 'GET',
            url: '@Url.Action("Get_Approved")',
            data: function (d) {
               return $.extend({}, d, {
                  ID: $('#ID').val(),
               })
            }
        },

        ////////////////////////////////////
        columns: [
            { data: 'ID_Approved_Monthly', title: "ID" },
            { data: 'Name', title: "Acc Name" },
            { data: 'Period', title: "Period" },
            { data: 'Approved', title: "Approved" },
            { data: 'Approved_Date', title: "Approval Date" },
            { data: 'Paid_Status', title: "Paid Date" },
        ],
        columnDefs: [{
            targets: [0],
            visible: false,
            searchable: false
        }],
        dom: 'Rlfrtip'

        });

    $(document).ready(function () {

        tbl_Approved_Allowance.draw();

        $('#ID').change(function () {

                tbl_Approved_Allowance.ajax.reload();

            }

        });

    })

</script>

Answer 1

to solve this problem, I put ajax into .change(function()). Here is my code:

$('#ID').change(function () {
    $.ajax({
        type: 'GET',
        url: '@Url.Action("Get_Approved")',
        data: { ID: ID},
        success: function (data) {

            $('#tbl_Approved').DataTable({
                destroy: true,
                data: data,
                lengthMenu: [10, 25, 50, 75, 100],
                searchPane: {
                    columns: [':contains("Name")', ':contains("Period")'],
                    threshold: 0
                },

                columns: [[
                     { data: 'ID_Approved_Monthly', title: "ID" },
                     { data: 'Name', title: "Acc Name" },
                     { data: 'Period', title: "Period" },
                     { data: 'Approved', title: "Approved" },
                     { data: 'Approved_Date', title: "Approval Date" },
                     { data: 'Paid_Status', title: "Paid Date" },
                ],
                dom: 'Rlfrtip'

            });


        }

    })

});