Twitter bootstrap an DataTables styling and working

slam

Hi, there!
I using Twitter bootstrap and DataTables together. Also I used next plugins: TableTools, FixedHeader, ColReorder, ColVis and include them in the same order. I read the post about integration bootstrap (http://www.datatables.net/blog/Twitter_Bootstrap_2). But I have 3 problems.
1). When I click a «Save» button from TableTools dropdown showing but not available. When I trying click on any menu item, dropdown menu hide. Look at this at screenshot (https://dl.dropbox.com/u/27212436/tabletools-dropdown.png).

2). ColVis button is not styling as another buttons. Look at this at screenshot (https://dl.dropbox.com/u/27212436/ColVis-button.png).
3). FixedHeader not work. Look at this at screenshot (https://dl.dropbox.com/u/27212436/menu.png).

Piece of header:
[code]

…
<!-- DataTables plugin TableTools -->




<!-- DataTables plugin FixedHeader -->


<!-- DataTables plugin ColReorder -->


<!-- DataTables plugin ColVis -->



<!-- DataTables Bootstrap integration -->


…

[/code]

slam

I found solution for the 1-st question. I just commet or reaplace link for TableTools.css.
[code]<!-- -->[/code]

And solution for 3-d question for me is setting offsetTop option.
[code]new FixedHeader( oTable, {"offsetTop": 40} );[/code]

Second question is steel open.

allan

> 2). ColVis button is not styling as another buttons

I haven't done an integration with Bootstrap for ColVis yet actually. That's why it isn't working out of the box. A pull request on the bootstrap integration files would be very welcome if you do make the changes needed :-)

Allan

LaubSauger

Even though this question is a few months old, i'll add a quick and easy solution to your second question:

in ColVis.js line 338:

change
[code]
this.dom.button.className += " ColVis_MasterButton";
[/code]
to
[code]
this.dom.button.className += " ColVis_MasterButton btn btn-small";
[/code]

btn is the bootstrap class for buttons, btn-small is just another class to change the size of the button (you can omit this).

To prevent the button from inheriting the margins etc from colvis.css you have to remove the class "ColVis_Button" from "_fnDomBaseButton" in ColVis.js line 789:

change
[code]
nButton.className = !this.s.dt.bJUI ? "ColVis_Button TableTools_Button" :
[/code]
to
[code]
nButton.className = !this.s.dt.bJUI ? "TableTools_Button" :
[/code]

The columnchooser-dropdown itself needs a bit more work though.

apatrick

This is a top Google result for question 2) so I post my solution here. I used this way to give the column visibility button bootstrap styling without changing the ColVis.js code.

[code]$(".ColVis_MasterButton").addClass("btn");[/code]

Do it after the button is in the DOM and has the referenced class. This will give all datatables on the bootstrap styling for the hide/show columns button.