javascript - DataTables not working in .php file

Hello I have the following table and I wish to turn it into a DataTable.

<?php require 'bootstrap.php';?>
  <!doctype html>
  <html>

  <head>
    <meta charset="UTF-8">
    <title>Service Centres</title>
    <link rel="stylesheet" type="text/css" href=".dataTables/1.9.4/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="//cdn.datatables/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>

However for some reason this does not work. I notice my table change if I don't include the script part, but it does not have any sort/search features and just bees as wide as the whole screen for some reason.

Does anybody know how to fix this?

Here it is on fiddle: /

Hello I have the following table and I wish to turn it into a 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./ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="//cdn.datatables/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>

Does anybody know how to fix this?

Here it is on fiddle: https://jsfiddle/6pye363h/1/

Share Improve this question asked Oct 6, 2016 at 11:03 Big Green Alligator 1,1853 gold badges17 silver badges33 bronze badges

Do you have jquery included before the datatable js file? – Offir Commented Oct 6, 2016 at 11:06
I'm sorry I'm still learning how to do all this. I don't think so? How do I include jquery? – Big Green Alligator Commented Oct 6, 2016 at 11:08
Are you using also the DataTable API or just dataTable. Note that DataTable and dataTable are two different things. – Franco Commented Oct 6, 2016 at 11:09
I don't know. I want to use this one: datatables which one is it? Sorry for not being clear – Big Green Alligator Commented Oct 6, 2016 at 11:12
@Hokkaido look at the answer I gave you, I explained you why it didn't work and gave you a working DEMO. you wele. – Offir Commented Oct 6, 2016 at 11:14

Add a ment |

2 Answers 2

Sorted by: Reset to default 5

You need a few things to make datatable work:

Load Jquery before the Datatable js file.
Load DataTable js + css.
Your table must have a Thead and a Tbody
Add $('#service_table').DataTable(); in your javascript.

The problem with your code was that you didn't include JQuery and your table didn't have Thead and Tbody.

Here is a working DEMO for you.

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

Add the indicated lines to your code

Also place

<script src="http://code.jquery./jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>

Into your header

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - DataTables not working in .php file - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)