引导数据表 - 数据导出问题答案

【问题标题】：Bootstrap datatables -Data Exporting Issues引导数据表 - 数据导出问题
【发布时间】：2015-01-27 09:37:51
【问题描述】：

我正在使用带有导出工具扩展的引导数据表，效果很好。唯一的问题是我在表格的页脚有单独的列过滤器下拉列表，因此底部的列过滤器也包含在导出的 PDF/CSV 中。

下面是我的数据表是如何初始化的：

    var table = $('#example').DataTable(
                    {
                "dom": 'T<"clear">lfrtip',
                "tableTools": {
                    "oFeatures": {
            "bCsv": false,
            "bXls": false,
            "bCopy": false,
            "bPrint": false
        },

                    "sSwfPath": "/swf/copy_csv_xls_pdf.swf",
            "aButtons": [
                {'sExtends':'pdf',
                  "oSelectorOpts": { filter: 'applied', order: 'current' },
                }
                {'sExtends':'print',
                  "oSelectorOpts": { filter: 'applied', order: 'current' },
                }
              ]
                }
            }
                    );


$("#example tfoot th").each( function ( i ) {
            var title = $('#example thead th').eq( $(this).index() ).text();
            if(title!=='Date of Upload' && title!=='Action'){
        var select = $('<select style="width:100%"><option value="">Select '+title+'</option></select>')
            .appendTo( $(this).empty() )
            .on( 'change', function () {
                var val = $(this).val();

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

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

如果有办法解决这个问题，请告诉我。

【问题讨论】：

看起来 Stackoverflow 中没有可以解决此问题的“专家”。甚至没有人会费心查看问题的标题。lolz
我相信您对标签的选择引起了对问题的模糊关注。 PHP 真的不是这里的焦点，bootstrap 标签不应该在这种情况下使用 -> "不要与 Twitter 的 Bootstrap CSS 框架混淆；请使用 twitter-bootstrap 标签.. i>" 此外，jQuery dataTables 与 twitter bootstrap 本身无关，dataTables 只是为 twitter bootstrap CSS 结构提供便利。

标签： datatables jquery-datatables tabletools

【解决方案1】：

有一个简单的选项，bFooter。 bFooter 定义是否要将页脚包含在导出中。示例：

var table = $('#example').DataTable({
    //... other initialisation options
    tableTools: {
        sSwfPath: "/swf/copy_csv_xls_pdf.swf"",
        aButtons: [
            { sExtends :'pdf',
              oSelectorOpts: { filter: 'applied', order: 'current' },
              bFooter: false //<-- add this to each button declaration
            }
            //... more buttons
       ]
    }
})

【讨论】：

@user1411837，所以 - 它有效吗？两天前，你似乎真的很想得到一个快速的答案......

【解决方案2】：

我没有足够的声誉来回复@davidkonrad，但他的解决方案也对我有用。谢谢。

这是我的参考代码，包含 ColVis（列隐藏）、TableTools（导出到 csv、pdf）和 ColReorder（更改表的顺序）。一切都很好，除了列重新排序没有反映在导出中，但我相信这是可能的。请注意，代码格式弄乱了我的一些缩进。

$(document).ready(function() {
$('#content').DataTable( {
    dom: 'TC<"clear">Rlfrtip',
    "oTableTools": {
        "sSwfPath": "/configs/DataTables-1.10.5/media/swf/copy_csv_xls_pdf.swf",
        "aButtons": [
            {'sExtends':'copy',
                "oSelectorOpts": { filter: 'applied', order: 'current' },
                "mColumns": "visible",
                "bFooter": false
            },
            {'sExtends':'print',
                "oSelectorOpts": { filter: 'applied', order: 'current' },
                "mColumns": "visible",
                "bFooter": false,
            },
            {'sExtends':'csv',
                "oSelectorOpts": { filter: 'applied', order: 'current' },
                "mColumns": "visible",
                "bFooter": false,
            },
            {'sExtends':'pdf',
                "oSelectorOpts": { filter: 'applied', order: 'current' },
                "mColumns": "visible",
                "bFooter": false,
            }
        ]
    },
    initComplete: function () {
        var api = this.api();

        api.columns().indexes().flatten().each( function ( i ) {
            var column = api.column( i );
            var select = $('<select><option value=""></option></select>')
                .appendTo( $(column.footer()).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>' )
            } );
        } );
    }
});
} );

【讨论】：