如何将jQuery dataTable导出为CSV？

-1

我想输出dataTable网格为CSV。我搜查并发现我必须使用TableTools。但是我没有这个插件。以前我是偷这个版本的dataTable：如何将jQuery dataTable导出为CSV？

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文件与更少的变化或任何额外的，我需要包括??

来源

2016-09-24 setu basak

如果有人给downvote，那么他/她应该发表意见。 –

我可以导出dataTable为CSV使用现有的TableTools工作。对于我有包括所需插件：

"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()));

很简单，现在工作得很好。

来源

2016-10-04 10:55:19

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

来源

2017-03-29 09:55:10

你到底想告诉我们什么？ –

你应该解释你的答案。 –

如何将jQuery dataTable导出为CSV？

回答

相关问题