Altering TableTools Copy to use JQuery UI Dialog

Altering TableTools Copy to use JQuery UI Dialog

Taylor514ceTaylor514ce Posts: 74Questions: 8Answers: 0
edited June 2012 in General
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]

Replies

  • allanallan Posts: 63,542Questions: 1Answers: 10,476 Site admin
    Nice one! Thanks very much for sharing that with us :-)

    Allan
This discussion has been closed.