Twitter bootstrap an DataTables styling and working

Twitter bootstrap an DataTables styling and working

slamslam Posts: 2Questions: 0Answers: 0
edited March 2013 in Plug-ins
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]

Replies

  • slamslam Posts: 2Questions: 0Answers: 0
    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.
  • allanallan Posts: 61,635Questions: 1Answers: 10,092 Site admin
    > 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
  • LaubSaugerLaubSauger Posts: 1Questions: 0Answers: 0
    edited June 2013
    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.
  • apatrickapatrick Posts: 1Questions: 0Answers: 0
    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.
This discussion has been closed.