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添加到我的页面，它只是这样：

＆＃13;

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

＆＃13;

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应该是第一个，然后是引导程序版本，它将解决按钮问题，我知道它是可行的，因为在添加dataTables.bootstrap.min.js时，我不小心删除了jquery.dataTables.min.js 犯了错误，无法按照您在源代码中的方式添加它，直到我切换了它们，它才起作用

DataTables分页样式不会被设计为引导主题

2 个答案: