从数据库中选择PHP值的HTML表中的列排序[重复]

azpvetkf  于 2023-04-28  发布在  PHP
关注(0)|答案(1)|浏览(114)

此问题已在此处有答案

HTML table sort(8个回答)
2天前关闭。
这里有我的表的代码,以及激活DataTable的所有步骤

<!doctype html> 
<html> 
  <head>
     <title>Upload to DB</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css" rel="stylesheet">

     <link rel="stylesheet" href="styles.css">  
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

     <link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css">
     <link href="https://cdn.datatables.net/v/dt/jq-3.6.0/dt-1.13.4/datatables.min.css" rel="stylesheet"/>
     <script src="https://cdn.datatables.net/v/dt/jq-3.6.0/dt-1.13.4/datatables.min.js"></script>

     <script type="text/javascript" src="autosearch.js"></script>

     <link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css">
     <script type="text/javascript" src="js/jquery.js"></script>
     <script type="text/javascript" src="js/jquery.dataTables.js"></script>
     
  </head>
  <body>  

   <script type="text/javascript">
 $(document).ready(function() {
  $('#myTable').DataTable();
 });
 </script>

<table class="table table-bordered table-striped" style="margin-top: 50px;" id="myTable"> 
<tr> 
<?php 
$select="select * from videos"; 
$result=mysqli_query($con,$select); 
?>  
      <thead class="sortable" style="text-align: center;">
        <tr> 
           <th> Id</th>
           <th> Video </th>
           <th> Názov </th>
           <th> Autor </th>
           <th> Tagy </th>
           <th> Žáner </th>
           <th> Hodnotenie </th>
           <th> Rozlíšenie videa </th> 
           <th> Počet Snímkov </th> 
           <th> Dĺžka videa</th>
           <th> Dátum Vytvorenia </th> 
        </tr> 
      </thead>

        <?php while($rows=mysqli_fetch_assoc($result)) 
        { 
         $location = $rows['location'];
        ?> 
      <tbody style="text-align: center;">
        <tr>
         <td><?php echo $rows['id']; ?></td>
         <td><?php echo "<video src='".$location."' controls width='200px' height='200px' ></video>"; ?></td>  
         <td><?php echo $rows['FileName']; ?></td>
         <td><?php echo $rows['author']; ?></td>
         <td><?php echo $rows['tags']; ?></td>
         <td><?php echo $rows['genre']; ?></td>
         <td><?php echo $rows['rating']; ?></td>
         <td><?php echo $rows['ImageSize']; ?></td> 
         <td><?php echo $rows['VideoFrameRate']; ?></td> 
         <td><?php echo $rows['MediaDuration']; ?></td>
         <td><?php echo $rows['CreateDate']; ?></td> 
         
        </tr>
      </tbody> 
       <?php 
          } 
      ?> 
    </table> 

  </body>
</html>

你知道有什么方法可以为本地数据库表中的SELECT数据的Top列添加排序方法吗?
进出口试图创建排序出的HTML表中的列与PHP值从数据库中选择。
我得到这个错误:DataTables警告:table id=myTable -列计数不正确。有关此错误的详细信息,请参阅http://datatables.net/tn/18
还有我下载的文件的照片

该表有一个HTML源视图。

db table

idfiyjo8

idfiyjo81#

您可以使用名为DataTables的JavaScript库向HTML表添加排序。以下是实现它的步骤:
1.从官方网站下载DataTables:https://datatables.net/download/
1.解压缩下载的zip文件并将js和css文件夹复制到项目目录。
1.将以下代码添加到HTML文件的head部分,以包含所需的DataTables文件:

<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css">
 <script type="text/javascript" src="js/jquery.js"></script>
 <script type="text/javascript" src="js/jquery.dataTables.js"></script>

1.使用以下代码初始化表上的DataTables:

<script type="text/javascript">
 $(document).ready(function() {
  $('#myTable').DataTable();
 });
 </script>

此代码应在步骤中包含DataTables文件后添加
1.将可排序类添加到表的head部分:

<thead class="sortable">
...
</thead>

这将启用对表列的排序。
注意:请确保将#myTable替换为表的ID。

相关问题