你好，我有以下表格，我希望把它变成一个数据表。
<?php require 'bootstrap.php';?>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Service Centres</title>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
</head>
<body>
<h1 align="center">Service Centres</h1>
<table border="1" align="center" id="service_table" class="display">
<tr>
<th>Centre Postcode</th>
<th>Centre Type</th>
</tr>
<tr>
<td>12345</td>
<td>Standard</td>
</tr>
<tr>
<td>12345</td>
<td>Standard</td>
</tr>
<tr>
<td>12345</td>
<td>Standard</td>
</tr>
</table>
<script type="text/javascript">
$(document).ready(
function() {
$('#service_table').DataTable();
});
</script>
</body>
</html>
然而，由于某些原因，这不起作用。我注意到我的表改变，如果我不包括脚本部分，但它没有任何排序/搜索功能，只是因为某种原因变得与整个屏幕一样宽。
有人知道如何解决这个问题吗?
这里是小提琴:https://jsfiddle.net/6pye363h/1/
要使datatable工作，您需要做一些事情:
- 在Datatable js文件之前加载Jquery
- 加载数据表js + css.
- 你的表必须有头和体
- 在javascript中添加
$('#service_table').DataTable();。
你的代码的问题是，你没有包括JQuery和你的表没有头和Tbody。
<table border="1" align="center" id="service_table" class="display">
<thead> <---------------------
<tr>
<th>Centre Postcode</th>
<th>Centre Type</th>
</tr>
</thead> <---------------------
<tbody> <---------------------
<tr>
<td>12345</td>
<td>Standard</td>
</tr>
<tr>
<td>12345</td>
<td>Standard</td>
</tr>
<tr>
<td>12345</td>
<td>Standard</td>
</tr>
</tbody> <---------------------
</table>
将指定的行添加到您的代码
同时放置
<script src="http://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
放到你的页眉