button customization - more than what it appears is provided?
button customization - more than what it appears is provided?
mihomes
Posts: 150Questions: 19Answers: 0
I am trying to add my current styles to the buttons...and it appears like its not possible. Basically I am trying to replicate the format below for a collection :
[code]
Tools
Copy
Print
Save as CSV
Save as PDF
[/code]
This is the format provided after trying to match above and it appears it's just not possible. I need to be able to add classes to the ul, add data-toggle, etc... for styling to be correct. Is there anything else I can do... is it possible to map the actions of tabletools to handcoded buttons I insert in the thead? Is there another way other than below to customize the buttons as needed?
[code]
// Set the classes that TableTools uses to something suitable for Bootstrap
$.extend( true, $.fn.DataTable.TableTools.classes, {
"container": "btn-group",
"buttons": {
"normal": "btn btn-info",
"disabled": "btn btn-info disabled"
},
"collection": {
"container": "btn btn-info dropdown-toggle pull-right",
"buttons": {
"normal": "",
"disabled": "disabled"
}
}
} );
// Have the collection use a bootstrap compatible dropdown
$.extend( true, $.fn.DataTable.TableTools.DEFAULTS.oTags, {
"collection": {
"container": "ul",
"button": "li",
"liner": "a"
}
} );
[/code]
[code]
Tools
Copy
Save as CSV
Save as PDF
[/code]
This is the format provided after trying to match above and it appears it's just not possible. I need to be able to add classes to the ul, add data-toggle, etc... for styling to be correct. Is there anything else I can do... is it possible to map the actions of tabletools to handcoded buttons I insert in the thead? Is there another way other than below to customize the buttons as needed?
[code]
// Set the classes that TableTools uses to something suitable for Bootstrap
$.extend( true, $.fn.DataTable.TableTools.classes, {
"container": "btn-group",
"buttons": {
"normal": "btn btn-info",
"disabled": "btn btn-info disabled"
},
"collection": {
"container": "btn btn-info dropdown-toggle pull-right",
"buttons": {
"normal": "",
"disabled": "disabled"
}
}
} );
// Have the collection use a bootstrap compatible dropdown
$.extend( true, $.fn.DataTable.TableTools.DEFAULTS.oTags, {
"collection": {
"container": "ul",
"button": "li",
"liner": "a"
}
} );
[/code]
This discussion has been closed.
Replies
Allan
[code]
Tools
[/code]
The actual dropdown ul, li, a are not shown in firebug...
How would I go about injecting elements into the toolbar? I just tried something simple like $( "a #ToolTables_sample_1_0" ).append( 'data-toggle="dropdown"' ); and it failed to insert anything.
I am using the buttons in the format copy, print, save (csv, excel, pdf) same as the bootstrap example here on the site. I am also 'pushing' the buttons to the right of the cell I have inserted them with sdom.
- I need the drop down menu to be right aligned. In other words the right border of the dropdown matches the right border of the save parent button. Hope that makes sense. In its current state the menu runs off the page.
- No matter where I place the above buttons whenever I click the dropdown 'save' the width of the entire site expands both horizontally and vertically by a small amount. Not a huge deal for vertically, but horizontally this causes scrollbars to popup (this should never happen).
- I have lost the modal functionality for copy and print.
- How can I edit the print action? It works for the most part, but my header and sidebar still show... assuming this is because it is a custom site. Where do I manage the actions that occur to fix the removal of those for print view?
2. Odd. I think we'd need to see that in action to know what elements are causing that.
3. Have you included the TableTools CSS? If so, again (sorry) we'd need a test case to know what it isn't working.
4. This is where the print functionality is implemented: https://github.com/DataTables/TableTools/blob/master/media/js/TableTools.js#L1796 . Not sure why it isn't working for you - it goes back up the hierarchy and hide all other elements.
Allan