Reload datatable after dropdown value changed

Daleman

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 () {

            tbl_Approved_Allowance.ajax.reload();

    })

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 get 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>

colin

I'll answer these backwards

1. You only need serverSide if you have a large dataset (> 20-50k records). With that enabled, only the records being displayed on that page are sent by the server. If not enable, and only ajax is being used, then the server will send all records on each reload request.

2. we would need to see that. Can you link to a test case or your page, please. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

3. It may make sense to use Editor's .NET files. This blog post here describes how to do that,

Cheers,

Colin

Daleman

Hi Colin,
I feel so grateful for approaching my issue. I just solve the problem by modified ajax code, put it into the change (function(){})

so, 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'

            });


        }

    })

});

and it looks working well.