如何在 ruby​​ on rails 中显示 Datatable 表格工具（复制、csv、excel、pdf、保存）

Posted 2023-02-19

【中文标题】如何在 ruby​​ on rails 中显示 Datatable 表格工具（复制、csv、excel、pdf、保存）

【英文标题】：How to display Datatable tabletools (copy, csv, excel, pdf, save) in ruby on rails

【发布时间】：2013-01-21 18:00:38

【问题描述】：

我在我的 ruby​​ on rails 应用程序中使用 Datatable。我跟这里的同一个..

https://github.com/rweng/jquery-datatables-rails

我的数据表排序和搜索工作正常。但我在表头中看不到我的表格工具选项（例如 - 复制、csv、excel、pdf、保存）。

我想这样展示我的桌子......

请帮忙。

【问题讨论】：

如果您找到了解决方案，您可以添加并接受它，以便帮助其他人。

您可以添加答案或删除您的问题吗？这个问题不应该在未回答的清单上。谢谢。

请添加它的工作原理。

【参考方案1】：

我通过添加 ZeroClipboard.js 得到了这个

<script src="http://localhost/assets/js/ZeroClipboard.js"></script>

【参考方案2】：

更新（2016 年）：

虽然他们正在淘汰 Buttons 和 Select 扩展 (source) 的 TableTools，但这是 dom 选项示例的更新版本：

var oTable = $('#my-table').dataTable(
    autoWidth: false,
    autoHeight: false,
    paging: false,
    dom: 'TCfrtip', // <-- Update letters for whichever extensions you want to use
    responsive: false,
    searching: true,
    ordering: true,
    stateSave: true,
    scrollY: 550,
    scrollX: true,
    scrollCollapse: true,
    fixedHeader: false,
    buttons: [
        'copyhtml5',
        'csvHtml5',
        'excelHtml5',
        'pdfHtml5'
    ],
    columnDefs: [
        targets: 'no-sort', // disable sorting on class="no-sort"
        orderable: false
    ],
    drawCallback: function (settings)  
);

---

上一个答案（2013 年）：

解决方案是添加这个：

"sDom": '<"H"TCfr>t<"F"ip>'

在您的 javascript 中。它也可以很好地与显示/隐藏列一起使用。如果您不使用显示/隐藏列，则可以删除大写“C”。

示例（显示/隐藏列）：

// Users
$("#users-datatable").dataTable(
    "bStateSave": true,
    "bJQueryUI": true,
    "sPaginationType": "full_numbers",
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": $('#users-datatable').data('source'),
    "bScrollInfinite": true,
    "bScrollCollapse": true,
    "iDisplayLength": 100,
    "sScrollY": "500px",
    "sScrollX": "100%",
    "sDom": '<"H"TCfr>t<"F"ip>',
    "oTableTools": 
        "aButtons": [
            "copy",
            "csv",
            "xls",
            
                "sExtends": "pdf",
                "sPdfOrientation": "landscape",
                "sPdfMessage": "Your custom message would go here."
            ,
            "print"
        ]
    
);

希望这会对某人有所帮助。

【讨论】：

嗨，谢谢您的回答 - 但是："sDom": 't' 它实际上是做什么的？

嘿@BKSpureon，dataTables 键名和语法可能自此答案以来略有变化，但您可以在datatables options reference中找到每个字母的含义

@BKSpureon 我用一个更新的例子更新了我的答案；）