数据表如何实现多个过滤器

Question

这是我的html代码，其中包含用于数据表实现的jQuery

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section scripts{
    <script>
        var selected = Array();
        $(document).ready(function () {
            table = $("#table").DataTable({
                "ajax": {
                    "url": "@Url.Action("Search", @ViewContext.RouteData.Values["controller"].ToString())",
                    "type": "POST",
                    "data": function (d) {

                    },
                    "datatype": "json"
                },
                "language": {
                    "search": "",
                    "searchPlaceholder": " Search"
                },
                "select": {
                    "style": 'multi'
                },
                "ordering": true,
                "order": [[1, 'desc']],
                "lengthChange":false,
                "columns": [
                    {
                        "data": "",
                        "targets": 0,
                        "className": "control",
                        "orderable": false,
                        "searchable": false,
                        "defaultContent": ""
                    },
                    {
                        "data": function (data, type, row, meta) {
                            var url = "@Url.Action("Edit", @ViewContext.RouteData.Values["controller"].ToString())/" + data.Id;
                            return "<a href='" + url + "'>"+data.Name+"</i></a>"
                        }, "name": "Name"
                    },
                    { "data": "UserName", "name": "UserName" },
                    { "data": "Email", "name": "Email" },
                    { "data": "PhoneNumber", "name": "PhoneNumber" },
                ],
                "responsive": {
                    "details": {
                        "type": "column"
                    }
                },
                "processing":true,
                "serverSide": true,
            }).columns.adjust()
            .responsive.recalc();
            new $.fn.dataTable.FixedHeader(table);

            $("#table_filter input").unbind();
            $('#table_filter input').attr("id", "datatable-default-search-input");
            $("div.dataTables_filter label").append("<div class='row row-extend' id='datatable-search-input-container'></div>");
            $("div.dataTables_filter label").append("<div class='clearfix' id='datatable-controls'><div class='row row-extend pull-right'><span class='datatable-control-item'><button type='button' class='btn btn-primary' id='searchButton'>Search</button></span><span class='datatable-control-item'><button type='button' class='btn btn-outline-secondary' id='resetButton'>Reset</button></span></div></div>");

            $("#searchButton").on("click", function (e) {
                //table.search($("#table_filter input").val()).draw();
            });
            $("#resetButton").on("click", function (e) {
                $("#datatable-search-input").val("");
                //table.search($("#table_filter input").val()).draw();
            });
            $("#table_filter input").on("keydown", function (e) {
                if (e.which == 13) {
                    //table.search($("#table_filter input").val()).draw();
                }
            });
            $('#table thead tr th').each(function () {
                var title = $(this).text();
                if (title != "") {
                    var field = "<div class='col-sm-3 search-spacing'><input type='text' placeholder='Search " + title + "'/></div>";
                    $("#datatable-search-input-container").append(field);
                }
            });
        });
    </script>
}
<div class="row">
    <div class="col-sm-12">
        <table id="table">
            <thead>
                <tr>
                    <th></th>
                    <th>Name</th>
                    <th>UserName</th>
                    <th>Email</th>
                    <th>Phone Number</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

它产生一个如下表：

我所做的是将display：none设置为默认搜索栏，因为我不确定如何删除它。

如何使用多个过滤器进行搜索？我在这里查看了这段代码：https://datatables.net/examples/api/multi_filter.html，但未显示如何在服务器端处理它。一样吗？

目前，这是我在服务器端通过全局搜索处理它的方式：

public JsonResult Search(SearchViewModel Input)
{
    JsonResult result = new JsonResult(null);
    try
    {

        List<UsersListViewModel> data = (from user in dbContext.ApplicationUsers
                                         select new UsersListViewModel
                                         {
                                             Id = user.Id,
                                             Name = user.FirstName + " " + user.LastName,
                                             UserName = user.UserName,
                                             Email = user.Email,
                                             PhoneNumber = user.PhoneNumber
                                         }).ToList();


        int totalRecords = data.Count;

        var modelStructure = new Dictionary<int, string>();
        modelStructure.Add(1, "Name");
        modelStructure.Add(2, "UserName");
        modelStructure.Add(3, "Email");
        modelStructure.Add(4, "PhoneNumber");

        if (!string.IsNullOrEmpty(Input.Search) && !string.IsNullOrWhiteSpace(Input.Search))
        {
            data = data.Where(
                u => u.UserName.ToString().ToLower().Contains(Input.Search.ToLower()) ||
                u.Email.ToLower().Contains(Input.Search.ToLower()) ||
                u.Name.ToLower().Contains(Input.Search.ToLower()) ||
                u.PhoneNumber.ToLower().Contains(Input.Search.ToLower())
            ).ToList();
        }
        if (!(string.IsNullOrEmpty(Input.Order) && string.IsNullOrEmpty(Input.OrderDir)))
        {
            var columnName = modelStructure.FirstOrDefault(f => f.Key == Convert.ToInt32(Input.Order));
            data = data.AsQueryable().OrderBy(columnName.Value + " " + Input.OrderDir).ToList();
        }

        int recFilter = data.Count;
        data = data.Skip(Input.StartRec).Take(Input.PageSize).ToList();
        var modifiedData = data.Select(u => new UsersListViewModel
        {
            Id = u.Id,
            Name = u.Name,
            UserName = u.UserName,
            Email = u.Email,
            PhoneNumber = u.PhoneNumber,
        });
        result = Json(new
        {
            draw = Convert.ToInt32(Input.Draw),
            recordsTotal = totalRecords,
            recordsFiltered = recFilter,
            data = modifiedData,
            order = Input.Order,
            orderdir = Input.OrderDir,
            input = Input
        });
        return result;
    }
    catch (Exception e)
    {
        logger.LogError(e, LoggingGlobals.LoadingException);
    }
    return result;
}