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

bayuforest 发表于 Dev

巴尤森林

我尝试在Web上使用DataTables。我正在从此处使用引导程序版本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;
}

巴德雷什（Bhadresh Shiroya）

试试看，它可以帮助您使用此代码处理我的项目

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