//Index.cshtml

`<div class="row">
        <div class="col-md-12">
            <div class="input-group mb-3 input-group-sm">
                <label class="input-group-text" for="filterMembers">Members</label>
                <select class="form-select filter" id="filterMembers" multiple>
                    <option value="">All</option>
                    @foreach (var items in Model.PersonnelList)
                    {
                            <option value="@items.id">@items.last_name, @items.first_name, @items.middle_name</option>
                    }
                </select>
                <label class="input-group-text small" for="filterLeaders">Leader/s</label>
                <select class="form-select filter" id="filterLeaders" multiple>
                    <option value="">All</option>
                    @foreach (var items in Model.PersonnelList)
                    {
                            <option value="@items.id">@items.last_name, @items.first_name, @items.middle_name</option>
                    }
                </select>
                <button class="btn btn-primary" id="clearFilters">Clear Filters</button>
            </div>
        </div>
</div>

@section Scripts {
        <script src="~/js/team.js"></script>
}`


//TeamController.cs

`#region API CALLS
[HttpGet]
public IActionResult GetAll(int?[] filterMembers, int?[] filterLeaders)
{
    var trMembersIds = filterMembers != null && filterMembers.Length > 0 ? _unitOfWork.AssignedMembers.GetAll()
        .Where(am => filterMembers.Contains(am.members_id))
        .Select(am => ap.team_id)
        .ToList() : new List<int>();
var trLeadersIds = filterLeaders != null && filterLeaders.Length > 0 ? _unitOfWork.AssignedLeaders.GetAll()
        .Where(am => filterLeaders.Contains(am.leader_id))
        .Select(am => ap.team_id)
        .ToList() : new List<int>();

    var iirList = _unitOfWork.TeamRecord.GetAll().Where(tr => (!filterMembers.Any() || trMembersIds.Contains(tr.id)) 
                                                                        && (!filterLeaders.Any() || trMembersIds.Contains(tr.id))
    .Select(tr => new
            {
                    tr.id,
                    // MORE CODES
            }).ToList();
    return Json(new { data = trList });
}
#endregion`


//team.js

`$(document).ready(function () {
    loadDataTable();

    $('.filter').on('change', function () {
        dataTable.ajax.reload();
    });

    $('#clearFilters').on('click', function () {
        $('.filter').val('');
        dataTable.ajax.reload();
    });
});


function loadDataTable() {
    dataTable = $('#tblDataTR').DataTable({
        "ajax": {
            "url": "/TR/GetAll",
            "type": "GET",
            "data": function (d) {
                d.filterMembers = $('#filterMembers').val() || [];
                d.filterLeaders = $('#filterLeaders').val() || [];
            },
            "dataSrc": "data"
        },
        "columns": [
            {
                // CODE FOR DISPLAYING COLUMNS
            }
        ]
    });
}`

I have two multiple select for the filtration of data, but when I select the option, the datatable don’t reload with the selected options. Its because the data is not passing in public IActionResult GetAll(int?[] filterMembers, int?[] filterLeaders), the 2 parameters are null. But when the select is not multiple, it runs just perfect with the data selected but I want is user can select multiple option like when you select “person1” and “person2” in filterMember select, all data involves “person1” and “person2” in one cell will be display.