Altering TableTools Copy to use JQuery UI Dialog
Altering TableTools Copy to use JQuery UI Dialog
Taylor514ce
Posts: 74Questions: 8Answers: 0
Just in case anyone else in the community would like to do this:
Alter this section in TableTools.js to use UI Dialog
[code]
"copy": {
"sAction": "flash_copy",
"sFieldBoundary": "",
"sFieldSeperator": "\t",
"sNewLine": "auto",
"sToolTip": "",
"sButtonClass": "DTTT_button_copy",
"sButtonClassHover": "DTTT_button_copy_hover",
"sButtonText": "Copy",
"mColumns": "all",
"bHeader": true,
"bFooter": true,
"bSelectedOnly": false,
"fnMouseover": null,
"fnMouseout": null,
"fnClick": function( nButton, oConfig, flash ) {
this.fnSetText( flash, this.fnGetTableData(oConfig) );
},
"fnSelect": null,
"fnComplete": function(nButton, oConfig, flash, text) {
var
lines = text.split('\n').length,
len = this.s.dt.nTFoot === null ? lines-1 : lines-2,
plural = (len==1) ? "" : "s";
//alert( 'Copied '+len+' row'+plural+' to the clipboard' );
$( "#dialog-copied" ).dialog({
autoOpen: false,
modal: true,
width: 225,
position: 'center',
buttons: [ {text: "Ok", click: function() { $(this).dialog("close"); } } ]
});
$( ".ui-dialog-title" ).text("Clipboard");
$( ".ui-dialog-content" ).html('Copied '+len+' row'+plural+' to the clipboard');
$( "#dialog-copied" ).dialog("open");
},
"fnInit": null,
"fnCellRender": null
}
[/code]
I commented out the alert, and built a Dialog().
In your main HTML markup, you need an empty div:
[code][/code]
Alter this section in TableTools.js to use UI Dialog
[code]
"copy": {
"sAction": "flash_copy",
"sFieldBoundary": "",
"sFieldSeperator": "\t",
"sNewLine": "auto",
"sToolTip": "",
"sButtonClass": "DTTT_button_copy",
"sButtonClassHover": "DTTT_button_copy_hover",
"sButtonText": "Copy",
"mColumns": "all",
"bHeader": true,
"bFooter": true,
"bSelectedOnly": false,
"fnMouseover": null,
"fnMouseout": null,
"fnClick": function( nButton, oConfig, flash ) {
this.fnSetText( flash, this.fnGetTableData(oConfig) );
},
"fnSelect": null,
"fnComplete": function(nButton, oConfig, flash, text) {
var
lines = text.split('\n').length,
len = this.s.dt.nTFoot === null ? lines-1 : lines-2,
plural = (len==1) ? "" : "s";
//alert( 'Copied '+len+' row'+plural+' to the clipboard' );
$( "#dialog-copied" ).dialog({
autoOpen: false,
modal: true,
width: 225,
position: 'center',
buttons: [ {text: "Ok", click: function() { $(this).dialog("close"); } } ]
});
$( ".ui-dialog-title" ).text("Clipboard");
$( ".ui-dialog-content" ).html('Copied '+len+' row'+plural+' to the clipboard');
$( "#dialog-copied" ).dialog("open");
},
"fnInit": null,
"fnCellRender": null
}
[/code]
I commented out the alert, and built a Dialog().
In your main HTML markup, you need an empty div:
[code][/code]
This discussion has been closed.
Replies
Allan