jQuery DataTable - 隐藏列问题

Question

我正在处理一个项目，使用了jQuery DataTables增强主题（Smart Admin）。我发现这个工具是一种很好的客户端解决方案，特别是过滤结果时无需返回服务器。

我们显示的表字段只是数据库中的一部分，因为没有足够的空间。问题在于导出功能仅包含这些有限列。我阅读了一篇文章，如果我们有一个隐藏列，那么它也会被导出（例如：csv、xls、pdf等）。

我试图隐藏一个字段，但没有成功。如果你能指出我哪里做错了的话，我将不胜感激。

我参考了以下文章：Data Table Example - Hidden Columns。

没有控制台错误，其余功能（过滤、导出）运行良好。

然而我担心可能存在一个漏洞，因为我们没有更新到最新版本。我认为我们使用的是v1.10。

  # @fn           setup: -> {{{
  # @brief        Sets up DataTable plugin with the help of the @$_tableId provided.
  setupDataTables: ->
    self = @

    @setupCheckboxes() if @$_bulkControls.length > 0

    @$_dataTables = $(@$_tables).dataTable
      "columnDefs": [
        {
          "targets": [1, 2, 3, 4],
          "visible": false
        }
      ],
      "sDom": "<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-6 hidden-xs'T>r>t<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-sm-6 col-xs-12'p>>"
      "oTableTools": {
        "aButtons": [
          "copy",
          {
            "sExtends": "csv",
            "sTitle": @generateDocumentName()
          },
          {
            "sExtends": "xls",
            "sTitle": @generateDocumentName()
          },
          {
            "sExtends": "pdf",
            "sTitle": @generateDocumentName(),
            "sPdfMessage": "SmartAdmin PDF Export",
            "sPdfSize": "letter"
          },
          {
            "sExtends": "print",
            "sMessage": "Generated by SmartAdmin <i>(press Esc to close)</i>"
          }
        ],
        "sSwfPath": "<%= asset_path('copy_csv_xls_pdf.swf') %>"
      },
      "autoWidth" : true,
      "preDrawCallback" : ->
        # Initialize the responsive datatables helper once.
        if !self.$_responsiveHelperDatatableTabletools
          self.$_responsiveHelperDatatableTabletools = new ResponsiveDatatablesHelper($('#datatable_tabletools'), self.$_breakpointDefinition)
      ,
      "rowCallback" : (nRow) ->
        self.$_responsiveHelperDatatableTabletools.createExpandIcon(nRow)
      ,
      "drawCallback" : (oSettings) =>
        @$_responsiveHelperDatatableTabletools.respond()

        # Setup bulk control containers if requiredkCo
        @setupBulkControls() if @$_bulkControls.length > 0

    $("#datatable_tabletools thead th input[type=text]").on 'keyup change', ->
      self.$_dataTables
        .column( $(this).parent().index()+':visible' )
        .search( this.value )
        .draw()


  # end of setup: -> }}}

提前感谢你们，祝你们周末愉快。

- Ziyan Junaideen

---

你能否为每个按钮添加mColumns参数，并将其值设置为all（例如 { "sExtends": "xls", "mColumns": "all", ... }），看看是否有任何区别？确保使用最新的TableTools插件。此外，问题可能出在你正在使用的datatables-responsive库中，当屏幕尺寸缩小时，它会从DOM中删除<td>元素。 - Gyrocode.com

请提供带有JavaScript的HTML代码。 - vengatesh rkv

Answer 1

所以你想要的是额外的列不能在UI中显示（因为有房地产限制）
然而，你希望这些额外的列在导出的csv中存在。

Datatable所做的是隐藏的列存在于表格HTML中，但被标记为display:none。这是因为隐藏列的想法是它们不会出现在任何地方，但它们是可用的，以便可以搜索它们。

如果你想实现这个，你需要编写一个自定义的jQuery，它将挑选出所有列中的数据，然后将其刷新到csv中。

话虽如此，我认为最好为你的控制器方法创建一个新的响应类型来处理csv，并将导出列与显示列分开。换句话说

respond_to |format| do 
html: <something> 
json: <something> 
csv:@model.to_csv

- Rishit