下拉值更改后重新加载数据表

Question

我有一个datatable 和一个下拉列表。我想在下拉值更改后更改数据表。首先，我尝试了最简单的试验和错误，方法是在下拉更改值后从控制器获取返回值，并且它运行顺利。这是我的代码：

$('#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
        }
    });
});

然后这是我的数据表代码

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'

    });

我将数据表代码放在$(document).ready(function () 之外。因此，当页面重新加载时，它只是将数据表重新加载为变量，并且每当下拉列表的值更改时，它只需调用datatableName.ajax.reload();。就是这样。

现在，我的问题是，

1. 如何将 ajax 调用放在数据表中以重新加载从控制器（ASP .Net Core）中检测返回值的数据表。我看到有人在youtube 中完美地做到了这一点，但它是由 PHP 制作的。我对这个 youtube 有同样的想法。
2. 为什么当下拉值更改时我的数据表没有任何变化？甚至，我已经根据“Add data to the request (returning an object)”放置了ajax.data
3. 在这种情况下，我必须使用server side 吗？

所以这是我的完整代码，我一直在尝试直到现在仍然卡住。

<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

为了解决这个问题，我将ajax 放入.change(function())。这是我的代码：

$('#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'

            });


        }

    })

});