问题
I'm trying to find a way to change the buttons on TableTools. I'd like to use my own customized links instead of the flash buttons. Is there a way I can do that? Any good resource teaching me how to make that modification and still able to use the functionalities, like button collection, etc.
回答1:
According to the creator, the only way to get the TableTools export functionality is by using the Flash buttons.
The other threads that you found should say that currently, no, this is not an option that TableTools provides. The Flash option is used to provide cross browser / platform ability to save files entirely on the client-side - that option simply isn't available in older browsers (IE6, IE7 etc) where there is no support for the data:// protocol and local file system interaction options.
It would most certainly be possible to add this ability to TableTools, but I'm afraid I haven't yet had an opportunity to do so. It is on the road map though.
Allan
If you are interested in creating the export files server side, you may want to consider the download (GET) plug-in for TableTools.
回答2:
Yes, it is possible to override the existing buttons eg PDF/CSV etc or to create new custom buttons that have links to a url to get or post data. Here, I'm showing 2 methods with get methods:
For More info on Get & Post methods:
Visit: Datatable tabletools GET/POST download method overrides
Code generated pdf is used because pdf output from tabletools on a table that have rows grouped by some column data is overlapped.
1st to override PDF function and
2nd to create custom button.
1. Override PDF function to fetch pdf from server code.
/*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. Custom button to fetch pdf from server code.
/*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]
});
/**/
});
来源：https://stackoverflow.com/questions/10537949/how-to-use-a-link-in-tabletools-instead-of-flash-buttons