[英]DataTables - How can I use my own buttons for exporting?
I'm using Materialize as my UI framework and I'm using DataTables for my tables. 我使用Materialize作为我的UI框架,我正在使用DataTables作为我的表。 I have a table which I need to export to excel and I can do it just fine using the DataTables buttons.
我有一个表,我需要导出到Excel,我可以使用DataTables按钮做得很好。 However, they are the default DataTables buttons, and I would like to use the Materialize buttons.
但是,它们是默认的DataTables按钮,我想使用Materialise按钮。
So the question is: how can I use my own buttons and have them do the functions of the built-in buttons of DataTables (specifically exporting to Excel)? 所以问题是: 如何使用我自己的按钮让他们执行DataTables内置按钮的功能(特别是导出到Excel)?
I already tried using the option "className" to the Materialize button class, but that didn't work. 我已经尝试使用选项“className”到Materialize按钮类,但这不起作用。 I figure I probably will have to do some JQuery function.
我想我可能要做一些JQuery功能。
Thanks everyone! 感谢大家!
EDIT: Here's my code: 编辑:这是我的代码:
$(document).ready(function() {
var dataTable = $('#datatable').DataTable( {
language: {
search: "",
searchPlaceholder: "Search"
},
dom: 'Brftip',
buttons: [
'copy',
'csv',
'excel',
'pdf',
'print'
]
} );
Use buttons.dom.button
to define class and element that would be used for a button. 使用
buttons.dom.button
定义将用于按钮的类和元素。
For example: 例如:
var table = $('#example').DataTable({
"ajax": 'https://api.myjson.com/bins/qgcu',
"order": [],
"dom": 'Bfrtip',
"buttons": {
"dom": {
"button": {
"tag": "button",
"className": "waves-effect waves-light btn mrm"
}
},
"buttons": [ 'copyHtml5', 'excelHtml5', 'csvHtml5', 'pdfHtml5' ]
}
});
See this jsFiddle for code and demonstration. 有关代码和演示,请参阅此jsFiddle 。
https://datatables.net/extensions/buttons/custom https://datatables.net/extensions/buttons/custom
buttons: [
{
text: 'Reload',
action: function ( e, dt, node, config ) {
dt.ajax.reload();
}
}
]
"text" can be the html to your custom button “text”可以是自定义按钮的html
You should use Jquery to select the button and add the class in the drawcallback. 您应该使用Jquery选择按钮并在drawcallback中添加类。 Something like this:
像这样的东西:
$('.buttons-excel').addClass('waves-effect waves-light btn');
Or: 要么:
var table = $('#example').DataTable({
"ajax": 'https://api.myjson.com/bins/qgcu',
"order": [],
"dom": 'Bfrtip',
"buttons": {
"dom": {
"button": {
"tag": "button",
"className": "waves-effect waves-light btn mrm"
}
},
"buttons": [ 'copyHtml5', 'excelHtml5', 'csvHtml5', 'pdfHtml5' ]
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.