向表格列添加过滤器

Question

What would be the easiest way to add a filter to a table column(Status)?将过滤器添加到表列（状态）的最简单方法是什么？ I found different things but they all suggest something like a search box but I do not want that.我发现了不同的东西，但它们都建议像搜索框这样的东西，但我不想要那个。 I tried another thing but it has not been working.我尝试了另一件事，但没有奏效。 Below is my code without any filters.下面是我的代码，没有任何过滤器。 I highly appreciate your help.我非常感谢您的帮助。

CONTROLLER CONTROLLER

public ActionResult ViewAllTasks()
        {
            HelpDeskDBHandle dbhandle = new HelpDeskDBHandle();
            return View(dbhandle.GetITTasksList());
        }

        //LIST IT TASKS
        public JsonResult ListITTasks()
        {
            HelpDeskDBHandle hdDB = new HelpDeskDBHandle();
            return Json(hdDB.GetITTasksList(), JsonRequestBehavior.AllowGet);
        }

VIEW看法

@*IT TASKS PAGE----------------------------------------------------------------------------------------*@

@model IEnumerable<HelpDeskSupport.Models.ITTasksModel>

@{
    Layout = null;
}

<head>
    <meta name="viewport" content="width=device-width" />
    <title>ViewAllTasks</title>

    <script src="~/Scripts/ITTasksJS.js"></script>
</head>

<div class="container">
    <h2>IT Tasks</h2>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" 
                  onclick="clearTextBox();">Add New Task</button><br /><br />

    <table class="display table table-striped table-bordered" id="knowledgeTable">
        <thead>
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.ITNumber)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.ITDescription)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.ITEnterDate)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.ITAssignedTo)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.ITEstimatedCompletion)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.ITPriority)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.ITFrom)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.ITStatus)
                </th>
            </tr>
        </thead>

        <tbody class="tbody">
            @foreach (var item in Model)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.ITNumber)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.ITDescription)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.ITEnterDate)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.ITAssignedTo)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.ITEstimatedCompletion)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.ITPriority)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.ITFrom)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.ITStatus)
                    </td>
                </tr>
            }
        </tbody>
    </table>
</div>

JAVASCRIPT JAVASCRIPT

//Load Data in Table when documents is ready
$(document).ready(function () {
    loadData();
});

//Load Data function
function loadData() {
    $.ajax({
        url: "/Tickets/ListITTasks",
        type: "GET",
        contentType: "application/json;charset=utf-8",
        dataType: "json",
        success: function (result) {
            var html = '';
            $.each(result, function (key, item) {
                html += '<tr>';
                html += '<td>' + item.ITNumber + '</td>';
                html += '<td>' + item.ITDescription + '</td>';
                html += '<td>' + item.ITEnterDate + '</td>';
                html += '<td>' + item.ITAssignedTo + '</td>';
                html += '<td>' + item.ITEstimatedCompletion + '</td>';
                html += '<td>' + item.ITPriority + '</td>';
                html += '<td>' + item.ITFrom + '</td>';
                html += '<td>' + item.ITStatus + '</td>';
                html += '<td><a href="#" onclick="return getbyTicketNumber(' + item.ITNumber + 
               ')">Edit</a> | <a href="#" onclick="DeleteItTask(' + item.ITNumber + ')">Delete</a></td>';
                html += '</tr>';
            });
            $('.tbody').html(html);
            alert("Successful Loaddata ITTASK");
        },
        error: function (errormessage) {
            alert(errormessage.responseText);
        }
    });
}

THANKS A LOT AGAIN!!!再次感谢！

Answer 1

Add your request url Status Value like:添加您的请求 url 状态值，例如：

url: "/Tickets/ListITTasks?status=0",

I assume that Status prop accept int.我假设 Status 道具接受 int。 You can change to string.您可以更改为字符串。

Then add your controller function parameter like:然后添加您的 controller function 参数，如：

public JsonResult ListITTasks(int status){}

Then in your Repository create new(or update GetITTasksList() ) function with accepting int parameter.然后在您的存储库中创建新的（或更新GetITTasksList() ） function 并接受 int 参数。 And write your sql or linq filter with PredicateBuilder or.Where().并使用 PredicateBuilder 或 .Where() 编写 sql 或 linq 过滤器。 Then return result of course.然后当然返回结果。

Answer 2

Thanks for your help, I ended up using Datatables which also have a filter functionality感谢您的帮助，我最终使用了具有过滤功能的数据表

向表格列添加过滤器

问题描述

2 个解决方案

解决方案1
0 2020-07-28 08:22:42

解决方案2
0 2020-07-28 18:45:09

向表格列添加过滤器

问题描述

2 个解决方案

解决方案1 0 2020-07-28 08:22:42

解决方案2 0 2020-07-28 18:45:09

解决方案1
0 2020-07-28 08:22:42

解决方案2
0 2020-07-28 18:45:09