click button twice button duplicate header table

click button twice button duplicate header table

nivaldojsnivaldojs Posts: 4Questions: 1Answers: 0

my "input filter" in header of table, when i click twice in my button, the header of the my table is duplicate

Answers

  • kthorngrenkthorngren Posts: 20,302Questions: 26Answers: 4,769

    Without seeing your code its impossible to help debug. Please post a link to your page or a test case replicating the issue.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • nivaldojsnivaldojs Posts: 4Questions: 1Answers: 0

    function filtbresosPrest() {

    $('#tbresumoEmp thead tr').clone(true).appendTo('#tbresumoEmp thead');
    $('#tbresumoEmp thead tr:eq(1) th').each(function(i) {
        var title = $(this).text();
        console.log($(this).html())
    

    /* when click twice, here is duplicate*/
    $(this).html('<input type="text" class="form-control form-control-sm" placeholder="Filtar por ' + title + '" style="width:100px" />');

        $('input', this).on('keyup change', function() {
            if (table.column(i).search() !== this.value) {
                table
                    .column(i)
                    .search(this.value)
                    .draw();
            }
        });
    });
    
    
    
    var table = $('#tbresumoEmp').DataTable({
        "orderCellsTop": true,
        "fixedHeader": true,
        "paging": false,
        "ordering": false,
        "info": false,
        language: {
            search: "Filtrar grid:(Qualquer campo)",
    
        },
        "autoWidth": true,
        "responsive": true,
        "bDestroy": true,
        "stateSave": false,
    })
    

    }

  • nivaldojsnivaldojs Posts: 4Questions: 1Answers: 0

    this my table
    ("

    Ano CNPJ Tomadora Aberto Finalizada Cancelada

    ")````

  • nivaldojsnivaldojs Posts: 4Questions: 1Answers: 0

    $('#tbresumoEmp thead tr').clone(true).appendTo('#tbresumoEmp thead');
    $('#tbresumoEmp thead tr:eq(1) th').each(function(i) {
    var title = $(this).text();
    // console.log($(this).html())

    //here
    $(this).html('<input type="text" class="form-control form-control-sm" placeholder="Filtar por ' + title + '" style="width:100px" />');

        $('input', this).on('keyup change', function() {
            if (table.column(i).search() !== this.value) {
                table
                    .column(i)
                    .search(this.value)
                    .draw();
            }
        });
    });
    
    
    
    var table = $('#tbresumoEmp').DataTable({
        "orderCellsTop": true,
        "fixedHeader": true,
        "paging": false,
        "ordering": false,
        "info": false,
        language: {
            search: "Filtrar grid:(Qualquer campo)",
    
        },
        "autoWidth": true,
        "responsive": true,
        "bDestroy": true,
        "stateSave": false,
    })
    
  • kthorngrenkthorngren Posts: 20,302Questions: 26Answers: 4,769

    I meant to create a running example that we can look at. Its not easy to look at a bunch of code to understand how it is behaving. Please post a running test case that shows the issue.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

This discussion has been closed.