Twitter Bootstrap

allan

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

rapier7

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?

allan

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

ge3kusa

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

allan

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

opayen

Just wanted to thank you for this blog post, it works perfectly well here.

eltimn

Just wanted to say thanks, also. Everything is working well. Saved me a bunch of time.

marfalkov

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!

irineujunior

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]

=)

allan

Good call - thanks for the heads up on that :-). Now fixed.

Allan

Diego

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)

allan

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

Diego

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

allan

All fixed now: https://github.com/DataTables/DataTables/issues/42 :-)

Allan

DarkWhiteChocolate

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.

DarkWhiteChocolate

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.

allan

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

rfitzwater

[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

allan

I'll try to make time in the next few days to give it a go.

Allan

henning333

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]

rodrigopandini

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

allan

@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

rodrigopandini

@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

allan

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

jelitox

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

rodrigopandini

@allan
try check this image:
http://f.imgtmp.com/Gcilu.png

allan

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

skitter

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.

adityanugraha

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)

lucifurious

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]

markjo

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