1

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?

1 Resposta 1

0

No seu javascript filter.js, você está escondendo o seu Header, altere esse trecho de código:

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();
        }
    }

para:

if (classes == "") {
        // if no filters selected, show all items
        $("table tbody tr").show();
    } else {
        // otherwise, hide everything...
        $("table tbody tr").hide();
        // then show only the matching items
        rows = $("table tbody tr" + classes);
        if (rows.size() > 0) {
        rows.show();
        }
    }

Assim o seu Header será sempre visível, mas seus Tbody irá mudar sempre que alterar o valor do Select.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .