jquery datatable如何在导出到excel pdf时从标题中删除下拉过滤器选择值

Posted 2023-05-07

【中文标题】jquery datatable如何在导出到excel pdf时从标题中删除下拉过滤器选择值

【英文标题】：jquery datatable How to remove dropdown filter select values from header while export to excel pdf

【发布时间】：2019-07-07 00:27:13

【问题描述】：

我在我的数据表上使用自定义过滤器选择框，并尝试实现导出按钮。但是，我从选择中显示为导出标题。 我想在导出到 excel pdf 或打印时从标题中删除下拉过滤器选择值，这是我的代码，我还附上了输出的屏幕截图 我用来生成选择过滤器的代码是：

Attached screen shot

 $(document).ready(function() 
        $('#invoicetable').DataTable( 
            dom: 'lBfrtip',
            buttons: [
         extend: 'print', filename: 'Pay Summary',title: 'Pay Summary',footer: true ,
         extend: 'excelhtml5', filename: 'Pay Summary',title: 'Pay Summary',footer: true ,
         extend: 'pdfHtml5', filename: 'Pay Summary', title: 'Pay Summary', footer: true ,
    ],
            initComplete: function () 
                this.api().columns([0,2]).every( function () 
                    var column = this;
                    var select = $('<select><option value=""></option></select>')
                        .appendTo( $(column.header()).empty() )
                        .on( 'change', function () 
                            var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                            );

                            column
                                .search( val ? '^'+val+'$' : '', true, false )
                                .draw();
                         );

                    column.data().unique().sort().each( function ( d, j ) 
                        select.append( '<option value="'+d+'">'+d+'</option>' )
                     );
                 );
            ,

            "footerCallback": function ( row, data, start, end, display ) 
        var totapi = this.api(), data;

        // Remove the formatting to get integer data for summation
        var intVal = function ( i ) 
            return typeof i === 'string' ?
                i.replace(/[\$,]/g, '')*1 :
                typeof i === 'number' ?
                    i : 0;
        ;
        pageTotal = totapi
            .column( 3,  page: 'current' )
            .data()
            .reduce( function (a, b) 
                return intVal(a) + intVal(b);
            , 0 );

            saltot = totapi
            .column( 5,  page: 'current' )
            .data()
            .reduce( function (a, b) 
                return intVal(a) + intVal(b);
            , 0 );

            dectot = totapi
            .column( 6,  page: 'current' )
            .data()
            .reduce( function (a, b) 
                return intVal(a) + intVal(b);
            , 0 );

            salpay = totapi
            .column( 7,  page: 'current' )
            .data()
            .reduce( function (a, b) 
                return intVal(a) + intVal(b);
            , 0 );

        // Update footer
        $( totapi.column( 3 ).footer() ).html(pageTotal);
        $( totapi.column( 5 ).footer() ).html(saltot);
        $( totapi.column( 6 ).footer() ).html(dectot);
        $( totapi.column( 7 ).footer() ).html(salpay);
    

         );

     );

【问题讨论】：

您需要发布Minimal, Complete, and Verifiable example，以便我们能够复制

【参考方案1】：

你可以使用，

exportOptions:  
            format: 
                header: function ( data, column, row )
                    
                        return data.substring(data.indexOf("value")+9,data.indexOf("</option"));
                    
             
        ,

它对我有用

【参考方案2】：

这对我有用（除了表格的第一列之外的所有列都有下拉菜单）：

我的列标题文本包含在<a> html 标记中。例如：<a>Column 1</a>

然后在我的 dataTables 按钮中：

exportOptions: 
                columns: ":visible",
                format: 
                    header: function (data, column, row) 
                        if (column > 0) 
                            return $(data).prev('a').text();
                        
                        else
                            return data;

                    
                

            

【参考方案3】：

在我的解决方案中，我还为我的数据表使用了页脚来解决这个问题。 隐藏页眉：它也会隐藏下拉菜单并将页脚推到表格的第一行

    buttons: [
         
            extend: 'excelHtml5',
            header: false, 
            text: '<i class="fas fa-file-excel">indir</i>',
            className: 'btn-primary',
            titleAttr: 'Export to Excel',
            columns: [2, 3, 4, 5, 6, 7, 8],
            //hide dropdowns in header
            customizeData: function (exData) 

                var rowNodes = table.rows().nodes();
                var newData = []
                //hide header and bring footer to first row
                exData.body.push(exData.footer)

                debugger
                for (var i = (exData.body.length - 1); i >= 0; i--) 

                    if ($(rowNodes[i]).css("display") == "none") 
                        continue;
                    
                    newData[newData.length] = exData.body[i];
                    debugger
                
                // the loop reverses order so put it back
                exData.body = newData; 
              
         
    ],