DataTables分页样式未设置为引导主题

Question

我尝试在我的网站上使用DataTables。 我从这里使用bootstrap版本3.3.6： http ： //getbootstrap.com/

我在这里使用DataTables示例： https ： //datatables.net/examples/styling/bootstrap.html

这是我的预期：

但这就是我得到的：

这是我的代码：


  
 
  
  
   
    
    <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>

我错过了什么吗？ 我试图在这里比较我的代码和示例代码： https ： //datatables.net/examples/styling/bootstrap.html

但仍然没有发现任何不同

编辑：我将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; }

Answer 1

试试看，这个代码可以帮助你完成我的项目

 <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>

Answer 2

也许我迟到了，但这是我发现有同样问题的

切换顺序到那些脚本

jquery datatables应该是第一个，然后是bootstrap版本，它将解决按钮问题，我知道它有效，因为当添加dataTables.bootstrap.min.js我意外删除了jquery.dataTables.min.js时犯了添加它的错误你在源代码中的方式，直到我切换它们才行

DataTables分页样式未设置为引导主题

问题描述

2 个解决方案

解决方案1
3 已采纳 2016-03-14 07:42:10

解决方案2
3 2018-07-24 21:41:56

DataTables分页样式未设置为引导主题

问题描述

2 个解决方案

解决方案1 3 已采纳 2016-03-14 07:42:10

解决方案2 3 2018-07-24 21:41:56

解决方案1
3 已采纳 2016-03-14 07:42:10

解决方案2
3 2018-07-24 21:41:56