Calculate items in a table

1

I need to calculate the table items and display them in a certain field on my page.

Currently it looks 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 role:

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

You are not returning any data type in my span .

    
asked by anonymous 31.08.2018 / 04:39

1 answer

0

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 change event, the problem is here.

I'm not sure what you want to do with this, but the part that counts the lines and shows in the 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><divclass="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>
    
31.08.2018 / 05:17