DataTables在.php文件中不起作用

Question

您好，我有下表，希望將其轉換為數據表。

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

Answer 1

您需要做一些事情才能使數據表正常工作：

在Datatable js文件之前加載Jquery。
加載DataTable js + CSS。
您的桌子上必須有Thead和Tbody
添加$('#service_table').DataTable(); 在您的JavaScript中。

您的代碼的問題在於您不包括JQuery，並且表中沒有Thead和Tbody 。

這是適合您的工作演示。

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

進入標題

DataTables在.php文件中不起作用

問題描述

2 個解決方案

解決方案1
5 已采納 2016-10-06 11:09:39

解決方案2
2 2016-10-06 11:08:42

DataTables在.php文件中不起作用

問題描述

2 個解決方案

解決方案1 5 已采納 2016-10-06 11:09:39

解決方案2 2 2016-10-06 11:08:42

解決方案1
5 已采納 2016-10-06 11:09:39

解決方案2
2 2016-10-06 11:08:42