DataTables pagination style doesn't styled as bootstrap theme
Question
I try to use DataTables on my Web. I'm using bootstrap version 3.3.6 from here: http://getbootstrap.com/
I'm using DataTables example from here: https://datatables.net/examples/styling/bootstrap.html
This is what I expected:
But this is what I get:
Here is my code:
<head>
<!-- Bootstrap -->
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Bootstrap theme -->
<link href="css/bootstrap-theme.css" rel="stylesheet">
<!-- Datatable css -->
<link href="css/dataTables.bootstrap.min.css" rel="stylesheet">
<link href="css/jquery.dataTables.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="theme.css" rel="stylesheet">
</head>
<body>
<!-- some other stuff and html code here -->
<!-- and, at the end of page, I have: -->
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script>
<script src="js/docs.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
<script src="js/jquery-1.12.0.min.js"></script>
<script src="js/dataTables.bootstrap.min.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
</body>
Did I missed something? I've tried to compare my code and example code from example here: https://datatables.net/examples/styling/bootstrap.html
but still no found any different
edit: I add theme.css to my page, it only like this:
body { padding-top: 70px; padding-bottom: 30px; } .theme-dropdown .dropdown-menu { position: static; display: block; margin-bottom: 20px; } .theme-showcase > p > .btn { margin: 5px 0; } .theme-showcase .navbar .container { width: auto; }
2 answers
solution1
3 ACCPTED 2016-03-14 07:42:10
Try It help you this code work my projects
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/bs-3.3.5/jq-2.1.4,dt-1.10.8/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.8/datatables.min.js"></script>
<div style="clear: both;margin-top: 18px;">
<table id="example" class="display table table-striped table-hover" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>SKILL</th>
<th>EDIT</th>
<th>DELETE</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
.
.
.
.
.
.
<tr>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
$(document).ready(function () {
var table = $('#example').DataTable( {
"pageLength": 5,
"pagingType": "full_numbers"
});
$('#example').removeClass( 'display' ).addClass('table table-striped table-bordered');
});
</script>
solution2
3 2018-07-24 21:41:56
maybe I'm late, but here is what I've found out having the same problem
switch order to those scripts
jquery datatables is supposed to be first, then the bootstrap version, that will fix the button problem, I know it works because when adding dataTables.bootstrap.min.js I accidentally removed jquery.dataTables.min.js made the mistake of adding it the way you have in your source code and it didn't work until I switched them
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.