Error filtering data from table Datatable

1

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?

    
asked by anonymous 08.03.2015 / 15:27

1 answer

0

In your javascript filter.js , you are hiding your Header , change this code snippet:

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

To:

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

So your Header will always be visible, but your Tbody will change whenever you change the value of Select .

    
20.04.2015 / 20:43