button customization - more than what it appears is provided?

mihomes

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]

allan

The drop down looks like it should be possible - is that bit working at least? Can you link us to the page please? But you would need to inject elements into the TableTools toolbar after it has initialised if you want the first part. TableTools assumes that all buttons will basically have the same structure.

Allan

mihomes

As this is local and not published I cannot. This would be the only button, tools, with the copy, print, etc in its dropdown. Since there would be no other button I am not concerned about that part. I just can't replicate the above.

mihomes

Here is the html that is being produced :

[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.

mihomes

I managed to get this 'somewhat' working... now I have a few other issues/questions.

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?

allan

1. There isn't a built in way of doing that - but this is where the code can be modified for that: https://github.com/DataTables/TableTools/blob/master/media/js/TableTools.js#L941 .

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