[SOLVED]Any example of multi tables NOT!! in tabs, but in hidden divs IE: 3 hdn divs each have table

tny1234

Hi all the examples i have found refer to ui Tabs, i dont use the Jquery themes i use Bootstrap, and have a page with 4 buttons which toggle 4 divs, each containing a table with tabletools.. Like most everyone else i only get the first button rows to work..

Is there an example for me who does not use the Tabs options?

thanks in advance

allan

You just need to apply exactly the same principles as if using jQuery UI tabs or any other tabs library. The buttons are hidden on initialisation, so when they are made visible you need to call the fnResizeButtons method: http://datatables.net/extras/tabletools/api#fnResizeButtons . Presumably there is a 'show' event or something from the table you are using which you can listen for.

Allan

tny1234

thanks for the responce.. Allan.
I am just a bit confused as to ho to apply the fnResizeButtons when i dont use tabs.. I get how its supposed to bennefit me, but not sure where how to write it..

I made a custom function to initialise the datatable's and datatools: as seen bellow:
How can i squeeze the fix in this?


[code]
here is the function:

function get_tables_forpage(tbnames){
var oTable = jQuery('#'+tbnames).dataTable({
"bJQueryUI": false,
"bStateSave": true,
"sPaginationType": "full_numbers",
"sDom": '<"H"lTfr>t<"F"ip>',
"oTableTools": {
"sSwfPath": "../swf/copy_cvs_xls_pdf.swf",
"aButtons": [
"copy",
{
"sExtends": "csv",
"sCharSet": "utf8"
},
{
"sExtends": "xls",
"sCharSet": "utf16le"
},
{
"sExtends": "pdf",
"sCharSet": "utf8",
"sPdfOrientation": "landscape",
"sTitle": "{PAGETITLE}"
},
"print"
]
}
} );
}

i initialise it from a document.ready function like so:



jQuery(document).ready( function(){
get_tables_forpage('tbl_1');
get_tables_forpage('tbl_2');
get_tables_forpage('tbl_3');
get_tables_forpage('tbl_4');
});


My html tables are as so:
The sh_1 id and class is just for a click function to show the div/table.. there is no styling attached to it other then the display:none for hiddenDiv for showDiv i have a blank..






Image........

[/code]

I really like this plugin i would like to get it to work for me in this function above..

Thanks for the reply

allan

How do you make the tables visible? You say you toggle a div to be visible - so when you toggle it (i.e. it is visible) that's when you would call the resize method.

Allan

tny1234

Thanks Allan,
I just dont understand how to write the resize function and where to put it.. this is my problem, i already have too many tabs on my site and i use Bootstrap not Jquery.. So as far as the example for the resize method goes, im ho0pelessly lost..

could you please give a sample of what it should look like ?
Regards
and thanks for your patience

allan

So the first port of call is to find out what event Bootstrap fires when the tables are made visible. Then find out how to bind to that event. Then bind a function that will fire the method needed.

I'll try to make some time during the week to put up and example, but I'm somewhat rushed off my feet at the moment.

Allan

tny1234

I solved it Allan..
My way seems far better then the examples i found and read..

ill exalpain it here..

as my code is above, all i did was shift and change this part:
[code]

jQuery(document).ready( function(){
get_tables_forpage('tbl_1');
get_tables_forpage('tbl_2');
get_tables_forpage('tbl_3');
get_tables_forpage('tbl_4');
});


here i removed all the get_tables_forpage(xx)
accept the tbl_1 as this one is fired when page loads and is the first to be viewd, so i left it..

I then added a type toggle function attached the the class .showme this is just a standard type button toggle function..


here is the code:

this is my calling script whether i have one or ten tbles on a page//
//here the '_shdv' is just a prefix for the div id as all ids must be unique..
jQuery(document).ready(function() {
jQuery('.showme').live('click', function(){
var target = jQuery(this).attr("id");
showContId(target,'_shdv');
});
});


/*
just to fix the example above here the div id should be something like "targetsid"+_shdv so in this case sh_1 would be the .showme id and the prfix would be _shdv

////bad example but im just going with it..



*/

var lstCont = "";
function showContId(contName, prfix) {
var tbdvid =contName+prfix;
if (lstCont) {
jQuery("div#"+lstCont).attr('class',"hiddenDiv");
}
if (contName+prfix) {
jQuery("#"+tbdvid).attr('class',"visibleDiv");
var tbltgt = jQuery("#"+tbdvid+">table").attr('id');
lstCont= contName+prfix;
get_tables_forpage(tbltgt); here the datatables are fired. .
}
}

[/code]
It seems better then ajax like i read up on, and also better then having multiple table calling scripts on the same page that i also read up on.. and would work with tabs or hidden divs like in my case and also any templates IE: bootstrap, jquiry, etc etc ..

Let me know if you can tweak it or if you think its good like it is... All I know is it works for me :D

Thanks Again Allan for you input you gave me many clues.. TA!!








... [/code]