TableTools Button Collection not working

ajaxboy

I am trying to do a custom toolbar, I am using bootstrap 3, and DataTools 2.1.4 I implemented this into my code: http://datatables.net/release-datatables/extras/TableTools/index.html

The buttons show up fine and everything, the button collection in the other hand, show off position. Like in the middle of the screen, and when I looked at the html/source, the dom position of the collection is way down the page html tree. I did the exact same custom toolbar already built with bootstrap on the same page (without datatables) and display just fine. I digged into just about all the settings I could find, but doesn't seem like the position is getting fixed at all, and also the formatting is bigger on the collection (because I am using boostrap class btn-xs.



Please any advice? thanks

This is code I been experimenting with:

[code]
$.extend(true, $.fn.DataTable.TableTools.classes, {
"container" : "btn-group btn-group-xs",
"buttons" : {
"normal" : "btn btn-default btn-xs",
"disabled" : "disabled"
},
"collection" : {
"container" : "DTTT_dropdown dropdown-menu dropdown-toggle",
"buttons" : {
"normal" : "",
"disabled" : "disabled"
}
},
"select" : {
"row" : "active"
}
});

$.extend( true, $.fn.DataTable.TableTools.DEFAULTS.oTags, {
"collection": {
"container": "ul",
"button": "li",
"liner": "a"
}});

//Action Buttons
TableTools.BUTTONS.edit = $.extend( false, TableTools.buttonBase, {
"sButtonText": "Edit",
"fnClick": function( nButton, oConfig ) {
console.log(nButton, this.fnGetTableData(oConfig));
}
} );

TableTools.BUTTONS.duplicate = $.extend( false, TableTools.buttonBase, {
"sButtonText": "Duplicate",
"fnClick": function( nButton, oConfig ) {
//clicked Dupplicate
console.log(this.fnGetTableData(oConfig));
}
} );

TableTools.BUTTONS.delete = $.extend( false, TableTools.buttonBase, {
"sButtonText": "Delete",
"fnClick": function( nButton, oConfig ) {
console.log(this.fnGetTableData(oConfig));
}
} );


TableTools.BUTTONS.add = $.extend( false, TableTools.buttonBase, {
"sButtonText": "Add",
"fnClick": function( nButton, oConfig ) {
console.log(this.fnGetTableData(oConfig));
}
} );

TableTools.BUTTONS.import = $.extend( true, TableTools.buttonBase, {
"sButtonText": "Import",
"fnClick": function( nButton, oConfig ) {
console.log(this.fnGetTableData(oConfig));
}
} );

TableTools.BUTTONS.export = $.extend( true, TableTools.buttonBase, {
"sButtonText": "Export",
"fnClick": function( nButton, oConfig ) {
console.log(this.fnGetTableData(oConfig));
}
} );


var oTable = $('#table1').dataTable( {
//"sDom": "<'row'<'toolbar'>L<'search'f>r> t <'row'<'col-xs-6'i><'col-xs-6'lp>>",
"sDom": "<'row-fluid'<'span6'T><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"aoColumnDefs": [ { "bSortable": false, "aTargets": [ 0 ] } ],
"oTableTools": {
"aButtons": [
{
"sExtends": "collection",
"sButtonText": 'Action ',
"aButtons": [ "edit", "duplicate", "delete" ],
sButtonClass: "btn btn-default btn-xs dropdown-toggle"

},
{
"sExtends": "add",
"sButtonText": "Add",
"sButtonClass": "btn-group btn-group-xs"

},{
"sExtends": "import",
"sButtonText": "Import",
"sButtonClass": "btn-group btn-group-xs"
},{
"sExtends": "export",
"sButtonText": "Export",
"sButtonClass": "btn-group btn-group-xs"
},
]
}[/code]

ajaxboy

The link is actually: http://datatables.net/release-datatables/extras/TableTools/bootstrap.html

ajaxboy

Found issue, it appears that having this on the page:

[code]
body {
margin-left: 200px;
margin-top: 50px;
padding: 10px;
}
[/code]
screws up the menu collections, and these properties are inherited..

allan

Thanks for posting back your solution. Good to hear you've got it figured out :-)

Allan