2017-10-09 49 views
0

我试过下面的代码,但似乎无法获得DataTables功能出现。我所看到的是我的数据在无边界静态表中。动态列php,mysql和DataTables

有人能告诉我我的代码有什么问题吗?我想为CD和JavaScript使用CDN主机。我是否还需要一个本地.js文件?

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Mobile Apps</title> 
     <link href="https://cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css"> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
     </head> 
     <body> 
      <table id="mobileapp"> 
       <thead> 
        <th>Trans ID</th> 
        <th>App Date</th> 
        <th>Name</th> 
        <th>City State Zip</th> 
       </thead> 
       <tbody> 
        <!-- Fetch from Db --> 
        <?php 
      $db_host = 'serverA'; // Server Name 
      $db_user = 'root'; // Username 
      $db_pass = ''; // Password 
      $db_name = 'mrd_log'; // Database Name 
      //connect to database 
      $conn = mysqli_connect($db_host, $db_user, $db_pass, $db_name); 

      //database connection error check 
      if (!$conn) { 
       die ('Failed to connect to MySQL: ' . mysqli_connect_error()); 
      } 

//SQL data query to retrieve data 
      $sql = "SELECT registration.tran_id, registration.application_date, registration.name1, registration.cityline1 FROM registration WHERE registration.application_date < curdate()"; 

//Assign results to variable   
      $query = mysqli_query($conn, $sql); 

      while ($result = mysqli_fetch_array($query)) { 

      echo " 
        <tr> 
         <td>".$result['tran_id']."</td> 
         <td>".$result['application_date']."</td> 
         <td>".$result['name1']."</td> 
         <td>".$result['cityline1']."</td> 
        </tr>"; 
       } 
      ?> 
       </tbody> 
      </table> 
      <script type="text/javascript"> 
      $(document).ready(function(){ 
       $('#mobileapp').DataTable(); 
      }); 


      </body> 
     </html> 
+0

你需要datatables.js文件了。否则,你不能得到它的功能。为什么不检查文档 – Akintunde007

+1

的网站,无论如何,你是否关闭脚本的标签?像这样的东西 –

+0

@macunte你在谈论什么功能 – shashi

回答

1

在HTML头的数据表JS库:

<link href="https://cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css">    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script> 
+0

感谢Kevin HR,我刚刚按照您所呈现的顺序添加了所有内容,并开始按预期显示。我在底部留下了一个闭幕脚本标签,就像Jacky Supit抓到的那样。 – macunte