表外的数据表导出按钮 [英] DataTable export button outside table

查看:22
本文介绍了表外的数据表导出按钮的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我的网页上有多个表,每个表都是一个 DataTable,它工作正常.

I have multiple tables on my web page and each one is a DataTable, it is working fine.

我想在每个数据表上启用导出到 excel 的功能,但按钮应该在表 DOM 之外(并且每个表都应该有自己的导出按钮).

I want to enable the export to excel functionality on each of the datatable but the button should be outside the table DOM (and each table should have its own button to export).

我可以使用以下方法在表格 DOM 中生成 HTML5 按钮:

I can genrate the HTML5 button inside the table DOM using:

$('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'copyHtml5',
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
        ]
    } );

但我想要某种方式,通过它我可以在表格 DOM 之外附加一个按钮,以作为特定表格的 excel 导出.

But i want someway by which i can attach a button outside the table DOM to act as a export to excel for specific table.

推荐答案

通过 <初始化每个表格按钮strong>constructor,通过它您可以将按钮元素放置在您想要的任何容器中.如果您想将按钮放在表格外的 <div id="buttons"></div> 元素中,请执行此操作

Initialize each tables buttons via a constructor, by that you can place the button elements in any container you want. If you want to place the buttons in a <div id="buttons"></div> element outside the table, do this

var buttons = new $.fn.dataTable.Buttons(table, {
     buttons: [
       'copyHtml5',
       'excelHtml5',
       'csvHtml5',
       'pdfHtml5'
    ]
}).container().appendTo($('#buttons'));

演示 -> https://jsfiddle.net/qoqq3okg/

demo -> https://jsfiddle.net/qoqq3okg/

我不知道您的多个表格设置,但现在您只需要沿着每个

元素插入一些元素,并将每个表格的按钮注入到该元素中,如上所述.

I dont know your multiple tables setup, but now you just have to insert some elements along each <table> element and inject buttons for each table into that element as described above.

这篇关于表外的数据表导出按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