troubleshooting Question

Add a filter to a table column

Avatar of jwebster77
jwebster77 asked on
JavaScriptHTMLC#jQuery.NET MVC
8 Comments1 Solution51 ViewsLast Modified:
Hello,
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**
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**
//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);
        }
    });
}
ASKER CERTIFIED SOLUTION
jwebster77

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 8 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 8 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros