1
I own 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 make 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 each <select> to perform the filtration.
Until this part I can perform normally, but I have a problem: when filtering the data, the <header>table does not appear.
An example of how this can be seen here.
My view is 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 is 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 to do for the Header the table appear together with the selected data?