HTMl5 группировка строк строк

Question

Я использую Asp.net MVC4. У меня есть индекс индекса Razor с таблицей HTML5.

Теперь предлагается добавить динамическую (пользовательскую) группировку в существующую таблицу. Пожалуйста, предложите мне/напишите мне, как я могу реализовать с JQuery и HTML5 plain.

Поэтому я не могу использовать никакие jqgrid, datatable или любые другие фреймворки.

Пример: Разрешить пользователю группы по любой колонке -> Отдел/JobType или оба

CSHTML

@model IEnumerable<EmployeeViewModel> 

@{ 
    ViewBag.Title = "Employees"; 
} 

<h2>Employees</h2> 
<p> 
@Html.ActionLink("Create New", "Create") 
</p> 
<table class="table"> 
<tr> 
    <th> 
     @Html.DisplayNameFor(model => model.FirstName) 
    </th> 
    <th> 
     @Html.DisplayNameFor(model => model.MiddleName) 
    </th> 
    <th> 
     @Html.DisplayNameFor(model => model.LastName) 
    </th> 
    <th> 
     @Html.DisplayNameFor(model => model.FullName) 
    </th> 
    <th> 
     @Html.DisplayNameFor(model => model.EmployeeNumber) 
    </th> 
    <th> 
     @Html.DisplayNameFor(model => model.Department) 
    </th> 
    <th> 
     @Html.DisplayNameFor(model => model.JobType) 
     </th> 
    <th></th> 
</tr> 

@foreach(var item in Model) 
{ 
<tr> 
    <td> 
     @Html.DisplayFor(modelItem => item.FirstName) 
    </td> 
    <td> 
     @Html.DisplayFor(modelItem => item.MiddleName) 
    </td> 
    <td> 
     @Html.DisplayFor(modelItem => item.LastName) 
    </td> 
    <td> 
     @Html.DisplayFor(modelItem => item.FullName) 
    </td> 
    <td> 
     @Html.DisplayFor(modelItem => item.EmployeeNumber) 
    </td> 
    <td> 
     @Html.DisplayFor(modelItem => item.Department) 
    </td> 
    <td> 
     @Html.DisplayFor(modelItem => item.JobType) 
     </td> 
    <td> 
     @Html.ActionLink("Edit", "Edit", new { id = item.Id }) | 
     @Html.ActionLink("Details", "Details", new { id = item.Id }) | 
     @Html.ActionLink("Delete", "Delete", new { id = item.Id }) 
    </td> 
</tr> 
} 

Модельное

public class EmployeeViewModel 
{ 
    public int Id { get; set; } 
    public string FirstName { get; set; } 

    public string MiddleName { get; set; } 
    public string LastName { get; set; } 

    public string JobType { get; set; } 
    public string Department { get; set; } 

    public string FullName 
    { 
     get 
     { 
      if (string.IsNullOrEmpty(MiddleName)) 
      { 
       return FirstName + " " + LastName; 
      } 
      return FirstName + " " + MiddleName + " " + LastName; 
     } 
    } 

    public string EmployeeNumber { get; set; } 
} 

Спасибо,

невыразимого

Answer 1

Почему бы не искать по всему:

<input id="Search" value="Start typing"> 

<table class="table"> 
<tr> 
    <th> 
     @Html.DisplayNameFor(model => model.FirstName) 
    </th> 
    <th> 
     @Html.DisplayNameFor(model => model.MiddleName) 
    </th> 
    <th> 
     @Html.DisplayNameFor(model => model.LastName) 
    </th> 
    <th> 
     @Html.DisplayNameFor(model => model.FullName) 
    </th> 
    <th> 
     @Html.DisplayNameFor(model => model.EmployeeNumber) 
    </th> 
    <th> 
     @Html.DisplayNameFor(model => model.Department) 
    </th> 
    <th> 
     @Html.DisplayNameFor(model => model.JobType) 
     </th> 
    <th></th> 
</tr> 

<script> 
var searchInput = $("#Search"); 

searchInput.keyup(function() { 
    var data = this.value.split(" "); 
    var rows = $(".table").find("tr"); 

    if (this.value == "") { 
     rows.show(); 
     return; 
    } 

    rows.hide(); 

    rows.filter(function (i, v) { 
     var $t = $(this); 
     for (var d = 0; d < data.length; ++d) { 
      if ($t.is(":contains('" + data[d] + "')")) { 
       return true; 
      } 
     } 
     return false; 
    }).show(); 
}); 

searchInput.focus(function() { 
    this.value = ""; 
    $(this).css({ 
     "color": "black" 
    }); 
    $(this).unbind('focus'); 
}); 

searchInput.css({ 
    "color": "#C0C0C0" 
}); 
</script>