window resize

jp_noronha

Hi Allan,

I've seen that when tableTools is present and we resize the browser the buttons don't work anymore. I believe is due to positioning and the way you trigger them.
Anyway, theres is also the problem of resizing the table if we use bAutoWidth as true (default).

To solve both situations I made a refresh button.

[code]
TableTools.BUTTONS.refresh = {
"sAction": "text",
"sFieldBoundary": "",
"sFieldSeperator": "\t",
"sNewLine": "",
"sToolTip": "",
"sButtonClass": "DTTT_button_refresh",
"sButtonClassHover": "DTTT_button_refresh_hover",
"sButtonText": "Refresh",
"mColumns": "all",
"bHeader": true,
"bFooter": true,
"fnMouseover": null,
"fnMouseout": null,
"fnClick": function(nButton, oConfig) { this.s.dt.oInstance.fnAdjustColumnSizing(); this.fnResizeButtons(); },
"fnSelect": null,
"fnComplete": null,
"fnInit": null
};

/*
* Example initialisation
*/
$(document).ready( function () {
$('#example').dataTable( {
"sDom": 'T<"clear">lfrtip',
"oTableTools": { "aButtons": [ { "sExtends": "refresh"} ]
}
} );
} );
[/code]

jp_noronha

Back again to my refresh maintenance.
Due to the way TableTools uses to process the click event, when a browser is resized their event still points to is last position, because of that i could use my first solution to refresh colunms and tabletool buttons.

I come out with another solution, using colvis.js as a prototype i buid VRefresh that puts a new button, independent of others to refresh all the above. Also to make sure it will work all the time i made to appear at the left side of datatable.

If anyone needs it just mail me. can put all the code because is too big.

allan

Interesting one this - does it happen for you in the example here: http://datatables.net/extras/tabletools/ ? The Flash components should be positioned relative to the buttons themselves (if you look at the DOM they are children of the DIV containers for the buttons), so they should move around as the buttons do.

Allan

jp_noronha

Indeed they seem and work ok in your example.
Maybe the problem is a litle deeper than i thought (usually is). when i debug it, in IE, i saw that there was an action (click) and a live event glued in the buttons, but they seem to point to diferent positions. I assume it was all due to resize.

Several points:
all processing is client-side
testing browser IE 9.0
Development .Net 3.5 with MSSQL, using master pages/content
all datable js is injected and build behind code inside a class created for it, with a gridview as baseclass

this is the one code created:
[code]
var oDataTable = $('#ctl00_ContentPlaceHolder1_GridEstUnidades').dataTable({
"bJQueryUI": false
, "bSortClasses ": false
, "bDeferRender": true
, "iDeferLoading": 100
, "bProcessing": true
, "aaSorting": []
, "bScrollCollapse": true
, "sScrollX": "100%"
, "sScrollY": "500px"
, "oLanguage": {
"sProcessing": "Processando...",
"sLengthMenu": "Mostrar _MENU_ registros",
"sEmptyTable ": "Não foram encontrados resultados",
"sZeroRecords": "Não foram encontrados resultados",
"sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
"sInfoEmpty": "Mostrando de 0 até 0 de 0 registros",
"sInfoFiltered": "(filtrado de _MAX_ registros no total)",
"sInfoPostFix": "",
"sInfoThousands": ".",
"sSearch": "Buscar:",
"sUrl": "",
"oPaginate": {
"sFirst": "",
"sPrevious": "",
"sNext": "",
"sLast": ""
}
}
, "aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 12,13,14 ] }
, { "sWidth": "0px", "aTargets": [ 12,13,14 ] },
{ "bVisible": false, "aTargets": [ 12,13,14 ] }
, { "bSearchable": false, "aTargets": [ 12,13,14 ] }

]
, "bStateSave": true
, "iCookieDuration": 60*60*12
, "sPaginationType": "listbox", "aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "Todos"]]
, "sDom": 'RCTV<"clear">lfrtipP'
, "oColVis": { "buttonText": "Colunas", "bRestore": true, "sRestore": "Restaurar", "sAlign": "right", "activate": "mouseover"
, "aiExclude": [ 12,13,14 ] }
, "oTableTools": {
"sSwfPath": "../scripts/jquery/js/../swf/copy_cvs_xls_pdf.swf",
"aButtons": [
{ "sExtends": "print", "sButtonText": "Impressão", "mColumns": "visible", "sToolTip": "Impressão",
"sMessage": "",
"sInfo": "ImpressaoPor favor utilizar a funcionalidade de impressão do browser para imprimir esta tabela. Pressione ESC (escape) quando terminar." }
, { "sExtends": "copy", "sButtonText": "Clipboard", "mColumns": "visible" },
{ "sExtends": "csv", "sButtonText": "CSV", "mColumns": "visible", "bFooter": false , "bHeader": false },
{ "sExtends": "xls", "sButtonText": "XLS", "mColumns": "visible", "sTitle": "" },
{ "sExtends": "pdf", "sButtonText": "PDF", "mColumns": "visible", "sNewLine": "auto", "sTitle": "" }
]}
}).columnFilter();
oDataTable.fnSearchHighlighting();
[/code]

jp_noronha

Hi allan,

i found the problem. try the example again with

[code]$(document).ready( function () {
$('#example').dataTable( {
"sDom": 'T<"clear">lfrtip'
, "oTableTools": {
"sSwfPath": "../scripts/jquery/js/../swf/copy_cvs_xls_pdf.swf",
"aButtons": [
{ "sExtends": "print", "sButtonText": "Impressão", "mColumns": "visible", "sToolTip": "Impressão",
"sMessage": "",
"sInfo": "ImpressaoPor favor utilizar a funcionalidade de impressão do browser para imprimir esta tabela. Pressione ESC (escape) quando terminar." }
, { "sExtends": "copy", "sButtonText": "Clipboard", "mColumns": "visible" },
{ "sExtends": "csv", "sButtonText": "CSV", "mColumns": "visible", "bFooter": false , "bHeader": false },
{ "sExtends": "xls", "sButtonText": "XLS", "mColumns": "visible", "sTitle": "" },
{ "sExtends": "pdf", "sButtonText": "PDF", "mColumns": "visible", "sNewLine": "auto", "sTitle": "" }
]}
} );
} );
[/code]

I had to use sExtends because is the decision of the developer if the buttons are present or not

sorry about all the confusion

allan

Thanks for the code - I've just tried that in Firefox and Chrome (I'm on a Mac atm so no IE access) and that still seems to work okay. Is it only IE that is showing this problem?

Allan