DataTables logo DataTables

via Ad Packs
Twitter Bootstrap
  • Vote Up0Vote Down allanallan
    Posts: 10,261
    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
  • 32 Comments sorted by
  • Vote Up0Vote Down rapier7rapier7
    Posts: 2
    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?
  • Vote Up0Vote Down allanallan
    Posts: 10,261
    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
  • Vote Up0Vote Down ge3kusage3kusa
    Posts: 1
    @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.
  • Vote Up0Vote Down allanallan
    Posts: 10,261
    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
  • Vote Up0Vote Down opayenopayen
    Posts: 1
    Just wanted to thank you for this blog post, it works perfectly well here.
  • Vote Up0Vote Down eltimneltimn
    Posts: 1
    Just wanted to say thanks, also. Everything is working well. Saved me a bunch of time.
  • Vote Up0Vote Down marfalkovmarfalkov
    Posts: 1
    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!
  • Vote Up0Vote Down irineujunioririneujunior
    Posts: 1
    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
    if ( oPaging.iPage === oPaging.iTotalPages-1 ) {
    for this 
    if (( oPaging.iPage === oPaging.iTotalPages-1 ) || ( iEnd === 0)) {

    =)
  • Vote Up0Vote Down allanallan
    Posts: 10,261
    Good call - thanks for the heads up on that :-). Now fixed.

    Allan
  • Vote Up0Vote Down DiegoDiego
    Posts: 3
    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)
  • Vote Up0Vote Down allanallan
    Posts: 10,261
    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
  • Vote Up0Vote Down DiegoDiego
    Posts: 3
    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
  • Vote Up0Vote Down allanallan
    Posts: 10,261
    All fixed now: https://github.com/DataTables/DataTables/issues/42 :-)

    Allan
  • Vote Up0Vote Down DarkWhiteChocolateDarkWhiteChocolate
    Posts: 2
    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.
  • Vote Up0Vote Down DarkWhiteChocolateDarkWhiteChocolate
    Posts: 2
    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.
  • Vote Up0Vote Down allanallan
    Posts: 10,261
    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
  • Vote Up0Vote Down rfitzwaterrfitzwater
    Posts: 32
    allan said: 've just posted a new article about how Bootstrap 2 might be integrated with DataTables: <a href="http://datatables.net/blog/Twitter_Bootstrap_2"; target="_blank" rel="nofollow">http://datatables.net/blog/Twitter_Bootstrap_2</a>; .<br>

    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
  • Vote Up0Vote Down allanallan
    Posts: 10,261
    I'll try to make time in the next few days to give it a go.

    Allan
  • Vote Up0Vote Down henning333henning333
    Posts: 1
    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
    $.fn.DataTable.defaults.sDom = "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>";
  • Vote Up0Vote Down rodrigopandinirodrigopandini
    Posts: 4
    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
  • Vote Up0Vote Down allanallan
    Posts: 10,261
    @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
  • Vote Up0Vote Down rodrigopandinirodrigopandini
    Posts: 4
    @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
  • Vote Up0Vote Down allanallan
    Posts: 10,261
    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
  • Vote Up0Vote Down jelitoxjelitox
    Posts: 1
    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....
  • Vote Up0Vote Down rodrigopandinirodrigopandini
    Posts: 4
    @allan
    try check this image:
    http://f.imgtmp.com/Gcilu.png
  • Vote Up0Vote Down allanallan
    Posts: 10,261
    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
  • Vote Up0Vote Down skitterskitter
    Posts: 1
    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.
  • Vote Up0Vote Down adityanugrahaadityanugraha
    Posts: 1
    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)
  • Vote Up0Vote Down lucifuriouslucifurious
    Posts: 1
    I converted to BS2 before the blog article and found that the following sDom value looked better for the tables I was building. Enjoy!

     sDom : "<<'row'<'form-horizontal span5'l><'form-horizontal span7 pull-left'f>>t<<'row'<'form-horizontal span5'i><'form-horizontal span7 pull-left'p>>"
  • Vote Up0Vote Down markjomarkjo
    Posts: 23
    I use Twitter bootstrap 2 and datatables 1.9.

    But when i use pagination links (like previous, next)
        $(document).change(function () {
        runMyFunction()
    });
    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
  • Vote Up0Vote Down allanallan
    Posts: 10,261
    @markjo: It looks like you've solved it from that link and I've added a comment as well. Please don't cross post the same question. It just takes up time so I have less time to answer questions :-)

    Allan
  • Vote Up0Vote Down markjomarkjo
    Posts: 23
    @Allan I supposed it would be bootstrap related issue, but i have found out that it's not bootstra specific :)
    Thank you for interest.
Add a Comment

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In Apply for Membership

Support

Get useful and friendly help straight from the source.

Categories

In this Discussion