Calculate items from a table

Question

I need to calculate table items and show in a given field of my page.

Currently it is like this:

<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>

The id="countPacientes" is where the number of patients surveyed should appear. My Javascript event is as follows:

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

And this is my current function:

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

It’s not returning any kind of data in my span.

Answer 1

You added the "change" event with this line:

$('.pacientes-table-plugin').on('change', function(){
It turns out that this class is being used in the table, and a table has no event change, the problem is here.

I’m not sure what you want to do with it, but the part that counts the lines and shows in span is correct, see the snippet with your code:

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>