Twitter Bootstrap (V2) style not displayed

Twitter Bootstrap (V2) style not displayed

vivendivivendi Posts: 15Questions: 1Answers: 0
edited December 2012 in DataTables 1.9
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...??

Replies

  • vivendivivendi Posts: 15Questions: 1Answers: 0
    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.
  • girishmrgirishmr Posts: 137Questions: 0Answers: 0
    [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.
  • allanallan Posts: 63,534Questions: 1Answers: 10,475 Site admin
    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
  • jodijodi Posts: 2Questions: 0Answers: 0
    Hi allan
    please teach me use this DATATABLES for bootsrap
    I am so confused...
  • allanallan Posts: 63,534Questions: 1Answers: 10,475 Site admin
    Full description here: http://datatables.net/blog/Twitter_Bootstrap

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

    Allan
This discussion has been closed.