Javascript DataTables在.php文件中不工作_Javascript_Php_Jquery_Datatables

Javascript DataTables在.php文件中不工作

javascript php jquery datatables

Javascript DataTables在.php文件中不工作,javascript,php,jquery,datatables,Javascript,Php,Jquery,Datatables,您好，我有下表，我想把它变成一个数据表 <?php require 'bootstrap.php';?> <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Service Centres</title> <link rel="stylesheet" type="text/css" href="http

您好，我有下表，我想把它变成一个数据表

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

然而，由于某些原因，这不起作用。如果不包含脚本部分，我会注意到我的表发生了变化，但它没有任何排序/搜索功能，只是由于某种原因变得与整个屏幕一样宽

有人知道怎么解决这个问题吗

这是小提琴：

将指定的行添加到代码中

还处

在标题中

您需要一些东西才能使datatable正常工作：

在Datatable js文件之前加载Jquery。加载DataTableJS+css。你的桌子必须有一个桌子和一个桌子添加$'service_table'。数据表；在javascript中。代码的问题是没有包含JQuery，并且表中没有Thead和Tbody

这是一个适合您的解决方案。

在datatable js文件之前是否包含jquery？很抱歉，我仍在学习如何完成所有这些。我不这么认为？如何包含jquery？您是否也在使用DataTableAPI或仅仅使用DataTable。注意，DataTable和DataTable是两个不同的东西，我不知道。我想用这个：哪一个？对不起，没来clear@Hokkaido看看我给你的答案，我解释了为什么它不起作用，并给了你一个有效的演示。欢迎光临。

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