数据表在 .php 文件中不起作用答案

【问题标题】：DataTables not working in .php file数据表在 .php 文件中不起作用
【发布时间】：2016-10-06 11:03:38
【问题描述】：

您好，我有下表，我希望将其转换为 DataTable。

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

【问题讨论】：

数据表js文件前有jquery吗？
对不起，我还在学习如何做这一切。我不这么认为？如何包含 jquery？
您是否也在使用DataTable API 或只是dataTable。请注意，DataTable 和 dataTable 是两个不同的东西。
我不知道。我想用这个：datatables.net是哪一个？很抱歉没有说清楚
@Hokkaido 看看我给你的答案，我解释了为什么它不起作用并给了你一个有效的DEMO。欢迎您。

标签： javascript php jquery datatables

【解决方案1】：

你需要做一些事情来使数据表工作：

在 Datatable js 文件之前加载 Jquery。
加载DataTable js + css。
您的桌子必须有一个Thead和一个Tbody
在您的 javascript 中添加 $('#service_table').DataTable();。

您的代码的问题是您没有包含 JQuery，并且您的表没有 Thead 和 Tbody。

这是为您工作的DEMO。

【讨论】：

【解决方案2】：

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

进入你的标题

【讨论】：