如何使用自定义按钮导出带有数据表的 pdf答案

【问题标题】：how to export pdf with datatables using custom buttons如何使用自定义按钮导出带有数据表的 pdf
【发布时间】：2018-09-14 07:37:34
【问题描述】：

如何使用自定义按钮导出表格数据以及如何移除带有标签的按钮，如下图所示？

我已经尝试了下面的代码，但是当我单击 pdf 按钮时。没有 pdf 导出事件。谢谢

HTML 按钮：

<input type="button" name="search" id="search" value="Search" class="btn btn-info" ><input type="button" name="print" id="print" value="Print" class="btn btn-info" ><input type="button" name="pdf" id="pdf" value="PDF" class="btn btn-info" >

Javascript 数据表：

$(document).ready(function(){
$("#pdf").on("click", function() {
    table.button( '.buttons-pdf' ).trigger();
}); 


 $('.input-daterange').datepicker({
  todayBtn:'linked',
  format: "yyyy-mm-dd",
  autoclose: true
 });

 fetch_data('no');

 function fetch_data(is_date_search, start_date='', end_date='')
 {
  var dataTable = $('#order_data').DataTable({
     dom: 'Bfrtip',
        buttons: [
             { 
            extend: 'pdf',
        }
        ], 
   "processing" : true,
   "serverSide" : true,
   bFilter:false,
   "ajax" : {
    url:"fetch.php",
    type:"POST",
    data:{
     is_date_search:is_date_search, start_date:start_date, end_date:end_date
    }, 
   }
  });
 }


 $('#search').click(function(){
  var start_date = $('#start_date').val();
  var end_date = $('#end_date').val();
  if(start_date != '' && end_date !='')
  {
   $('#order_data').DataTable().destroy();
   fetch_data('yes', start_date, end_date);
    //$("#tabel").show(); 
    document.getElementById('tabel').style.display = "block";  
  }
  else
  {
   alert("Both Date is Required");
  }
 }); 

});

来自控制台的错误：

【问题讨论】：

1) 为什么不设置 DataTables 按钮的样式而不是创建新按钮？ 2) 当你有一个名为 dataTable 的变量时，你为什么要尝试使用一个不存在的名为 table 的变量？
是的，我只是想尝试使用表格外的按钮
试试看文档，见datatables.net/reference/api/buttons().container()

标签： javascript datatable datatables

【解决方案1】：

我知道这是一个老问题，但由于我在同一个问题上苦苦挣扎，我还是决定提供一个答案。

我让它工作的唯一方法是使用您要触发的按钮的索引。像这样的：

$().DataTable().buttons(0,x).trigger();

其中x 是您要单击的按钮的索引。

在问题中显示的特定情况下，因为数据表中只有一个按钮：

$('#order_data').DataTable().buttons(0,0).trigger();

会触发点击事件并导出pdf。

【讨论】：

【解决方案2】：

此代码对我有用。请更改 jquery 文件的src 并自己测试一次。

<!DOCTYPE html>
    <head>
        <title>abc</title>
    </head>

    <body>
        <div>
            <table id="example">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Features</th>
                        <th>Report</th>
                    </tr>
                </thead>
                <tbody>
                    <tr><td>a</td><td>b</td><td>c</td></tr>
                </tbody>
            </table>
        </div>
    </body>
    <script src="../assets/plugins/jquery/jquery.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
    <script type="text/javascript">
        $('#example').DataTable({
            dom: 'Bfrtip',
            buttons: [
                'csv', 'excel', 'pdf','print'
            ]
        });
    </script>

</html>

请查看您是否已导入上述所有文件。

【讨论】：

是的，我已经导入了所有的文件数据表库。如果我使用自己制作的按钮，如上图所示
点击PDF按钮时控制台是否有错误？
我在上面的帖子中添加了控制台错误截图
您应该将table.button( '.buttons-pdf' ).trigger(); 行更改为dataTable.button( '.buttons-pdf' ).trigger();，因为dataTable 是用于初始化DataTable 类的对象。
从您的代码中使用数据表中的导出按钮，我的问题是使用表外的按钮来导出数据