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:
Below that i simply have a table with all the data in it:
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 <head> 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:
<style>
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; }
</style>
<script type="text/javascript" charset="utf-8">
$(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"
} );
</script>
Below that i simply have a table with all the data in it:
<table cellpadding="0" cellspacing="0" border="0" class="table" id="example"> ... </table>
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 <head> 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...??
