JQuery DataTables with Bootstrap Styling and responsive extension not working
In my html page, I replaced the example with this one. In the head tag I have the following:
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="http:////cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet">
<link href="http://cdn.datatables.net/responsive/1.0.1/css/dataTables.responsive.css" rel="stylesheet">
for css and this:
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http:////cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script src="http:////cdn.datatables.net/responsive/1.0.1/js/dataTables.responsive.min.js"></script>
<script src="http://cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.js"></script>
for javascript.
The table is as follows:
<table id="example" class="table table-striped table-hover dt-responsive" cellspacing="0" width="100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Extn.</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>Quinn</td>
<td>Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
<td>9497</td>
<td>q.flynn@datatables.net</td>
</tr>
<tr>
<td>Quinn</td>
<td>Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
<td>9497</td>
<td>q.flynn@datatables.net</td>
</tr>
<tr>
<td>Quinn</td>
<td>Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
<td>9497</td>
<td>q.flynn@datatables.net</td>
</tr>
</tbody>
</table>
I am calling datatable at the end of the body with:
<script>
$(document).ready(function() {
$('#example').dataTable({
responsive: true
});
});
</script>
My code is similar to the example on the DataTable site. It works and mine doesn't work. What for?
source to share
Is work collapsing? What is the problem you are getting. Any console error? I copied the same code as you mentioned above and created an example script. Can you check it out here? Sample Fiddle for Responsive DataTable Hope this helps.
Html
<div class="row">
<div class="col-md-12">
<table id="example" class="table table-striped table-hover dt-responsive" cellspacing="0" width="90%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Extn.</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>Quinn</td>
<td>Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
<td>9497</td>
<td>q.flynn@datatables.net</td>
</tr>
<tr>
<td>Quinn</td>
<td>Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
<td>9497</td>
<td>q.flynn@datatables.net</td>
</tr>
<tr>
<td>Quinn</td>
<td>Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
<td>9497</td>
<td>q.flynn@datatables.net</td>
</tr>
</tbody>
</table>
</div>
</div>
CSS
body { font-size: 140%
}
.row{
border:1px solid black;
}
table.dataTable th,
table.dataTable td {
white-space: nowrap;
}
JS:
$(document).ready(function() {
$('#example').DataTable();
} );
source to share
Premise: I am writing this answer because I am facing the same problem, and since I do not find a good example / tutorial, I will explain how I will go about dealing with it.
I suggest looking at the source code on the Bootstrap DataTables Build Page
This page shows DataTables and a responsive extension used with a Bootstrap framework providing styling
It was first said that below the demo table rendered in Stutting Bootstrap DataTables use the correct CSS, JS and HTML for this case, and if I am not mistaken, they are also placed in the correct order.
you have another option:
just look at the source code of this page for example. in Firefox I press Ctrl-u and the address bar opens
view-source:https://datatables.net/extensions/responsive/examples/styling/bootstrap.html
this allows you to see the source code of the rendered html.
Search the same command for your browser and you will see how on the DataTables website they tweak the CSS (es) and JS (es) scripts to make it work.
What looks sharp is that they just use this script to initialize the table
$(document).ready(function() {
$('#example').DataTable();
} );
so no keyword is used responsive
,
making it flamboyant, that magic looks like CSS and JS singles (if loaded correctly).
Eventually, to start from a safe point, place the js script loading in the HEAD section of your test html page and start off successfully.
only after a positive test, if necessary, move them wherever you want.
source to share
Ha! I had the same problem.
<link href="http://cdn.datatables.net/responsive/1.0.1/css/dataTables.responsive.css" rel="stylesheet">
Indicates an invalid CSS file that:
responsive.dataTables.css
And why is the naming convention for stylesheets different from the naming convention for javascript files? Dunno!
source to share