DataTables在.php文件中不起作用

Question

DataTables在.php文件中不起作用

Big*_*tor -1 javascript php jquery datatables

你好我有下表,我希望把它变成一个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>

Run Code Online (Sandbox Code Playgroud)

但由于某些原因,这不起作用.如果我不包含脚本部分,我会注意到我的表更改,但它没有任何排序/搜索功能,并且由于某种原因变得像整个屏幕一样宽.

有人知道如何解决这个问题吗？

这里是小提琴:https://jsfiddle.net/6pye363h/1/

Answer 1

Off*_*'er 5

您需要一些东西来使数据表工作:

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

你的代码的问题是你没有包含JQuery,你的表没有Thead和Tbody.

这是一个有效的DEMO.

归档时间：	8 年，11 月前
查看次数：	1821 次
最近记录：	8 年，11 月前