Is this the intended look of the Bootstrap theme used with Datatables?

uofitorn

I used the download builder to include the Bootstrap theme in Datatables (and left all the other options at the default on the download builder page). However, when I include the resulting css/js my table doesn't seem to look right. Can anyone take a look at these screenshots of my table and tell me if this is the intended look of a Datatables table using the Bootstrap theme and maybe I am just doing something wrong with my styling? This is what the table looks like with the Bootstrap theme included:

I'm fairly new to front-end development and maybe this is the way it's supposed to look and I just haven't fully styled it correctly myself?

When I include just the normal datatables js and css my table looks much nicer and better aligned to me:

Some extra details that may or may not be relevent: First, sorry for not including a jsfiddle. I was unsure how to set one up due to the complex way I am setting up the page. Essentially, I am using jquery's load function to grab the html code from a server to set up a basic table with no content. Then I use datatable's ajax/server-side functionality to populate the table with data. And also yes, I remembered to include the bootstrap "table" class in table html element.

Oh and here is how I am initializing Datatables:

"processing": true, "serverSide": true, "ajax": "output/ss_results/", "oLanguage": {"sSearch": "Search within results:"}, "lengthMenu": [ [10, 25, 50, 100, -1], [10, 25, 50, 100, "All"] ]

Thanks for any help.

allan

I'm afraid we'd need a link to a page showing the issue to be able to debug it and offer any help.

Allan

shawnjames95

I am also having this problem when using the download builder. I downloaded the files and uploaded them to my server, but for the JsFiddle I included them from the CDN.

https://jsfiddle.net/pw9e3rpm/

Here is an example of my jsfiddle.

The options I used for the download builder were..

Jquery: No jQuery
Styling: Bootstrap, No styling library
DataTables: DataTables
AutoFill: Autofill
Buttons: Buttons, Flash export, HTML5 export, JSZip, pdfmake, Print view
Minification: Minify
Concatenate: Single file
CDN: CDN

And it resulted in the the following HTML

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/jszip-2.5.0/pdfmake-0.1.18/dt-1.10.13/af-2.1.3/b-1.2.4/b-flash-1.2.4/b-html5-1.2.4/b-print-1.2.4/r-2.1.0/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdn.datatables.net/v/bs/jszip-2.5.0/pdfmake-0.1.18/dt-1.10.13/af-2.1.3/b-1.2.4/b-flash-1.2.4/b-html5-1.2.4/b-print-1.2.4/r-2.1.0/datatables.min.js"></script>

I have included the two files as external resources in the JsFiddle, as well as a CDN for jQuery, Bootstrap CSS, and Bootstrap JS.

kthorngren

All you need is to add some Bootstrap table classes to your table. I added a couple to your jsfiddle.

Kevin

shawnjames95

Oh wow I feel silly! Hopefully the original poster gets this message as well.

shawnjames95

Oh wow I feel silly! Hopefully the original poster gets this message as well.