Possuo uma ViewBag onde populo um select
com uma lista de anos. Ao selecionar um ano específico, filtro a tabela com os dados somente daqueles anos.
Para fazer esse filtro, eu estou utilizando um script:
$(document).ready( function() {
// any time a filter drop-down changes...
$("select.filter").change(function () {
var classes = "";
var description = "";
// collect the selected filters
$("select.filter").each(function() {
if ($(this).val() != '*') {
classes += "." + $(this).val();
if (description != '') description += ', ';
description += $.trim($(this).find("option:selected").text());
}
});
if (classes == "") {
// if no filters selected, show all items
$("table.item-list tr").show();
} else {
// otherwise, hide everything...
$("table.item-list tr").hide();
// then show only the matching items
rows = $("table.item-list tr" + classes);
if (rows.size() > 0) {
rows.show();
}
}
// count up the matching items
if (description != '') {
description += " (" + $("table.item-list tr:visible").size() + ")";
}
// print a description of the active filter
$("#filter-description").html(description);
}).change(); // here in case a drop-down has been pre-selected
// just a nice little hover effect
$("table.item-list tr").hover(
function() {
$(this).addClass("hover");
},
function() {
$(this).removeClass("hover");
}
);
});
Porém este script necessita de colocar a classe do <tr>
igual a classe de cada <select>
para realizar a filtragem.
Até essa parte eu conseguo realizar normalmente, porém estou um problema: ao filtrar os dados, o <header>
da tabela não aparece.
Um exemplo de como está pode ser visto aqui.
A minha view está assim:
@*Recebo os anos no Select*@
<select class="filter" style="width:100px">
@for (int i = 0; i < ViewBag.AnoExtrato.Count; i++)
{
@*populo o select com a lista de anos*@
<option value="@ViewBag.AnoExtrato[i]">
@ViewBag.AnoExtrato[i]
</option>
}
</select>
<div id="filter-description"></div>
<table border="1" id="item-list" class="item-list">
<thead>
<tr>
<th rowspan="2">
Mês
</th>
<th rowspan="2">
Remuneração<br />
Total R$
</th>
<th colspan="4">
<p align="center">
Contribuinte
</p>
</th>
<th colspan="4">
<p align="center">
Município
</p>
</th>
</tr>
<tr>
<th>
%
</th>
<th>
Mês R$
</th>
<th>
Ano R$
</th>
<th>
Acumulado R$
</th>
<th>
%
</th>
<th>
Mês R$
</th>
<th>
Ano R$
</th>
<th>
Acumulado R$
</th>
</tr>
</thead>
<tbody>
@*Variáveis para somar os totais dos campos*@
@{
double totalContribuinte = 0;
double totalMunicipio = 0;
}
@foreach (var item in Model.Previdencia.GroupBy(g => new { g.NmPessoa, g.dtCompetencia.Value.Year }))
{
@*Variáveis para somar os totais dos campos por ano*@
double subtotalContribuinte = 0;
double subtotalMunicipio = 0;
foreach (var contribuicoes in item.ToList())
{
@*Realizam as somas dos campos*@
subtotalContribuinte += contribuicoes.Contribuinte;
totalContribuinte += contribuicoes.Contribuinte;
subtotalMunicipio += contribuicoes.BaseCalculo;
totalMunicipio += contribuicoes.BaseCalculo;
@*Adiciono a classe igual a selecionada no select*@
<tr class="@contribuicoes.dtCompetencia.Value.Year">
<td>
@Html.DisplayFor(modelItem => contribuicoes.dtCompetencia)
</td>
<td>
@Html.DisplayFor(modelItem => contribuicoes.BaseCalculo)
</td>
<td>
11
</td>
<td>
@Html.DisplayFor(modelItem => contribuicoes.Contribuinte)
</td>
<td>
@subtotalContribuinte.ToString("c")
</td>
<td>
@totalContribuinte.ToString("c")
</td>
<td>
11
</td>
<td>
@Html.DisplayFor(modelItem => contribuicoes.BaseCalculo)
</td>
<td>
@subtotalMunicipio.ToString("c")
</td>
<td>
@totalMunicipio.ToString("c")
</td>
</tr>
}
}
</tbody>
</table>
E em meu controller está assim:
ViewBag.AnoExtrato = previdenciaRepository.Previdencias.Where(r => r.CdMatricula == matricula && r.SqContrato == contrato)
.Select(x => x.dtCompetencia.Value.Year).Distinct().ToList();
var previdenciaTotal =
previdenciaRepository.Previdencias.Where(p => p.CdMatricula == matricula && p.SqContrato == contrato)
.ToList().OrderBy(u => u.dtCompetencia).ToList();
Meu problema é: Como fazer para o Header da tabela aparecer junto com os dados selecionados?