Question

我正在尝试将dataTable Grid导出为CSV。我搜索并发现我必须使用TableTools。但我没有这个插件。以前我偷了这个版本的dataTable：

steal("vendor/datatables/js/jquery.dataTables.js").then(
    "vendor/datatables-plugins/js/dataTables.bootstrap.js",
    "vendor/datatables-plugins/css/dataTables.bootstrap.css",
    "vendor/datatables-colreorder/js/dataTables.colReorder.js",
    "vendor/datatables-colreorder/css/dataTables.colReorder.css");

所以我搜索了这个link：

此扩展程序现已退役，已被替换为按钮和选择扩展名。保留文档仅遗留参考。新项目应使用按钮和选择对TableTools的偏好。

所以我偷了这个按钮的要求：

steal("vendor/datatables.net-buttons/js/dataTables.buttons.js").then(
    "vendor/datatables.net-buttons/js/buttons.flash.js",
    "vendor/datatables.net-buttons/js/buttons.colVis.js",
    "vendor/datatables.net-buttons/js/buttons.html5.js",
    "vendor/datatables.net-buttons/js/buttons.print.js",
    "vendor/datatables.net-buttons-dt/css/buttons.dataTables.css");

并添加了jquery dataTable中的按钮。

 buttons: [
             'csv', 'excel', 'pdf', 'print'
          ]

dataTable的代码如下：

    this.dataTable = this.$reportGrid.dataTable({
        "aaData": aaData,
        "aaSorting": aaSorting,
        "aLengthMenu": this.options.pageSizes,
        "aoColumns": aoColumns,
        //"asStripeClasses": ["odd-row", "even-row"],
        "autoWidth": true,
        "bDestroy": true,
        "bSort": this.options.allowSort === undefined ? true : this.options.allowSort,
        "stateSave": true,
        "bDeferRender": true,
        "bScrollCollapse": true,
        "footerCallback": function (nFoot, aData, iStart, iEnd, aiDisplay) {
            if (that.data.totals) {
                that.$tfoot.html(that.getTemplatePath(that.options.tmplFooter), that.data);
            } else {
                that.$tfoot.empty();
            }
        },
        "fnStateLoadParams": function (oSettings, oData) {
            oData.iStart = 0;
            /* Reset the initial row displayed to be the first one. */
            oData.aaSorting = oSettings.aaSorting;
            /* Use the sorting supplied, not the one saved. */
            oData.oSearch = oSettings.oSearch;
            /* Use the search options supplied, not the ones saved. */
            oData.ColReorder = [];
            /* Empty this saved column reordering */
        },
        "pageLength": this.options.pageSize,
        "displayStart": 0,
        "language": {
            "info": "Displaying rows _START_ to _END_ of _TOTAL_",
            "lengthMenu": "Show  _MENU_  rows at a time",
            "paginate": {
                "first": "First",
                "last": "Last",
                "previous": "Prev",
                "next": "Next"
            },
            "searchPlaceholder": "Search..."
        },
        "sDom": this.buildsDom(),
        buttons: [
           'csv', 'excel', 'pdf', 'print'
        ],
        "pagingType": "full_numbers",
        "sScrollX": this.options.scrollX,
        "drawCallback": function (o) {
            if (that.options.autoHeight) {
                that.adjustGridHeightToContainer();
            }
            that.removeTableInlineOverflowStyle();
            if (that.element != null) {
                can.trigger(that.element, 'grid_drawn');
            }
        }
    });

但是当我运行代码时，按钮并没有显示出来。我也在下面尝试过：

 "buttons": [
               'csv', 'excel', 'pdf', 'print'
            ]

我怎么能用这个？有没有办法导出csv文件少变更或我需要包括的任何额外的？

Answer 1

$('#influencer_table').dataTable({
                    paging: false,
                    "bAutoWidth": false,
                    dom: 'Bfrtip',
                    select: {
                        style: 'multi',
                    },
                    buttons: [
                        {
                            extend: 'colvis',
                            columns: ':not(:first-child)',
                        },
                        {
                            extend: 'csvHtml5',
                            text: 'Export All',
                            exportOptions: {
                                columns: ':not(:first-child):visible'
                            }
                        },
                        {
                            extend: 'csvHtml5',
                            text: 'Export Selected',
                            exportOptions: {
                                columns: ':not(:first-child):visible',
                                modifier: {
                                    selected: true
                                }
                            }
                        }
                    ],
                    order: [[1, 'asc']],
                });

Answer 2

我可以使用现有的TableTools将dataTable导出为CSV。为此我已经包含了所需的插件：

 "datatables-tabletools/dataTables.tableTools.js",
 "datatables-tabletools/dataTables.tableTools.css"

然后将以下代码添加到我的问题中的代码中，以添加CSV的按钮：

  //Added Export Button for DataTable
        var tableTools = new $.fn.dataTable.TableTools(this.dataTable, {
            "sSwfPath": "vendor/datatables-tabletools/swf/copy_csv_xls_pdf.swf",
            "aButtons": [{
                "sExtends": "csv",
                "sButtonText": "Export"
            }]
        });
        tableTools.fnResizeButtons();
        $('.DT-lf-right', this.element).append($(tableTools.fnContainer()));

它很简单，现在工作正常。

如何将jQuery dataTable导出为CSV？

2 个答案: