I try to use DataTables on my Web. I'm using bootstrap version 3.3.6 from here: /
I'm using DataTables example from here: .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>
I try to use DataTables on my Web. I'm using bootstrap version 3.3.6 from here: http://getbootstrap./
I'm using DataTables example from here: https://datatables/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 pare my code and example code from example here: https://datatables/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;
}
Share
Improve this question
edited Mar 14, 2016 at 7:31
bayuforest
asked Mar 14, 2016 at 7:02
bayuforestbayuforest
1182 gold badges2 silver badges10 bronze badges
3
-
First look at your code makes me think that there must be something in theme.css (must be custom css) that's overriding the datatable's default pagination styles.
– Bikee
Commented
Mar 14, 2016 at 7:24
-
this is theme.css :
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; }
– bayuforest
Commented
Mar 14, 2016 at 7:26
-
Try including only these css files (plus your theme.css). No changes in scripts and html. <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn./bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="../../media/css/dataTables.bootstrap.css">
– Bikee
Commented
Mar 14, 2016 at 7:45
Add a ment
|
2 Answers
Reset to default
5
Try It help you this code work my projects
<script src="https://ajax.googleapis./ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables/r/bs-3.3.5/jq-2.1.4,dt-1.10.8/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables/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>
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