Parameter Not Passing in jquery dataTable Ajax Call

  ajax, datatable, datatables, javascript, jquery

I have written a code to display the dynamic table into DataTable.

 <table id="tag" class="display table table-striped table-bordered" cellspacing="0" width="100%">
                        @foreach (var item in Model.HeaderModelList.Select((value, i) => new { i, value }))
                            <th [email protected](item.i+1)>
                                <span class="filterExcel">
                                    <select id="[email protected](item.value.PatientTagCategoryId)" name="tag" asp-items="@item.value.HeaderOptions" multiple class="drp-tagMulti-Select">
                        <th id="@(Model.HeaderModelList.Count()+1)">Simulation Name
                        <th id="@(Model.HeaderModelList.Count()+2)">
                            Patient Name                          

On changing the drop-down I have called an event that calls reload jquery.

  $(document).ready(function () {

            var id = "";
            var newval = "";

             $('.drp-tagMulti-Select').on('change', function () {
                var valid =;
                var val = $('#' + valid).val();

                if (valid) {
                    newval = val;
                    id = valid;
                    console.log("id" + id);
                    console.log("newval" + newval);

            var table = $("#tag").DataTable({

                "aLengthMenu": [[10, 25, 50, 75, -1], [10, 25, 50, 75, "All"]],
                "iDisplayLength": 10,
                "serverSide": true,
                "processing": true,
                "stateSave": true,
                "search": true,
                "ajax": {
                    'type': 'POST',
                    'dataType': 'json',
                    'data': {
                        TagId: id,
                        Values: newval
                    'url': 'GetFilteredPatientTags',
                    'dataSrc': function (d) {
                        var values = [];
                        for (var i = 0; i <; i++) {
                            var result = Object.values([i]);
                        return values;

            $(".filterExcel").click(function (e) {

                placeholder: 'Select specific course',
                ellipsis: true,
                filter: true,
                filterAcceptOnEnter: true,
                animate: 'fade',
                width: 20



Now whenever I change the dropdown the event is triggered and the values of id and newval is displayed correctly in the console

console.log("id" + id);
console.log("newval" + newval);

and then I reload the Data-Table, but the value of id and newval is not correctly pass in the ajax, the value is send as null

If I change the initial value of id and newval as "a" and "b"

var id = "a";
var newval = "b";

then the value of id and newval passing through ajax is always "a" and "b", I need to pass the value that is displayed in the console in the ajax.

How Can I fix this?

Source: Ask Javascript Questions