DataTables

Sid18

I've just used the same Initialisation code and then replaced the .JS path with my local absolute path, Earlier i used the Datatables 1.8 for rest of the featues( displaying row details etc.) , i wanted to check the export option, so i 've downloaded the Tabletools2.1.1 , LAter i've downloaded Datatables1.9.1 and then replaced the ablsolute paths for .JS and .CSS and it still gives me the same message?

allan

@Sid18 - please link to a test case showing the problem.

Allan

Sid18

I didnt get what is needed, but all i did was i just took the code for the below link:
http://datatables.net/extras/tabletools/
and then, just changed the corresponding path to the absolute path of my local machine.

The message i got was the one i pasted above. It was a pop-box and after clicking ok, i just got the empty table displayed with the message as "Loading data from server" only the table top line and thebottom line were displayed.

I hope i am clear this time.

Sid18

Pls ignore the "Loading data from Server" part, i just realised it was a statement as a part of the code.
But i still donot see any of the buttons displayed, though i get the warning and then only the table is displayed - I still donot see any of the buttons nor the links for exporting prupose.

Kindly look and respond.

TIA

Sid18

Sorry for my number of Posts, but i've checked the same in Chrome too and got the same output. Couldnt see the Buttons displayed. And i get the warning message too. My IE version is IE7.

I would like to explore on the Exporting options, Would be great if you can assist/guide me with the above inputs and suggest any other ways/ideas that i can implement to make this work.

Thanks

allan

Perfectly clear - it is not working. But in order to understand why it is not working, I will need a link to the page with the problem. As you can see from my examples pages TableTools does work, so there is something in your server environment which is making it not work I suspect. To understand what that is, I would need to see it.

Allan

Sid18

can i paste the code here? or is there a way i can attach my file?

allan

Try http://live.datatables.net or JSFiddle, but it really would be best if you could just give me a link to your test page showing the problem.

Allan

Sid18

Here is the code attached:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">;
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>DataTables - TableTools</title>

<link rel="stylesheet" type="text/css" href="C:/Documents and Settings/nbkagsd/My Documents/MAS/POC/POC/DataTables-1.9.1/media/css/demo_page.css" />
<link rel="stylesheet" type="text/css" href="C:/Documents and Settings/nbkagsd/My Documents/MAS/POC/POC/DataTables-1.9.1/media/css/demo_table.css" />
<link rel="stylesheet" type="text/css" href="C:/Documents and Settings/nbkagsd/My Documents/MAS/POC/POC/TableTools-2.1.1/TableTools-2.1.1/media/css/TableTools.css" />

<style type="text/css" media="screen">
div.dataTables_wrapper { font-size: 13px; }
table.display thead th, table.display td { font-size: 13px; }
</style>

<script type="text/javascript" language="javascript" src="C:/Documents and Settings/nbkagsd/My Documents/MAS/POC/POC/DataTables-1.9.1/media/js/jquery.js"></script>
<script type="text/javascript" src="C:/Documents and Settings/nbkagsd/My Documents/MAS/POC/POC/TableTools-2.1.1/TableTools-2.1.1/media/js/TableTools.min.js"></script>
<script type="text/javascript" src="C:/Documents and Settings/nbkagsd/My Documents/MAS/POC/POC/TableTools-2.1.1/TableTools-2.1.1/media/js/TableTools.js"></script>
<script type="text/javascript" language="javascript" src="C:/Documents and Settings/nbkagsd/My Documents/MAS/POC/POC/DataTables-1.9.1/media/js/jquery.dataTables.js"></script>

<script type="text/javascript" charset="utf-8">
$(document).ready( function () {
$('#example').dataTable( {
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "C:/Documents and Settings/nbkagsd/My Documents/MAS/POC/POC/TableTools-2.1.1/TableTools-2.1.1/media/swf/copy_csv_xls_pdf.swf"
}
} );
} );
</script>
</head>
<body class="grid_1_2">
<div id="fw_container">

<h3>Example</h3>
<div class="full_width">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" style="width:980px">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="gradeX">
<td>Trident</td>
<td>Internet
Explorer 4.0</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Trident</td>
<td>Internet
Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>Internet
Explorer 5.5</td>
<td>Win 95+</td>
<td class="center">5.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>Internet
Explorer 6</td>
<td>Win 98+</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>Internet Explorer 7</td>
<td>Win XP SP2+</td>
<td class="center">7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>AOL browser (AOL desktop)</td>
<td>Win XP</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 1.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>

</tbody>
</table>
</div>

</div>

</div>

</body>
</html>

Sid18

As you can see with my code, if you try to view this in the Browser, there is a warning first displayed and then the table rows are displayed - but with no Buttons!

Your help is appreciated!

allan

What does the Javascript console say on your browser? Most likely you are getting a script error.

Sid18

the java script error says : fn.DataTable is null or not an object.
i checked the TableTools.min.js and found this line : fn.dataTableExt.fnVersionCheck("2.0.3")

The version seems to be compatiable with the curent DataTable version, but still i get this warning message and finally might be the reason for not displaying of the buttons?

Your suggestions are awaited!

Sid18

any updates please?

Sid18

Actually i see there is a site.css that is also used in the Initialisation code, but that was not provided as a part of the source, and it references the local absolute path as /../media/site.css - do you think this is the one causing this issue? If so, could you pls place the site.css available in the source for us to download and check if the buttons are displayed?

2bb

I have an issue that I have been fighting with off and on for awhile now.

I am able to get Table Tools working when the .swf is hosted locally, but when hosted on a web server I run into the button not working issue.

I have verified the path and file names, tried different web servers as a host, tested other flash files on the web servers (without problems), loaded the file directly in a url and can not find any issues.

I get no 404 errors, and both the js console in Chrome and Fiddler report the file is loaded correctly.

Here is the Data Table and Table Tools code snippets:

//DataTable
$('#example').dataTable({
				
       "aoColumns": [
        null, 
        null, 
        null, 
        null, 
        null, 
        null, 
        { "bVisible":    false },
        { "bVisible":    false },
        { "bVisible":    false },
        { "bVisible":    false },
        { "bVisible":    false },
        { "bVisible":    false },
        { "bVisible":    false }
          ],	
        "bPaginate": false,
        "bLengthChange": false,
        "bFilter": false,
        "bSort": false,
        "bInfo": false,
        "bAutoWidth": false,
        "bJQueryUI": true,
        "sDom": '<"top"i>rt<"bottom"flp>T<"clear">',
        
        
             
        
        "oTableTools": {
			
			"aButtons": [ "copy", "csv", "xls"], 
			"sSwfPath": "http://xxxx/copy_csv_xls.swf"  
                         //"sSwfPath": "C:/swf/copy_csv_xls.swf"  -->This works when swapping the two lines 
						
		}

Not sure what I am missing....anyone have any thoughts?

2bb

@sid18 - You are missing a reference to ZeroClipboard.

Find the file named "ZeroClipboard.js" and add the path to your header.

Sid18

Thank you for looking into my issue @2bb, However i tried to include the reference to ZeroClipBoard.js and i still get the Warning message and the buttons still dont get displayed :(

its been 2 days since working on this and still no clue !

Sid18

can you pls check if my code that i pasted works in any of your browser? and see if the buttons are displayed - this way i wanted to be sure my code is good

2bb

I added the reference to ZeroClipboard.js and everything worked fine in Chrome.

Do you see any javascript errors when using a javascript console (Chrome and Firefox bot have this utility)?

allan

You are running into a security restriction in Flash. In order to prevent dodgy code running locally, you need to explicitly tell it to allow access if you are using file:/// - http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.html

Allan

2bb

Allan - not sure who you were referring to in the above post, but if it was me - the weird thing is I updated Flash security settings and it works locally, but NOT from web servers.

allan

Sorry yes, that was for yourself. Also it would be work making sure you are using the very latest version of TableTools 2.1.2. 2.1.[01] had an issue with non-Webkit browsers...

2bb

Allan - Thanks for responding...

I did find I was on an older version of TableTools (thought I had verified, but clearly had not). Loaded the newest version, and still having the same issues.

Added the server location to the "always trust" list in Adobe Security Settings, just to reduce a variable.

As I mentioned, both the js console and fiddler show the file successfully loading.

Thought it may be the flash file being corrupted when served, but other flash files from the same location work just fine.

What else could I be missing?

Sid18

Well , i added the flash security settings to allow this SWF file from my local system.
However i still get the Warning and the Javascript error shows :the fn.DataTable is null.

I get the warning as TableTools2 works with Datatables 1.9.0 or newer --Am using DataTables version of 1.9.1
I have even added the reference to the ZeroClipboard.js , but still doesnt get the Buttons displayed on my local machine.

Am i missing anything to check?

allan

@Sid18 - can you give us a link please

@2dd - I'm afraid I don't know. I highly doubt the Flash file will be corrupted from the server. If you have a link, perhaps we might be able to see something.

Allan

nbross2215

I have been lurking in this thread for a bit - and am running into some similar issues.

Debug Code - abijez

Issue: Table looks great with datatables, added tableTools so I can export as excel or pdf. Print takes me to print view just fine, however i just get text of buttons rammed together - no flash or buttons at all. Flash is installed on my pc - swf is on server itself and no console errors in chrome or IE (my own web box).

Any ideas?

allan

Can you link us to the page please? My guess is that you might be initialising the table in a hidden element.

Allan

nbross2215

Unfortunately - the data is actually sensitive and on an internal only box - however - code for entire page is here (edited credentials of course)


<?php 

    $site = $_GET['site'];
    if(!$site){exit;}
    
    getcountsbyap($site);

    $testq = pg_query("SELECT equipment.description FROM equipment LEFT JOIN basestation ON equipment.equipid=basestation.equipid WHERE basestation.siteid=$site");

    function getcountsbyap($site){                                                       
        $query = pg_query("SELECT name,address[1] as street FROM customers LEFT JOIN customer_custom_fields ON
            customers.customerid = customer_custom_fields.customerid WHERE  field_id=13 AND 
            substring(value from 1 for 4) = '$site' AND customerstatus[1]='current'")or die(pg_last_error()); 
        echo pg_num_rows($query);
        
        echo "<table cellpadding=0 cellspacing=0 border=0 class=display id=res1><thead><tr><th>Customer Name</th><th>Address</th><th>Site</th></tr></thead><tbody>";  
        while($row=pg_fetch_array($query)){
         echo "<tr><td>".$row['name'].'</td><td>'.$row['street']."</td><td>".$site."</td></tr>";  
        } 
    }
    echo "</tbody></table>"; 
    killconnect($conn);  
?>
                <style type="text/css" title="currentStyle">
            @import "../datatables/media/css/demo_page.css";
            @import "../datatables/media/css/demo_table.css";
        </style>
        <script type="text/javascript" language="javascript" src="../datatables/media/js/jquery.js"></script>
        <script type="text/javascript" language="javascript" src="../datatables/media/js/jquery.dataTables.js"></script>
        <script type="text/javascript" charset="utf-8" src="../datatables/extras/TableTools/media/js/ZeroClipboard.js"></script>
        <script type="text/javascript" charset="utf-8" src="../datatables/extras/TableTools/media/js/TableTools.js"></script>
        
                <script type="text/javascript" charset="utf-8">
  $(document).ready( function () {
    $('#res1').dataTable( {
        "sDom": 'T<"clear">lfrtip',
        "oTableTools": {
            "sSwfPath": "../datatables/extras/TableTools/media/swf/new.swf"
        }
    } );
} );
        </script>

nbross2215

Update - Found out the buttons are on the screen but are empty and on the far left of the page. Text is centered and rammed together "CopyCSVExcelPDFPrint" but in empty space to far left buttons are there (invisible it seems as images are not loaded)

allan

Looks like you need to include the TableTools CSS as well.

Allan

nbross2215

Aha! You are the man. :) Thank you my good sir ( assuming you are a sir) . :) I will keep you updated on any future fun.

allan

assuming you are a sir

Heh - last time I checked, yes :-)

Good to hear that did the business for you.

Allan

MrMark

Is anyone else still seeing IE crash when a user tries to Save as CSV or PDF even AFTER moving the code to a server? I understand that if I make it a 'Trusted Site' in IE settings, it works fine, but I cannot instruct every single user to trust my site. If anyone has seen a solution, please send it my way.

platetone

This might help others. I see this exact same thing in Firefox only when I go to http://localhost:8080 trying to run my app with TableTools. If I go to my local IP address instead it works fine, e.g.: http://192.168.1.1:8080.

There obviously something wrong with Flash player and Firefox when going to localhost (I've seen other stuff on the Internet about this in different situations than Datatables). Pretty damned annoying. I'll try some of the examples above about tweaking security settings.

ntyagi

Hi,
I have issue where i don't see the buttons(export,pdf,print ..) for table with large number of columns. I am using "sScrollX": "100%",
"sScrollXInner": "270%",
"bScrollCollapse": true,

and also in css
#dataTable {
width: 100% !Important;
}

With this the table shows with horizontal scroll bar, but the button does not appear any more.
What can i do to make the button appear just fine, no matter what the width of the table is?
Kindly Help.
Thank You.
Nitish

ntyagi

I should also mention that even the searchbox does not show up, so i am guessing its a jquery error.
I see following message in the console:
1. TypeError: oTable.fnSettings() is null
[Break On This Error]

var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
2.TypeError: a.aoColumns[c] is undefined

Thank You.
Nitish

shammipatne

Is there any way to display only export icon in place of Text on export buttons.

yevheniyc

Hi Everyone!!

Here is what "FINALLY" worked for me:

TableTools.js - version 2.1.3
jquery.dataTables.js - version 1.9.4
Local Server - I used IIS7 [ turned off static and dynamic compression ]
Modify Flash permissions to "Always Allow" [as Allan recommended] at:
http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.html
- also remember to restart your browser [ even erase cache if possible ]

With Simple initiation:
$(document).ready( function () {
$('#example').dataTable( {
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "http://localhost/copy_csv_xls_pdf.swf";
}
} );
} );

Hope it helps.
Cheers,

yev

P.S. Thank you, Allan - awesome work!!

davidliang2008

Mine was not working too even I included the correct swf path. Double check if you have included the TableTools css. Mine works after I add that one in.

bgbbmm

I created an account JUST to post on here. I upgraded datatables and tabletools, and I did not copy out these new .swf files, nor did I realize that the named had changed. It took a lot of time and digging to finally realize what the problem was. It took me stumbling across someone else's post here about the names being different to finally resolve the problem. Make sure the sSwfPath is definitely being set to the correct version which is included in the TableTools download. The name may have changed from a previous version you were using. Check character by character. The new name is "copy_csv_xls_pdf.swf". Update your script to set it correctly!

nate8684

My buttons still aren't working even after following all of the instructions here. Any ideas what could be causing this? I've seen a lot of post on flash security but nothing on how to fix that. Please help!

allan

Link to a test case please...! http://datatables.net/forums/discussion/12899/post-test-cases-when-asking-for-help-please-read

waly0214

Allen,

Great code. Just one question since I cannot seem to find it anywhere. When I go to export to pdf how do I force it to save as a .pdf? Thanks for your help on this issue.

Thanks.

Will

essexsteph

I do this to give a default name with the .pdf extension

"aButtons": [
    "copy",
   {
      "sExtends": "pdf",
      "sFileName": "ppg.pdf"
   },
   "print"
]

