Can You Use Both TableTools and ColVis and ColReorder? They work fine on their own, but not together

rendrakobin

Hello Everyone,

Has anyone successfully combined the functionality of sorting records by column along with the TableTools (copy, print, CSV, Excel, PDF)?

Both work fine on their own but when I try to combine them, functionality it lost.

Can someone post example code so I can see how to write the initialization?

Not sure where to begin.

Thanks,
Rob

allan

You should be able to. Try using the nightly version from the downloads page ( http://datatables.net/download ) if the current release versions are working.

If they still aren't working - please link to a test case showing the problem so we can advise and debug if needed.

Allan

rendrakobin

http://debug.datatables.net/ixoxog

allan

It doesn't look like you've enabled ColVis or ColReorder there. Add the `C` and `R` options into your sDom .

Allan

rendrakobin

Sorry Allan, still not sure what I am doing wrong. It is probably something very simple, but I don't see it.

[code]







$(document).ready(function() {
$('#example').dataTable( {
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "../_assets/copy_csv_xls_pdf.swf"
var oTable;

/* Add the events etc before DataTables hides a column */
$("thead input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, oTable.oApi._fnVisibleToColumnIndex(
oTable.fnSettings(), $("thead input").index(this) ) );
} );

/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes
*/
$("thead input").each( function (i) {
this.initVal = 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 = this.initVal;
}
} );

oTable = $('#example').dataTable( {
"sDom": 'RC<"clear">lfrtip',
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [ 2 ] }
],
"oLanguage": {
"sSearch": "Search all columns:"
},
"bSortCellsTop": true
}
} );
} );

[/code]

allan

You can't initialise the same table two different ways. Just use sDom like this:

[code]
'RCT<"clear">lfrtip'
[/code]

i.e. add the `R` and the `C` options in. As the sDom documentation notes, each letter in sDom is a feature. In this case `R` is the reorder plugin and `C` is ColVis. So if you want them, you need to use them :-)

Allan

rendrakobin

Hi Allan, You're a legend, thanks for all your help. I made the changes to the [code]"sDOM"[/code}

But, it is still not functioning. Any ideas? I changed the file structure to match the examples for the swf path in case that was an issue, and that hasn't resolved it.

If you are too busy, maybe someone else out there has a suggestion?

[code]








$(document).ready(function() {
"oTableTools": {
"sSwfPath": "media/swf/copy_csv_xls_pdf.swf"
var oTable;

/* Add the events etc before DataTables hides a column */
$("thead input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, oTable.oApi._fnVisibleToColumnIndex(
oTable.fnSettings(), $("thead input").index(this) ) );
} );

/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes
*/
$("thead input").each( function (i) {
this.initVal = 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 = this.initVal;
}
} );

oTable = $('#example').dataTable( {
"sDom": 'RCT<"clear">lfrtip',
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [ 2 ] }
],
"oLanguage": {
"sSearch": "Search all columns:"
},
"bSortCellsTop": true
} );
} );

[/code]

Thanks!!
ROB