Updating DataTable content with ajax

muradheydarov

I am working with DataTables with AJAX where I generate a table when the page loads. This first part of my code works fine. Then I have a dropdown which filtering users in DataTable. I can choose usersname and send POST request to controller and it generates json data. I checked it with javascript function and it return json data, i mean there is no problem. But i can not find a way to send this data to DataTable and update content with this data. Here is my code:

I posted this question on stackoverflow too.

var oTable = $("#myTable").DataTable({
            responsive: true,
            "ajax": {
                "url": "/TasksModels/IndividualUserGetData",
                "type": "get",
                "datatype": "json"
            },
            "columnDefs": [
                { "className": "dt-center", "targets": 6 }
            ],
            "order": [[3]],
            "columns": [
                {
                    "class": "details-control",
                    "orderable": false,
                    "data": null,
                    "defaultContent": ""
                },
                { "data": "Heading", "autoWidth": true },
                {
                    "data": "StartDate",
                    "autoWidth": true,
                    "render": function (data, type, row) {
                        if (type === 'display' || type === 'filter') {
                            var rowvalueallday = row["EndDate"];
                            if (rowvalueallday == 0) {
                                return (moment(data).format("ddd DD/MM/YYYY"));
                            } else {
                                return (moment(data).format("MMMM Do YYYY, HH:mm"));
                            }
                        }
                        return data;
                    }
                },
                {
                    "data": "EndDate",
                    "autoWidth": true,
                    "render": function (data, type, row) {
                        if (type === 'display' || type === 'filter') {
                            var rowvalueallday = row["EndDate"];
                            if (rowvalueallday == 0) {
                                return (moment(data).format("ddd DD/MM/YYYY"));
                            } else {
                                return (moment(data).format("MMMM Do YYYY, HH:mm"));
                            }
                        }
                        return data;
                    }
                },
                { "data": "CreatedBy", "autoWidth": true },
                {
                    "data": "CreatedOn",
                    "autoWidth": true,
                    "render": function (data, type, row) {
                        if (type === 'display' || type === 'filter') {
                            var rowvalueallday = row["EndDate"];
                            if (rowvalueallday == 0) {
                                return (moment(data).format("ddd DD/MM/YYYY"));
                            } else {
                                return (moment(data).format("MMMM Do YYYY, HH:mm"));
                            }
                        }
                        return data;
                    }
                },
                {
                    "data": "Status",
                    "autoWidth": true,
                    "render": function (data) {
                        if (data == "Open") {
                            return '<i class="fa fa-unlock bat" aria-hidden="true" style="color:green;"></i>';
                        }
                        return '<i class="fa fa-lock bat" aria-hidden="true" style="color:red;"></i>';
                    }
                }
            ]
        });

Then i am choosing a user and sending post data to controller with this event:

$('#id').change(function () {
            var selectedValue = $(this).val();
            $.ajax({
                url:  '@Url.Action("IndividualUserGetData", "TasksModels")',
                type: "POST",
                data: { id: selectedValue },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert(xhr.status);
                    alert(thrownError);
                },
                success: function (result) {
                    alert(result);
                }
            });
        });

I am checking data with alert function and it return data but i can not update DataTable with this data