Can't seem to get TableTools buttons right.
Can't seem to get TableTools buttons right.
MrBaseball34
Posts: 96Questions: 0Answers: 0
I'm trying to add two buttons to my table.
One is going to be used to initiate the search and the other is going to be to clear the search.
I am using server-side processing, too.
In all the examples, I see this:
[code]
"sDom": 'T<"clear">lfrtip',
[/code]
But if I put it in also, I lose UI styling.
What am I doing wrong here?
[code]
var dontSort = [];
$('#userInvtable thead th').each( function () {
if ( $(this).hasClass( 'no_sort' )) {
dontSort.push( { "bSortable": false } );
} else {
dontSort.push( null );
}
} );
oUserTable = $('#userInvtable').dataTable({
"aoColumns": dontSort,
"aaSortingFixed": [[1,'asc']],
"bStateSave": true,
"bSortClasses": false,
"sPaginationType": "full_numbers",
"iDisplayLength": 50,
"bJQueryUI": true,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "datatable.php",
"aoColumnDefs": [{ "sClass": "center", "aTargets": [ 0 ] }],
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
$('td:eq(0)', nRow).html('');
return nRow;
},
"oTableTools": {"aButtons": [{"sExtends": "text",
"sButtonText": "Search",
"fnClick": function ( nButton, oConfig, oFlash ) {
alert( 'Mouse click' ); // will be changed to submit search
}
},
{"sExtends": "text",
"sButtonText": "Clear Search",
"fnClick": function ( nButton, oConfig, oFlash ) {
alert( 'Mouse click2' ); // will be changed to clear search
}
}
]
}
});
[/code]
One is going to be used to initiate the search and the other is going to be to clear the search.
I am using server-side processing, too.
In all the examples, I see this:
[code]
"sDom": 'T<"clear">lfrtip',
[/code]
But if I put it in also, I lose UI styling.
What am I doing wrong here?
[code]
var dontSort = [];
$('#userInvtable thead th').each( function () {
if ( $(this).hasClass( 'no_sort' )) {
dontSort.push( { "bSortable": false } );
} else {
dontSort.push( null );
}
} );
oUserTable = $('#userInvtable').dataTable({
"aoColumns": dontSort,
"aaSortingFixed": [[1,'asc']],
"bStateSave": true,
"bSortClasses": false,
"sPaginationType": "full_numbers",
"iDisplayLength": 50,
"bJQueryUI": true,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "datatable.php",
"aoColumnDefs": [{ "sClass": "center", "aTargets": [ 0 ] }],
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
$('td:eq(0)', nRow).html('');
return nRow;
},
"oTableTools": {"aButtons": [{"sExtends": "text",
"sButtonText": "Search",
"fnClick": function ( nButton, oConfig, oFlash ) {
alert( 'Mouse click' ); // will be changed to submit search
}
},
{"sExtends": "text",
"sButtonText": "Clear Search",
"fnClick": function ( nButton, oConfig, oFlash ) {
alert( 'Mouse click2' ); // will be changed to clear search
}
}
]
}
});
[/code]
This discussion has been closed.
Replies
Did you try adding the sDom parameter to Datatables
this to tell datatables to draw the TableTools plug-in
something like "sDom": '<"H"lfr>t<"F"ip>' if you use JQUERYUI or
find more info here http://datatables.net/usage/options#sDom
and here TableTools specific: http://datatables.net/extras/tabletools/initialisation
[code]
"sDom": '<"H"lTfr>t<"F"ip>'
[/code]
EXCEPT, that the buttons are entirely too big and I need them to be above the filter area.
Do I use CSS styling to fix that?
and is therefor not generating classes for the ui
[code]
<"H"lfr>t<"F"ip> (when bJQueryUI is true)
[/code]
I just added the 'T' before the 'f'
download the one here http://datatables.net/release-datatables/extras/TableTools/media/js/TableTools.js
thats the one the example used and works for me
I downloaded the full package and it comes with the old plugin
now downloaded http://datatables.net/releases/TableTools-2.0.0.zip
my issues are solved im happy with my jqueryui drawing style :)
Happy DataTabling :)