【发布时间】:2012-05-10 16:02:48
【问题描述】:
我正在尝试找到一种方法来更改 TableTools 上的按钮。我想使用我自己的自定义链接而不是 Flash 按钮。有没有办法我可以做到这一点?任何好的资源都可以教我如何进行修改并且仍然能够使用按钮集合等功能。
【问题讨论】:
标签: javascript jquery jquery-datatables tabletools
我正在尝试找到一种方法来更改 TableTools 上的按钮。我想使用我自己的自定义链接而不是 Flash 按钮。有没有办法我可以做到这一点?任何好的资源都可以教我如何进行修改并且仍然能够使用按钮集合等功能。
【问题讨论】:
标签: javascript jquery jquery-datatables tabletools
According to the creator,获得 TableTools 导出功能的唯一方法是使用 Flash 按钮。
你找到的其他线程应该说目前,不,这个 不是 TableTools 提供的选项。 Flash 选项用于 提供跨浏览器/平台的能力,将文件完全保存在 客户端 - 该选项在旧版浏览器中根本不可用 (IE6、IE7 等)不支持 data:// 协议和 本地文件系统交互选项。
肯定有可能将此功能添加到 TableTools, 但恐怕我还没有机会这样做。它在 不过路线图。
艾伦
如果您有兴趣在服务器端创建导出文件,您可能需要考虑the download (GET) plug-in for TableTools。
【讨论】:
是的,可以覆盖现有按钮,例如 PDF/CSV 等,或者创建新的自定义按钮,这些按钮具有指向 URL 的链接以获取或发布数据。在这里,我展示了 2 个带有 get 方法的方法:
有关获取和发布方法的更多信息:
访问:Datatable tabletools GET/POST download method overrides
使用代码生成的 pdf 是因为 tabletools 的 pdf 输出在表上重叠,该表的行按某些列数据分组。
第一个覆盖PDF功能和
第二次创建自定义按钮。
1.覆盖 PDF 函数以从服务器代码中获取 pdf。
/*Get Method table Tools - PDF - Overriding*/
TableTools.BUTTONS.pdf = {
"sAction": "text",
"sTag": "default",
"sFieldBoundary": "",
"sFieldSeperator": "\t",
"sNewLine": "<br>",
"sToolTip": "",
"sButtonClass": "DTTT_button_text",
"sButtonClassHover": "DTTT_button_text_hover",
//"sButtonText": "PDF",
"mColumns": "all",
"bHeader": true,
"bFooter": true,
"sDiv": "",
"fnMouseover": null,
"fnMouseout": null,
"fnClick": function (nButton, oConfig) {
var oParams = this.s.dt.oApi._fnAjaxParameters(this.s.dt);
var iframe = document.createElement('iframe');
iframe.style.height = "0px";
iframe.style.width = "0px";
//iframe.src = oConfig.sUrl + "?" + $.param(oParams);
iframe.src = oConfig.sUrl;//This is the URl you give in datatable Tabletools pdf override below
document.body.appendChild(iframe);
},
"fnSelect": null,
"fnComplete": null,
"fnInit": null
};
/**/
/*Datatable initialisation*/
$(document).ready(function () {
oTable = $('#alternatecolor').dataTable({
"bJQueryUI": true,
"aLengthMenu": [
[10, 25, 50, 100, -1],
[10, 25, 50, 100, "All"]
],
"sPaginationType": "full_numbers",
"aoColumns": [
null,
null,
null,
null,
null],
"bLengthChange": false, "bPaginate": false,
"sDom": '<"H"Tfr>t<"F"ip>',
//"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"aButtons": [
"csv", "xls",
{
/*PDF Override*/
"sExtends": "pdf",
"sButtonText": "PDF",
//Custom url to fetch pdf report
"sUrl": " report/PDFReportUsers/us/1"
}
]
}
})
/*Row grouping - optional*/
.rowGrouping({ bExpandableGrouping: true,
bExpandSingleGroup: false,
iExpandGroupOffset: -1
//asExpandedGroups: [name]
});
/**/
});
});
2。从服务器代码中获取 pdf 的自定义按钮。
/*Get Method table Tools - Download custom button*/
TableTools.BUTTONS.download= {
"sAction": "text",
"sTag": "default",
"sFieldBoundary": "",
"sFieldSeperator": "\t",
"sNewLine": "<br>",
"sToolTip": "",
"sButtonClass": "DTTT_button_text",
"sButtonClassHover": "DTTT_button_text_hover",
//"sButtonText": "PDF",
"mColumns": "all",
"bHeader": true,
"bFooter": true,
"sDiv": "",
"fnMouseover": null,
"fnMouseout": null,
"fnClick": function (nButton, oConfig) {
var oParams = this.s.dt.oApi._fnAjaxParameters(this.s.dt);
var iframe = document.createElement('iframe');
iframe.style.height = "0px";
iframe.style.width = "0px";
//iframe.src = oConfig.sUrl + "?" + $.param(oParams);
iframe.src = oConfig.sUrl;
document.body.appendChild(iframe);
},
"fnSelect": null,
"fnComplete": null,
"fnInit": null
};
/**/
$(document).ready(function () {
oTable = $('#alternatecolor').dataTable({
"bJQueryUI": true,
"aLengthMenu": [
[10, 25, 50, 100, -1],
[10, 25, 50, 100, "All"]
],
"sPaginationType": "full_numbers",
"aoColumns": [
null,
null,
null,
null,
null],
"bLengthChange": false, "bPaginate": false,
"sDom": '<"H"Tfr>t<"F"ip>',
//"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"aButtons": [
"csv", "xls"
, {
"sExtends": "download",
"sButtonText": "Download PDF",
"sUrl": "admin/user/4/downloadfile"
}
]
}
})
/*Row grouping - optional */
.rowGrouping({ bExpandableGrouping: true,
bExpandSingleGroup: false,
iExpandGroupOffset: -1
//asExpandedGroups: [name]
});
/**/
});
【讨论】: