Javascript 获取Datatable中导出按钮的动态文件名和标题
我试图用一个DataTable初始化代码块初始化不同的表,我在其中创建了DataTable Excel按钮以导出数据。我获得了很大的成功。但现在的挑战是,我无法以正确的文件名导出数据 实际上,当datatable初始化时,“导出”按钮会自动绑定到表中,这样就可以正确导出数据,但在分配文件名时,我试图通过按类搜索来获取可见的datatable实例。当页面中只有一个表时,我能够得到正确的表。但当单页上有多个表时,细化可见表并不能给出正确的表。如何在我的JS代码中获得正确的表实例,以便它在正确的表上准确工作 这就是我试图获取可见数据表Javascript 获取Datatable中导出按钮的动态文件名和标题,javascript,jquery,datatables,datatable-buttons,Javascript,Jquery,Datatables,Datatable Buttons,我试图用一个DataTable初始化代码块初始化不同的表,我在其中创建了DataTable Excel按钮以导出数据。我获得了很大的成功。但现在的挑战是,我无法以正确的文件名导出数据 实际上,当datatable初始化时,“导出”按钮会自动绑定到表中,这样就可以正确导出数据,但在分配文件名时,我试图通过按类搜索来获取可见的datatable实例。当页面中只有一个表时,我能够得到正确的表。但当单页上有多个表时,细化可见表并不能给出正确的表。如何在我的JS代码中获得正确的表实例,以便它在正确的表上准
$('.dt table:visible').data('excel-filename')
请让我知道如何使用下面的代码获得更具体的表格
JS代码
var tableObj = $('.dt-table').DataTable({
retrieve: true,
"lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, 'All'] ],
"language": {
"emptyTable": "No data available to show...",
"info": "Showing _START_ to _END_ from _TOTAL_ records",
"infoEmpty": "0 records to show...",
"lengthMenu": "Show _MENU_ records",
"loadingRecords": "Loading...",
"processing": "Processing...",
"zeroRecords": "No matching records found...",
"infoFiltered": "(filtered from _MAX_ total records)"
},
dom: "<'row'<'col-sm-12'B>>" +
"<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
buttons: {
buttons: [
{
text: '<i class="far fa-file-excel pr-2"></i> Export to Excel(.xlsx)',
title: function(thead, data, start, end, display) {
return $('.dt-table:visible').data('excel-title');
},
extend: 'excel',
autoFilter: true,
filename: function() {
var d = new Date($.now());
var n = d.getDate()+"_"+(d.getMonth()+1)+"_"+d.getFullYear()+"_"+d.getHours()+"_"+d.getMinutes()+"_"+d.getSeconds();
return $('.dt-table:visible').data('excel-filename') + '_' + n;
},
customize: function(xlsx) {
var sheet = xlsx.xl.worksheets['sheet1.xml'];
$( 'sheets sheet', xlsx.xl['workbook.xml'] ).attr( 'name', $('.dt-table:visible').data('excel-title') );
},
exportOptions: {
//columns: [ 1, 2, 3 ]
format: {
body: function (data, row, column, node) {
if($(node).find(".notExportable").length) {
return $(data).remove(".notExportable").html();
} else {
return data;
}
}
},
columns: ':not(.notExportable)'
}
}
],
dom: {
container: {
tag: "div",
className: "mb-2 mlmt-act dt-buttons"
},
button: {
tag: "a",
className: "btn btn-info mlmt-button"
},
buttonLiner: {
tag: null
}
}
},
drawCallback: function() {
var hasRows = this.api().rows({ filter: 'applied' }).data().length > 0;
var tableId = this.api().tables().nodes().to$().attr('id');
var excelButton = $('a.mlmt-button[aria-controls="'+tableId+'"]');
//alert(tableId);
//alert('.mlmt-button-'+($('.dt-table:visible').attr('id')));
if(hasRows > 0) {
excelButton.removeAttr('style');
} else {
excelButton.css('pointer-events', 'none').css('background-color', 'gray');
}
}
});
<table class="table table-bordered table-hover table-striped dt-table" id="tblAllLic" data-page-length='10' data-order='[[0, "asc"]]' data-excel-title="All License List" data-excel-filename="All_Licenses">
</table>
var tableObj=$('.dt table').DataTable({
检索:对,
“长度菜单”:[[10,25,50,-1],[10,25,50,'全部']],
“语言”:{
“emptyTable”:“没有可显示的数据…”,
“信息”:“显示从总记录开始到结束的记录”,
“infoEmpty”:“要显示的0条记录…”,
“长度菜单”:“显示菜单记录”,
“加载记录”:“加载…”,
“处理”:“处理…”,
“zeroRecords”:“未找到匹配的记录…”,
“infoFiltered:”(从_MAX_total记录中筛选)
},
dom:“+
"" +
"" +
"",
按钮:{
按钮:[
{
文本:“导出到Excel(.xlsx)”,
标题:功能(日期、数据、开始、结束、显示){
返回$('.dt table:visible')。数据('excel-title');
},
扩展:“excel”,
自动筛选:对,
文件名:函数(){
var d=新日期($.now());
变量n=d.getDate()+“”+(d.getMonth()+1)+“”+d.getFullYear()+“”+d.getHours()+“”+d.getMinutes()+“”+d.getSeconds();
返回$('.dt table:visible').data('excel-filename')+'+'n;
},
自定义:功能(xlsx){
var sheet=xlsx.xl.worksheets['sheet1.xml'];
$('sheets sheet',xlsx.xl['workbook.xml']).attr('name',$('dt table:visible').data('excel-title');
},
出口选择:{
//列:[1、2、3]
格式:{
正文:函数(数据、行、列、节点){
if($(node.find(“.notExportable”).length){
返回$(数据).remove(“.notExportable”).html();
}否则{
返回数据;
}
}
},
列:':不是(.notExportable)'
}
}
],
dom:{
容器:{
标签:“div”,
类名:“mb-2 mlmt act dt按钮”
},
按钮:{
标签:“a”,
类名:“btn btn信息mlmt按钮”
},
按钮线:{
标签:空
}
}
},
drawCallback:function(){
var hasRows=this.api().rows({filter:'applied'}).data().length>0;
var tableId=this.api().tables().nodes()到$().attr('id');
var excelButton=$('a.mlmt-button[aria controls=“”+tableId+”);
//警报(tableId);
//警报(“.mlmt按钮-”+($(“.dt表:可见”).attr('id'));
如果(行数>0){
excelButton.removeAttr('style');
}否则{
css('pointer-events','none').css('background-color','gray');
}
}
});
HTML代码
var tableObj = $('.dt-table').DataTable({
retrieve: true,
"lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, 'All'] ],
"language": {
"emptyTable": "No data available to show...",
"info": "Showing _START_ to _END_ from _TOTAL_ records",
"infoEmpty": "0 records to show...",
"lengthMenu": "Show _MENU_ records",
"loadingRecords": "Loading...",
"processing": "Processing...",
"zeroRecords": "No matching records found...",
"infoFiltered": "(filtered from _MAX_ total records)"
},
dom: "<'row'<'col-sm-12'B>>" +
"<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
buttons: {
buttons: [
{
text: '<i class="far fa-file-excel pr-2"></i> Export to Excel(.xlsx)',
title: function(thead, data, start, end, display) {
return $('.dt-table:visible').data('excel-title');
},
extend: 'excel',
autoFilter: true,
filename: function() {
var d = new Date($.now());
var n = d.getDate()+"_"+(d.getMonth()+1)+"_"+d.getFullYear()+"_"+d.getHours()+"_"+d.getMinutes()+"_"+d.getSeconds();
return $('.dt-table:visible').data('excel-filename') + '_' + n;
},
customize: function(xlsx) {
var sheet = xlsx.xl.worksheets['sheet1.xml'];
$( 'sheets sheet', xlsx.xl['workbook.xml'] ).attr( 'name', $('.dt-table:visible').data('excel-title') );
},
exportOptions: {
//columns: [ 1, 2, 3 ]
format: {
body: function (data, row, column, node) {
if($(node).find(".notExportable").length) {
return $(data).remove(".notExportable").html();
} else {
return data;
}
}
},
columns: ':not(.notExportable)'
}
}
],
dom: {
container: {
tag: "div",
className: "mb-2 mlmt-act dt-buttons"
},
button: {
tag: "a",
className: "btn btn-info mlmt-button"
},
buttonLiner: {
tag: null
}
}
},
drawCallback: function() {
var hasRows = this.api().rows({ filter: 'applied' }).data().length > 0;
var tableId = this.api().tables().nodes().to$().attr('id');
var excelButton = $('a.mlmt-button[aria-controls="'+tableId+'"]');
//alert(tableId);
//alert('.mlmt-button-'+($('.dt-table:visible').attr('id')));
if(hasRows > 0) {
excelButton.removeAttr('style');
} else {
excelButton.css('pointer-events', 'none').css('background-color', 'gray');
}
}
});
<table class="table table-bordered table-hover table-striped dt-table" id="tblAllLic" data-page-length='10' data-order='[[0, "asc"]]' data-excel-title="All License List" data-excel-filename="All_Licenses">
</table>