Twitter Bootstrap (V2) style not displayed

vivendi

Hi, i followed this post (http://www.datatables.net/blog/Twitter_Bootstrap_2) in order to make DataTables look like the table of Twitter Bootstrap. But for some reason i can't get the TB style applied to my DataTable.

I followed everything in that post. I basically have this:

[code]

table.table thead .sorting,
table.table thead .sorting_asc,
table.table thead .sorting_desc,
table.table thead .sorting_asc_disabled,
table.table thead .sorting_desc_disabled {
cursor: pointer;
*cursor: hand;
}

table.table thead .sorting { background: url('../images/datatable/sort_both.png') no-repeat center right; }
table.table thead .sorting_asc { background: url('../images/datatable/sort_asc.png') no-repeat center right; }
table.table thead .sorting_desc { background: url('../images/datatable/sort_desc.png') no-repeat center right; }

table.table thead .sorting_asc_disabled { background: url('../images/datatable/sort_asc_disabled.png') no-repeat center right; }
table.table thead .sorting_desc_disabled { background: url('../images/datatable/sort_desc_disabled.png') no-repeat center right; }





$(document).ready(function() {
$('#example').dataTable( {
"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>"
} );
} );

$.extend( $.fn.dataTableExt.oStdClasses, {
"sWrapper": "dataTables_wrapper form-inline"
} );

[/code]

Below that i simply have a table with all the data in it:

[code]

...

[/code]

But for some reason i get the "original" look instead of the Twitter Bootstrap look.

Here's a screenshot: http://imgur.com/EVI12

I want to point out that Twitter Bootstrap IS included in the of my page. As you can also see in the screenshot, the span6 is picked up by it (where the "Search" and "Show entries" is displayed and also at the bottom.

Also the Pagination at the button isn't looking like it should.

Any idea what the problem could be...??

vivendi

I have the pagination working at the bottom. I wasn't aware of the Bootstrap plugin for this. It's just the looks of the table that is still not working the way i want to.

girishmr

[code]
"sPaginationType": "bootstrap",
[/code]

All youneed to do is to add sPaginationtype and set it to "bootstrap". Use the twitter bootstrap css for styling and bootstrap.js. This should style your table like twitter bootstrap tables.

Also for the pagination to work, you need to add the bootstrap plugin.

allan

Also worth using the latest DataTables / Bootstrap integration files from here: https://github.com/DataTables/Plugins/tree/master/integration/bootstrap

Failing that, please link to a test page showing the problem.

Allan

jodi

Hi allan
please teach me use this DATATABLES for bootsrap
I am so confused...

allan

Full description here: http://datatables.net/blog/Twitter_Bootstrap

And update for Bootstrap 2: http://datatables.net/blog/Twitter_Bootstrap_2

Allan