Datatable duplicating elements

Asked

Viewed 221 times

-1

I have a search done with Ajax via Jquery that returns a tablet with Datatable. But the Datatable elements are duplicated as I have searched (see print).

inserir a descrição da imagem aqui

I tried using Destroy, but then it stops creating the table. My code is like this at the moment. 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 PHP return is 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>

Someone knows how to leave me what’s going on and how I can fix it?

php javascript jquery
  • 1

    Substitute $("#resultado").append(data); for $("#resultado").html(data);

  • It keeps duplicating the same way. If I put the Stroy it just doesn’t appear anything.

  • is that the "date" of your consultation is no longer duplicated?

  • Place a.log console to see if the Submit (or click) event is not being called twice, it may also be some problem with syncing methods as well.

  • Uperalta, edit your question and put the solution as an answer, so more people can take advantage of this solution

  • 1

    Solutions should be in the answer area, not as a question.

  • Sorry guys, I’m new to Stackoverflow yet. I’ll put as answer.

Show 2 more comments

1 answer

0

I was able to solve by placing a variable to check if there was a previous Ajax request and, if so, abort it. The code went 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 has not been changed. Thank you all for your help.

Browser other questions tagged php javascript jquery

You are not signed in. Login or sign up in order to post.