Datatable duplicating elements

Question

Datatable duplicating elements

Navigation

#1 by (0 votes)

-1

I have a search done with Ajax via JQuery that returns a tablet with DataTable. But the DataTable elements are doubling as I want to search (see print).

I'vetriedtousedestroy,butthenitstopscreatingthetable.Mycodeislikethisrightnow.JavaScript:

$(".pesquisar").on("click", function () {

    $("#pesquisar").submit(function (event) {

        // Stop form from submitting normally
        event.preventDefault();
        // Get some values from elements on the page:
        var $form = $(this);
        var inputs = $('#pesquisar').serialize();
        var url = $form.attr("action");
        // Send the data using post
        var posting = $.post(url, inputs);
        // Put the results in a div
        posting.done(function (data) {
            destroiDataTable();
            $("#resultado").append(data);
        });
    });
});

function destroiDataTable() {
    $("#resultado").html("");
    $(".datatable").destroy();
}

$('.datatable').DataTable({
    destroy: true,
    retrieve: true,
    dom: 'Bfrtip',
    buttons: [
        'copy', 'csv', 'excel', 'pdf', 'print'
    ],
    "oLanguage": {
        buttons: {
            "copy": "Copiar",
            "print": "Imprimir"
        },
        "sLengthMenu": "Mostrar _MENU_ registros por página",
        "sZeroRecords": "Nenhum registro encontrado",
        "sInfo": "Mostrando de _START_ a _END_ no total de _TOTAL_ registro(s)",
        "sInfoEmpty": "Mostrando 0 de 0 registros",
        "sInfoFiltered": "(filtrado de _MAX_ registros)",
        "sSearch": "Pesquisar: ",
        "oPaginate": {
            "sFirst": "Início",
            "sPrevious": "Anterior",
            "sNext": "Próximo",
            "sLast": "Último"
        }
    }
});

My table that comes in return PHP looks like this:

<table class="table table-striped table-bordered datatable" cellspacing="0" style="width:100%">
        <thead>
            <tr>
                <th>Nº Chamado</th>
                <th>Abertura</th>
                <th>Usuário</th>
                <th>Descrição</th>
                <th>Assunto</th>
                <th>Status</th>
                <th>Opções</th>
            </tr>
        </thead>

        <tbody>
            <?php
            echo
            "<tr>
                <td>{$chamados->cha_codigo[$i]}</td>
                <td>{$chamados->cha_data_hora_abertura[$i]}</td>
                <td>{$chamados->usu_nome[$i]}</td>
                <td>{$chamados->cha_descricao[$i]}</td>
                <td>{$chamados->cha_assunto[$i]}</td>
                <td>{$chamados->cha_status[$i]}</td>
                <td> - </td>
            </tr>";
            ?>
        </tbody>

        <tfoot>
            <tr>
                <th>Nº Chamado</th>
                <th>Abertura</th>
                <th>Usuário</th>
                <th>Descrição</th>
                <th>Assunto</th>
                <th>Status</th>
                <th>Opções</th>
            </tr>
        </tfoot>
    </table>

Does anyone know leave me what is happening and how can I resolve this?

php javascript jquery jquery-datatables datatable

asked by anonymous 30.10.2018 / 18:12

1 answer

Managing phone calls on Android NODE.JS 'ConnectionError with MSSQL

score 0 · Answer 1

I was able to solve by putting a variable to check if a previous Ajax request already existed and, if it has, to abort it. The code looks like this:

var pending;

$(".pesquisar").on("click", function () {

    if (pending) { //there is an ajax request running
        pending.abort();
        return; //do nothing
    }

    pending = $("#pesquisar").submit(function (event) {
        // Stop form from submitting normally
        event.preventDefault();
        // Get some values from elements on the page:
        var $form = $(this);
        var inputs = $('#pesquisar').serialize();
        var url = $form.attr("action");
        // Send the data using post
        var posting = $.post(url, inputs);
        // Put the results in a div
        posting.done(function (data) {
            $("#resultado").html(data);
        });
    });
});

What is in the question but is not in the answer is why it was not changed. Thank you all for the help.