DataTables logo DataTables

via Ad Packs
window resize
  • 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.

    TableTools.BUTTONS.refresh = {
        "sAction": "text",
        "sFieldBoundary": "",
        "sFieldSeperator": "\t",
        "sNewLine": "<BR>",
        "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"}  ]		
    		}
    	} );
    } );
    
  • 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.
  • allanallan
    Posts: 15,513
    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
  • 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:
    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": "<h6>Impressao</h6><p>Por 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();
    
  • Hi allan,

    i found the problem. try the example again with

    $(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": "<h6>Impressao</h6><p>Por 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": "" }
    ]}
    				} );
    			} );
    

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

    sorry about all the confusion
  • allanallan
    Posts: 15,513
    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
This discussion has been closed.
← All Discussions

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Support

Get useful and friendly help straight from the source.

In this Discussion