TableTools

liliniu

Hi,
I am trying to apply the TableTools plug-ins in my code. However once I put ' "sDom": 'T<"clear">lfrtip' ' into the script, it doesn't work and disables the dataTable function. I am using the 1.5 version.
Does anyone has some experience on this? Thanks a lot!

Here is my code:


$(document).ready(function() {
// Call dataTable function
$('#plate_table').dataTable({
"sDom": 'T<"clear">lfrtip',
"aaSorting":[[0,"asc"]],
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bAutoWidth": false,
});
});

allan

Hi liliniu,

Are you getting a Javascript error at all (in Firebug etc)? That would help indicate what is happening. Also, if you could provide a link that would be most useful in debugging the problem. Beyond that, I'd suggest just making sure that your code lines up with the TableTools example: http://datatables.net/1.5-beta/extras/TableTools/

Regards,
Allan

liliniu

Hi Allan,
Thanks for your reply. I didn't get any javascript error. I did use the code in the example.
I am still debugging it now. Thanks again!

Lili

jimdgar

Hi,

Was the problem ever resolved? I am seeing the same problem. DataTables works great but once I add 'T' to the sDom to enable TableTools, then the DataTables functionality stops. There are no Javascript errors.

allan

Can you link us to your page please? Are you seeing any errors in your server error log?

Allan

jimdgar

Allan,

I've created a test case which duplicates the problem. It's posted here:
http://thehrmanager.com/dataTables/php/works.php
http://thehrmanager.com/dataTables/php/fails.php

I can also zip up the test case if needed.

I'm pretty sure I have issues with my js code as I occasionally see other features drop off when I change the code. I'm just not adept enough with js to track it down. Here's the difference between works/fails.



<!-- *********** Data Tables & TableTools -->






var asInitVals = new Array();
$(document).ready(function() {
var oTable = $('#apps_table').dataTable( {
"aaSorting": [[ 1, "asc" ]],
"aLengthMenu": [[10, 25, -1], [10, 25, "All"]],
"bStateSave": true,
"bAutoWidth": false,
"oLanguage": {
"sSearch": "Search all columns:"
},
"fnInitComplete": function() {
var oSettings = this.fnSettings();
for ( var i=0 ; i0) {
$("thead input")[i].value = oSettings.aoPreSearchCols[i].sSearch;
$("thead input")[i].className = "";
}
}
},
"sDom": '<"topl"f><"topr"p>rt<"bottoml"i><"bottomr"l><"clear">'
<!-- "sDom": 'T<"clear"><"topl"f><"topr"p>rt<"bottoml"i><"bottomr"l><"clear">'-->
} );

$("thead input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("thead input").index(this) );
} );

/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes in
* the footer
*/

$("thead input").each( function (i) {
asInitVals[i] = this.value;
} );

$("thead input").focus( function () {
if ( this.className == "search_init" ) {
this.className = "";
this.value = "";
}
} );


$("thead input").blur( function (i) {
if ( this.value == "" ) {
this.className = "search_init";
this.value = asInitVals[$("thead input").index(this)];
}
} );
} );




Thanks for all your help,
-Jim

allan

There is a 404 error on your 'fails.php' page:

ZeroClipboard.js Failed to load resource: the server responded with a status of 404 (Not Found)
TableTools.js: 95 ReferenceError: Can't find variable: ZeroClipboard

That would do it... You should see this error in your server error log. You just need to include the ZeroClipboard.js file. It is automatically included as part of the minified file if you prefer to use that.

Allan

jimdgar

Allan,

I was sure I had ZeroClipboard.js included in my real application but obviously I did overlook it.

All working now, thank you very much,
-Jim