下拉值更改后重新加载数据表 [英] Reload datatable after dropdown value changed

问题描述

我有一个数据表和一个下拉菜单.我想在下拉列表值更改后更改数据表.首先，我尝试了最简单的尝试&通过在下拉菜单更改值后从控制器获取返回值来解决错误，它可以平稳运行.这是我的代码:

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'

    });

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

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.

现在，我的问题是，

1. 如何将ajax调用放在数据表中以重新加载从控制器(ASP .Net Core)返回值的数据表.我看到有人在 youtube 中做到了这一点，但这是PHP制作的.我对这个youtube有相同的想法.
2. 为什么当下拉值更改时我的数据表中没有任何更改?甚至，我已经根据"向请求中添加数据(返回对象)放置了ajax.data "
3. 在这种情况下，我是否必须使用服务器端?

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>

推荐答案

为解决此问题，我将ajax放入.change(function())中.这是我的代码:

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'

            });


        }

    })

});

这篇关于下拉值更改后重新加载数据表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！