DataTables分页样式未设置为引导主题
[英]DataTables pagination style doesn't styled as bootstrap theme
问题描述
I try to use DataTables on my Web. 
我尝试在我的网站上使用DataTables。 I'm using bootstrap version 3.3.6 from here: http://getbootstrap.com/ 我从这里使用bootstrap版本3.3.6： http ： //getbootstrap.com/
I'm using DataTables example from here: https://datatables.net/examples/styling/bootstrap.html 我在这里使用DataTables示例： 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 我试图在这里比较我的代码和示例代码： 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: 编辑：我将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; }
2 个解决方案
解决方案1
3 已采纳 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>
解决方案2
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 jquery datatables应该是第一个，然后是bootstrap版本，它将解决按钮问题，我知道它有效，因为当添加dataTables.bootstrap.min.js我意外删除了jquery.dataTables.min.js时犯了添加它的错误你在源代码中的方式，直到我切换它们才行
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.