Feltring and export in datatable

Question

i'm using a bootstrap datatable ,

and i'm trying to export the datatable to excel ,

when i'm adding the column filtering* (this:)

    $('#dgv thead tr').clone(true).appendTo('#dgv thead');
    $('#dgv thead tr:eq(0) th').each(function (i) {
        var title = $(this).text();
        $(this).html('<input type="text" style="width:100%"  class="form-control form-control-sm" placeholder="Search ' + title + '" />');
        $('input', this).on('keyup change', function () {
            if (table.column(i).search() !== this.value) {
                table
                    .column(i)
                    .search(this.value)
                    .draw();
            }
        });
    });

and when i'm trying to export the data , the column name (title) is not showing

but when i delete the column filtering , the column name is showing normaly ,

is there any solution

this is my script :

  <script>
        $(document).ready(function () {
            // Setup - add a text input to each footer cell
            $('#dgv thead tr').clone(true).appendTo('#dgv thead');
            $('#dgv thead tr:eq(0) th').each(function (i) {
                var title = $(this).text();
                $(this).html('<input type="text" style="width:100%"  class="form-control form-control-sm" placeholder="Search ' + title + '" />');
                $('input', this).on('keyup change', function () {
                    if (table.column(i).search() !== this.value) {
                        table
                            .column(i)
                            .search(this.value)
                            .draw();
                    }
                });
            });

            var table = $('#dgv').DataTable({

                "ajax": {
                    "url": "/api/test",
                    "type": "GET",
                    "dataType": "json",
                    "dataSrc": "",


                },


            //export
            var buttons = new $.fn.dataTable.Buttons(table, {
                buttons: [
                    {

                        extend: 'copyHtml5', className: 'btn btn-outline-warning btnexport',
                        exportOptions: {
                            columns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
                        }
                    },
                    {

                        extend: 'excelHtml5', className: 'btn btn-outline-warning btnexport',
                        exportOptions: {


                            columns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
                        }
                    },
                    {
                        extend: 'pdfHtml5', className: 'btn btn-outline-warning btnexport',
                        orientation: 'landscape',
                        pageSize: 'LEGAL',
                        exportOptions: {

                            columns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
                        }
                    }
                ]
            }).container().appendTo($('#buttons'));


        });
    </script>

Answer 1

when i'm trying to export the data , the column name (title) is not showing

but when i delete the column filtering , the column name is showing normaly

You can try to replace $('#dgv thead tr:eq(0) th') with $('#dgv thead tr:eq(1) th') to add filter input(s) into the second row of the table's header , like below.

$('#dgv thead tr').clone(true).appendTo('#dgv thead');
$('#dgv thead tr:eq(1) th').each(function (i) {
    var title = $(this).text();
    $(this).html('<input type="text" style="width:100%"  class="form-control form-control-sm" placeholder="Search ' + title + '" />');
    $('input', this).on('keyup change', function () {
        if (table.column(i).search() !== this.value) {
            table
                .column(i)
                .search(this.value)
                .draw();
        }
    });
});