1

Preciso calcular os itens da tabela e mostrar em determinado campo da minha pagina.

Atualmente está assim:

<div class="pacientes">
        <div class="pacientes-header">
            <i class="fa fa-people-carry"></i>
                Pacientes pesquisados <span class="badge badge-pill badge-info align-top" id="countPacientes"></span>
            <button type="button" class="invitation-card-buttons btn btn-sm btn-outline-primary btn-lg check-all-list-items float-right">
                <i class="fa fa-check mr-1"></i> selecionar todos
            </button>
        </div>

        <div class="card-body">

            <div class="table-responsive">

                <table class="pacientes-table-plugin table table-hover table table-striped table-bordered">
                    <thead>
                    <tr class="text-center">
                        <th class="align-middle">#</th>
                        <th class="align-middle"><abbr title="Código">CÓD.</abbr></th>
                        <th class="align-middle">NOME</th>
                        <th class="align-middle">CPF</th>
                        <th class="align-middle">TELEFONE</th>
                        <th class="align-middle">ENDEREÇO</th>
                        <th class="align-middle">CEP</th>
                        <th class="align-middle">MÉDICO</th>
                    </tr>
                    </thead>
                    <tbody id="table-itens">
                        <tr class="loader">
                            <td colspan="100" style="display: none"></td>
                        </tr>
                        <tr>
                            <td colspan="100">
                                <div class="alert text-center text-muted">...</div>
                            </td>
                        </tr>
                        <tr>
                        </tr>
                    </tbody>
                </table>
            </div>

O id="countPacientes" é onde deve aparecer o número de pacientes pesquisados. O meu evento no Javascript está da seguinte forma:

Pacientes.prototype = {
    $('.pacientes-table-plugin').on('change', function(){
        self.count_pac();
    });
}

E está é minha atual função:

count_pac : function(){
    const t = $('.pacientes-table-plugin tr').length;
    $('#countPacientes').text(t);
}

Não está retornando nenhum tipo de dado no meu span.

1 Resposta 1

0

Você adicionou o evento "change" com essa linha:

$('.pacientes-table-plugin').on('change', function(){
Acontece que essa classe está sendo usada na tabela, e uma tabela não tem evento change, o problema está aqui.

Não sei bem o que você quer fazer com isso, mas a parte que conta as linhas e mostra no span está correta, veja o snippet com seu código:

const t = $('.pacientes-table-plugin tr').length;
$('#countPacientes').text(t);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pacientes">
        <div class="pacientes-header">
            <i class="fa fa-people-carry"></i>
                Pacientes pesquisados <span class="badge badge-pill badge-info align-top" id="countPacientes"></span>
            <button type="button" class="invitation-card-buttons btn btn-sm btn-outline-primary btn-lg check-all-list-items float-right">
                <i class="fa fa-check mr-1"></i> selecionar todos
            </button>
        </div>

        <div class="card-body">

            <div class="table-responsive">

                <table class="pacientes-table-plugin table table-hover table table-striped table-bordered">
                    <thead>
                    <tr class="text-center">
                        <th class="align-middle">#</th>
                        <th class="align-middle"><abbr title="Código">CÓD.</abbr></th>
                        <th class="align-middle">NOME</th>
                        <th class="align-middle">CPF</th>
                        <th class="align-middle">TELEFONE</th>
                        <th class="align-middle">ENDEREÇO</th>
                        <th class="align-middle">CEP</th>
                        <th class="align-middle">MÉDICO</th>
                    </tr>
                    </thead>
                    <tbody id="table-itens">
                        <tr class="loader">
                            <td colspan="100" style="display: none"></td>
                        </tr>
                        <tr>
                            <td colspan="100">
                                <div class="alert text-center text-muted">...</div>
                            </td>
                        </tr>
                        <tr>
                        </tr>
                    </tbody>
                </table>
            </div>

2
  • Existe um campo de busca com alguns filtros, conforme é pesquisado aparecem os pacientes na tabela, com o evento eu queria ouvir os pacientes conforme são pesquisados e mostrar o resultado (quantidade de pacientes) em outro campo.
    – Tha
    Commented 31/08/2018 às 3:27
  • entendi, nesse caso o evento change deve ser adicionado nesse campo, input por exemplo, daí vai funcionar Commented 31/08/2018 às 11:59

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 .