Twitter Bootstrap (V2) style not displayed
Twitter Bootstrap (V2) style not displayed
vivendi
Posts: 15Questions: 1Answers: 0
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...??
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...??
This discussion has been closed.
Replies
"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.
Failing that, please link to a test page showing the problem.
Allan
please teach me use this DATATABLES for bootsrap
I am so confused...
And update for Bootstrap 2: http://datatables.net/blog/Twitter_Bootstrap_2
Allan