如何使用自定义按钮导出带有数据表的pdf
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使用自定义按钮导出带有数据表的pdf相关的知识，希望对你有一定的参考价值。
如何使用自定义按钮导出表格数据以及如何删除标记的按钮，如下图所示？
我已经尝试了下面的代码，但是当我单击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");
);
);
控制台出错：
答案
这段代码适合我。请更改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的主要内容，如果未能解决你的问题，请参考以下文章
如何自定义 jquery 数据表导出，例如 PDF Excel Print 和 CSV？