jQuery DataTable - 隐藏列问题

Question

I am working on a project that is using jQuery DataTables empowered theme (Smart Admin). I find the tool a great client side solution specially to filter results without coming back to the server.

The table fields we show are only part of which there is in the database due to the fact there is not enough space. The issue is that the export feature then only includes these limited columns. I red that if we have a hidden column that too will get exported (ex: csv, xls, pdf) etc.

I tried to hie a field and that didn't work out for me. I be obliged if you could point out to what I am doing wrong.

I referenced the following article: Data Table Example - Hidden Columns

There were no console errors and the rest of the functionality (filtering, exporting works well).

How ever my concern is that we might be having an bug, didn't update to latest. I think we have 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: -> }}}

Thanks in advance and wish you guys a wonderful week end.

Answer 1

So what you want is that the extra columns cannot be shown in the UI (because of real estate limitations)
However, you want these extra columns to be present in the exported csv.

What datatable does is that the hidden columns are present in the table HTML but are marked display:none. This is because the idea of hidden columns is that they do not show up anywhere but they are available so that it can be searched.

If you want to achieve this, you need to write a custom jQuery which will pick out all the data in the columns and then flush it into csv.

That being said, i think it would be advisable if you create a new response type for your controller method to handle csv and seperate the export columns from the display columns. In other words

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