jQuery DataTable - 隐藏列问题
Posted
技术标签:
【中文标题】jQuery DataTable - 隐藏列问题【英文标题】:jQuery DataTable - Hide Column Issue 【发布时间】:2015-07-12 00:12:00 【问题描述】:我正在开发一个使用 jQuery DataTables 授权主题(Smart Admin)的项目。我发现该工具是一个很好的客户端解决方案,专门用于过滤结果而无需返回服务器。
由于没有足够的空间,我们显示的表字段只是数据库中的一部分。问题是导出功能只包括这些有限的列。我认为如果我们有一个 hidden 列也会被导出(例如: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: ->
提前致谢,祝大家周末愉快。
【问题讨论】:
您能否为每个按钮添加mColumns 参数和all
值(例如 "sExtends": "xls", "mColumns": "all", ...
),看看是否有什么不同?确保您使用的是最新的 TableTools 插件。此外,问题可能出在您正在使用的 datatables-responsive 库中,当屏幕尺寸减小时,它会从 DOM 中删除 <td>
元素。
用java脚本给出html代码
【参考方案1】:
所以你想要的是额外的列不能显示在 UI 中(由于房地产限制) 但是,您希望这些额外的列出现在导出的 csv 中。 datatable 的作用是隐藏列存在于表格 HTML 中,但标记为 display:none。这是因为隐藏列的想法是它们不会出现在任何地方,但它们是可用的,因此可以被搜索到。 如果你想实现这一点,你需要编写一个自定义的 jQuery,它将挑选出列中的所有数据,然后将其刷新到 csv 中。 话虽如此,我认为最好为控制器方法创建一个新的响应类型来处理 csv 并将导出列与显示列分开。换句话说
respond_to |format| do
html: <something>
json: <something>
csv:@model.to_csv
【讨论】:
以上是关于jQuery DataTable - 隐藏列问题的主要内容,如果未能解决你的问题,请参考以下文章