Twitter Bootstrap

Twitter Bootstrap

allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
edited December 2011 in Blog
Styling DataTables is one area that I often think I overlook a little bit in favour of further Javascript development. So I've explored integration with the Twitter Bootstrap library to create stylish tables that integrate beautifully with the rest of a site that is using Bootstrap in a blog post: http://datatables.net/blog/Twitter_Bootstrap .

Integrating with Bootstrap is quite easy as you will see in the blog post (standalone example here: http://datatables.net/media/blog/bootstrap/ ).

If you have done any stylings of DataTables yourself, I'd love to see them - feel free to post away :-)

Regards,
Allan
«134

Replies

  • rapier7rapier7 Posts: 2Questions: 0Answers: 0
    I'm getting some functionality bugs with the pagination control when I implemented this in my own web application. For example, in my table, if you click next, the numbers between the previous and next disappear. Do you have any insight on how this might happen?
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    There might be an error in my pagination logic. Can you link me to your page so I can see the problem in action please?

    Allan
  • ge3kusage3kusa Posts: 1Questions: 0Answers: 0
    edited December 2011
    @rapier7 I had some difficulty with the numbers between the previous and next buttons too and it took a while but I figured it out. @allan if this particular plugin was on github (maybe it is, I couldn't find it) I'd fork and update if you wanted.

    Anyway, assuming the problem is the same, the solution came within the section of code that does this:

    .insertBefore('li:last', an[j])

    Turns out I have other unordered lists on my page and that selector was grabbing the very last li element on the entire page, in my case, in the footer, and inserting 12345 down there.

    Something like this would work:

    .insertBefore('.pagination li:last', an[j])

    Where you are more specifically targeting the last li element within the pagination div.

    If you have more than one table the fix would be more complicated, probably utilizing the nPaging object.

    Hopefully this solves it for you.
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Hi,

    Thanks for spotting this and giving me the heads up. This error was actually spotted a couple of days ago and the code has been updated now. There were one or two other little issues, so it would probably be worth pulling the latest code from the blog page. Sorry about that!

    Regards,
    Allan
  • opayenopayen Posts: 1Questions: 0Answers: 0
    Just wanted to thank you for this blog post, it works perfectly well here.
  • eltimneltimn Posts: 1Questions: 0Answers: 0
    Just wanted to say thanks, also. Everything is working well. Saved me a bunch of time.
  • marfalkovmarfalkov Posts: 1Questions: 0Answers: 0
    Hi,
    It would be nice to have the original two_button (default) and full_numbers options on pagination.
    Maybe with the sPaginationType's original behavior and a new sPaginationStyle="bootstrap" ?

    There is also a jQueryUI bootstrap theme: https://github.com/addyosmani/jquery-ui-bootstrap
    (early stage, but works for me with datatables)

    Thank You for the bootstrap styling!
  • irineujunioririneujunior Posts: 1Questions: 0Answers: 0
    Nice job on Twitter Bootstap.
    When we search for something that results 0 records (http://datatables.net/media/blog/bootstrap/) the "next" button dont get disable class.
    To fix this, replace
    [code]if ( oPaging.iPage === oPaging.iTotalPages-1 ) {[/code]
    for this
    [code]if (( oPaging.iPage === oPaging.iTotalPages-1 ) || ( iEnd === 0)) {[/code]

    =)
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Good call - thanks for the heads up on that :-). Now fixed.

    Allan
  • DiegoDiego Posts: 3Questions: 0Answers: 0
    Hi Allan, thanks for the modification, Datatable + Bootstrap is awesome.

    There is just one thing that I'm trying to figure out.
    The numbers, doesn't appear when you place another pagination on the top.
    http://imageshack.us/photo/my-images/705/pagination.png/

    I'll still try to fix (after I learn datatables properly :p)
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    I suspect that that issue is the same as this one: https://github.com/DataTables/DataTables/issues/42 , or at least related. I'll have a look at it as soon as possible!

    Allan
  • DiegoDiego Posts: 3Questions: 0Answers: 0
    edited January 2012
    Thanks for the fast reply Allan,
    I thing I fixed it (at least it's working for me)
    http://dl.dropbox.com/u/6460642/paging.js

    With First and Last links
    http://dl.dropbox.com/u/6460642/paging-first-last.js
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    All fixed now: https://github.com/DataTables/DataTables/issues/42 :-)

    Allan
  • DarkWhiteChocolateDarkWhiteChocolate Posts: 2Questions: 0Answers: 0
    edited January 2012
    The grid css (colors & all) don't show up at all in Bootstrap 2.0 (pre-release of course). The pagination comes up but the grid itself doesn't add any css. 2.0 should be getting released in about a day.
  • DarkWhiteChocolateDarkWhiteChocolate Posts: 2Questions: 0Answers: 0
    Looks like the table class needs to first be changed to: "table table-bordered table-striped"
    This doesn't solve the sorting though but the table shows up.
    I'm using dataTables within a modal. Just switched over from Colorbox to Bootstrap.
    Much cleaner looking solution.
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    I've just posted a new article about how Bootstrap 2 might be integrated with DataTables: http://datatables.net/blog/Twitter_Bootstrap_2 .

    As you've seen most of the changes are trivial - the only "complex" one is the sorting since Bootstrap doesn't have its own sorting classes now, so we just add suitable styles to the DataTables default classes.

    Regards,
    Allan
  • rfitzwaterrfitzwater Posts: 57Questions: 5Answers: 1
    [quote]allan said: 've just posted a new article about how Bootstrap 2 might be integrated with DataTables: http://datatables.net/blog/Twitter_Bootstrap_2 .
    [/quote]

    Allan - Could you add TableTools (Print, PDF, Excel) to your bootstrap demo to see if you have any issues. See my thread here for the problems I am having: http://datatables.net/forums/discussion/8382/tabletools-2.0.2-wbootstrap-interface-problems#Item_1
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    I'll try to make time in the next few days to give it a go.

    Allan
  • henning333henning333 Posts: 1Questions: 0Answers: 0
    First, I want to say thank you for providing such an easy blog entry to follow to get Datatables integrated with bootstrap.

    One potential improvement to the blog is to not require the sDom to be initialized on each instance along with making it just work for whatever container the paging components are in. I kept having the paging wrap to the next line. The fix I came up with is here
    [code]$.fn.DataTable.defaults.sDom = "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>";[/code]
  • rodrigopandinirodrigopandini Posts: 4Questions: 0Answers: 0
    edited March 2012
    Hi guys,

    The integration between dataTable and Bootstrap 2 is really nice.
    One little thing that I noticed is:
    when I click in a head column to order the table and next I go to put the mouse over the pagination buttons, they go to hover state, but when I go out the button state don´t go to normal state. They still stay in hover state.
    A little thing, I know, but I think is a bug.
    Someone noticed this, or is just with me?

    Best
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    @henning333 - Absolutely - setting defaults can be exceptionally useful for this kind of thing. Good tip!

    @rodrigopandini - When you say in the hover state - do you mean that there is a focus ring on the header? Have you included the DataTables CSS from 1.9? In particular you what this style: https://github.com/DataTables/DataTables/blob/master/media/css/demo_table.css#L204

    Allan
  • rodrigopandinirodrigopandini Posts: 4Questions: 0Answers: 0
    edited March 2012
    @allan
    I followed the post and you can try this own example:
    http://datatables.net/media/blog/bootstrap_2/
    Click in a head column to order the table and next move the mouse over the pagination buttons.
    I was using http://datatables.net/media/blog/bootstrap_2/DT_bootstrap.css. I changed to the css file that you say but the problem still persist.
    When the focus is in head column the problem also exist.

    I'm using: Windows XP - Chrome 17.0.963.46 m
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    My own example seems to be working as I would expect in Chrome - although perhaps I'm missing something? The header elements don't actually have a :hover style applied to them, so I'm not entirely clear what the issue is.

    Allan
  • jelitoxjelitox Posts: 1Questions: 0Answers: 0
    Hi i'm using bootstrap 2 and datatables 1.9 and works very nice, i put on tabs but when i'm trying to configure the tabletools plug ins in the datatable only show buttons but they don't do anything only the print function that show the list of records to print, any one has made this? i follow some threads but nothing....
  • rodrigopandinirodrigopandini Posts: 4Questions: 0Answers: 0
    @allan
    try check this image:
    http://f.imgtmp.com/Gcilu.png
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    That's looking like a Chrome bug to me - just tried on latest Safari, Firefox and Webkit nightly (no IE to hand atm) and they all appear to work fine, while I can reproduce the issue you are seeing in Chrome. I'm afraid I really don't know what would be causing that to occur. I'll try to set some time aside this week to investigate.

    Allan
  • skitterskitter Posts: 1Questions: 0Answers: 0
    Not sure if this has been brought up, but it looks like bootstrap 2 has dropped support for TableSorter, so the sort arrows in the header no longer display as they do in this example.
  • adityanugrahaadityanugraha Posts: 1Questions: 0Answers: 0
    excuse me, i want Ask u dear allan how to insert sql in data table bootstrap...? i want make update an delete button , but syntak always eror..., i use codeigniter as my framwork application and bootstrap as my style... (thank for your replay)
  • lucifuriouslucifurious Posts: 1Questions: 0Answers: 0
    I converted to BS2 before the blog article and found that the following sDom value looked better for the tables I was building. Enjoy!

    [code]
    sDom : "<<'row'<'form-horizontal span5'l><'form-horizontal span7 pull-left'f>>t<<'row'<'form-horizontal span5'i><'form-horizontal span7 pull-left'p>>"
    [/code]
  • markjomarkjo Posts: 66Questions: 0Answers: 0
    edited April 2012
    I use Twitter bootstrap 2 and datatables 1.9.

    But when i use pagination links (like previous, next)
    [code] $(document).change(function () {
    runMyFunction()
    });[/code]
    isn't triggered.

    I downloaded and integrated DT_bootstrap into my project. But didn't change.

    How can i make "runMyfunction" to run, when i click previous or next links in my table?

    http://datatables.net/forums/discussion/9697/table-content-update#Item_1

    edit: i solved this by using fnDrawCallback
This discussion has been closed.