在数据表中进行过滤和导出

Question

我正在使用 bootstrap 数据表，

我正在尝试将数据表导出到 excel，

当我添加 列过滤时 * (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();
            }
        });
    });

当我尝试导出数据时，列名称（标题）未显示

但是当我删除列过滤时，列名称显示正常，

有什么解决办法

这是我的脚本：

  <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

您可以尝试将 $('#dgv thead tr:eq(0) th') 替换为 $('#dgv thead tr:eq(1) th') 以将过滤器输入添加到 table 的 header 的第二行，如下所示。

$('#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();
        }
    });
});

在数据表中进行过滤和导出

Feltring and export in datatable

datatable

export-to-csv

asp.net-core