I have a ViewBag where I populate a select
with a list of years. When selecting a specific year, filter the table with data only from those years.
To do this filter, I'm using a 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");
}
);
});
But this script needs to put the class of <tr>
equal to the class of every <select>
to perform the filtering.
Until this part I can do it normally, but I'm having a problem: filtering the data, <header>
of the table does not appear.
An example of how it is can be seen here .
My view looks like this:
@*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>
And in my controller it looks like this:
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();
My problem is: How do I get the table header to appear along with the selected data?