Allan explains here http://datatables.net/forums/discussion/4088/saving-to-xls/p1 why you can't force the .pdf in Flash.

Steph

waly0214

Thanks essexsteph

Will

gpcode77

PROBLEM SOLVED:

first: add your http://localhost in the flash permission at:
http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.html

second: use full path in your javascript
example:

"oTableTools": {
"sSwfPath": "http://localhost/webfolder/copy_csv_xls_pdf.swf";
}

janvanrijn

I'm also having problems with implementing table tools. I have a page with multiple tabs (Bootstrap), and in each tab, a DataTable (using TableTools) is shown. On the initial active tab, Tabletools functions are working fine. On all other tabs, tabletabs functions don't work.

<div class="tab-pane active" id="tab-general">
			<table id="datatable_general" class="table table-bordered table-condensed">
				// contents
			</table>
		</div>

		<div class="tab-pane" id="tab-runs">
			<table id="datatable_main" class="table table-bordered table-condensed">
				// content
			</table>
		</div>

In the uppertable, the table tools work, in the other one they don't. When I switch the active class, table tools works for the table at the bottom. When I put the active class at both tables, it works for both (but this messes up the display of the page) and when I totally remove the active class, it doesn't work anymore.

Any ideas?

allan

Very likely you need to use the http://datatables.net/extras/tabletools/api#fnResizeButtons API function when the tab is made visible, since it doesn't have height / width before that point.

Allan

janvanrijn

Hi Allen,

Thank you so much for the quick response! I'm now facing a different problem, maybe you have seen it before:

I have installed the Bootstrap Integration Files, (css and JS) and all seems to work pretty fine. However, when I try to put some of the buttons in a collection, the fnClick action (and others) are not invoked anymore when clicked on the Button. The fnInit function is invoked upon creation.

I looked over the internet to find similar problems, but couldn't find them. Also in the most basic configuration, this problem manifests itself. Whenever I remove the last part of the bootstrap integration js (starting with "if ( $.fn.DataTable.TableTools ) {" on line 115) the problem is solved, however the layout is also back to basic.

//Initialse DataTables, with no sorting on the 'details' column
var oTableRuns = $('#datatable_main').dataTable( {
	"bProcessing": true,
	"bServerSide": true,
	"sAjaxSource": "api_query/table_feed",
	"sServerMethod": "POST",
	"aoColumnDefs": [
		{ "bSortable": false, "aTargets": [ 0 ] },
		{ "bSearchable": false, "bVisible":    false, "aTargets": [ 1, 2 ] },
	],
	"sDom": "<'row-fluid'<'span6'T><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
	"oTableTools": {
		"sSwfPath": "SWF/tableTools/copy_csv_xls_pdf.swf",
		"aButtons": [
			{ // TODO: these buttons don't work anymore. 
				"sExtends":    "collection",
				"sButtonText": "Export&nbsp;<span class='caret' />",
				"aButtons": ["copy","print","csv", "xls", "pdf"],
			},
			{
				"sExtends":    "text",
				"sButtonText": "Toggle Results",
				"fnClick": function toggleResults(nButton,oConfig,oFlash) {
					oTableRunsShowAll = !oTableRunsShowAll;
					oTableRuns.fnDraw(true);
				},
			},
		],
	},
	"aaSorting": [[5, 'desc']],
	"aLengthMenu": [[10, 50, 100, 250], [10, 50, 100, 250]],
	"iDisplayLength" : 50,
	"bAutoWidth": false,
	"bPaginate": true,
});

DataTables

Howdy, Stranger!

Support

Categories

In this Discussion