jQuery 数据表中的纯 HTML 导出按钮答案

【问题标题】：Pure HTML export buttons in jQuery Data TablejQuery 数据表中的纯 HTML 导出按钮
【发布时间】：2015-10-02 14:42:26
【问题描述】：

我正在使用 jQuery 数据表。它提供了一组导出按钮。但那些按钮是 swf 按钮。

我想要 HTML 下拉按钮。我已经通过它的帮助，但找不到这样的代码来设置 HTML5 按钮以外的内置 Flash。

我想要像下面这样的下拉按钮

出口
- PDF
- CSV
- HTML
- Excel

上面的按钮是一组 HTML 标签（通常是它们在 HTML 中的样子）。我可以这样做吗？

编辑：

我想使用button、div、ul、li 标签组合生成按钮，我们通常在常规 HTML 文件中这样做。

【问题讨论】：

标签： html button datatables

【解决方案1】：

解决方案

将以下代码用于不使用 Flash 的 HTML5 导出按钮。

var table = $('#example').DataTable({
    dom: 'Bfrtip',
    buttons: [
      {
         extend: 'collection',
         text: 'Export',
         buttons: [ 'pdfHtml5', 'csvHtml5', 'copyHtml5', 'excelHtml5' ]
      }
   ]
});

您需要使用 Download Builder 来包含 DataTables、Buttons、HTML5 导出、JSZip 和 pdfmake 库，以便为 JS/CSS 文件生成指向 CDN 的链接。

演示

有关代码和演示，请参阅this jsFiddle。

链接

【讨论】：

我不能在按钮中设置 HTML 代码（div、按钮、a 等标签）并应用 HTML 类吗？因为这些按钮不符合我的要求。
@NullPointer，这些是纯 HTML 按钮。请参阅Button - Options，您可以使用buttons.buttons.className 选项设置类。你也可以创建custom buttons。
如果我想添加 HTML 标签怎么办？因为我的静态 HTML 设计包含“导出”作为按钮标签，子菜单由
和
组成。抱歉有更多问题。
@NullPointer，您可以使用自己的布局/设计并通过 API button().trigger() 以编程方式触发 DataTables 按钮，请参阅 jsfiddle.net/gr5er1pj/2
@HalfBloodPrince，答案中提到了最小集：DataTables、Buttons、HTML5 export、JSZip 和 pdfmake。还要确保您使用的是“DataTable()”而不是“dataTable()”。