Sorting out for columns in HTML table with PHP values selected from database

Question

There is the code for my table with all steps followd for activeting 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>

Do you know of any method, to add a sorting method to the Top columns for the data SELECTED from my local database table ?

Im trying to create orting out for columns in HTML table with PHP values selected from database.

Im getting this error: DataTables warning: table id=myTable - Incorrect column count. For more information about this error, please see http://datatables.net/tn/18

There is also a photo of files i downloaded

Files

There is HTML source view for the table.

HTML source view

db table

There are lots of Javascript libraries which can add sorting to a HTML table...have a look online (we don't do recommendations here). — ADyson, Apr 25 '23 at 14:19
Hey, I was looking but nothing really worked for me, especially the js codes. I thought its mostly because I have a ´dynamic ´ table with PHP in it ? — Petco, Apr 25 '23 at 14:23
I doubt it. The table is not really "dynamic", because once it arrives in your browser, the data is fixed, it does not change after that moment. The PHP code itself ran on your server when the page was being created...it does not go to the browser. Only the _output_ of the PHP code (which is HTML table elements) is sent to the browser. And JS doesn't know or care how that HTML was generated. So I don't know specifically what problems you've been having when using JS libraries. — ADyson, Apr 25 '23 at 14:24
hi, for accurate answer it is essential to know where do you want to add a sorting method .... server side or client side.... i.e frontend or backend..... because you can do it on both ends — Anant V, Apr 25 '23 at 14:41
It would seem easiest to add an ORDER BY to your query, unless you want the user to be able to sort on a different column when they see the table on the browser — RiggsFolly, Apr 25 '23 at 14:43
You seem to have edited the question with some DataTables code. So...is there now a specific issue with that, or are you trying to show us your solution? — ADyson, Apr 26 '23 at 11:18
Yes Im getting this error datatables.net/manual/tech-notes/18. But my Coulmns in thead are perfectly matching the columns in tbody. — Petco, Apr 26 '23 at 11:20
Hm that's strange. Have you checked the final rendered HTML (using your browser's View Source feature) to ensure this is actually the case for all the rows in your table? — ADyson, Apr 26 '23 at 11:26
P.S. If you have an error, you really must include that in the question itself. — ADyson, Apr 26 '23 at 11:26
I edited it again wrote the error and sent the image of rendered HTML bu im nto sure if thats exactly what u meant. — Petco, Apr 26 '23 at 11:39
Thanks. Yes that's what I was thinking of. Do you only have one row of data in the table then? — ADyson, Apr 26 '23 at 12:15
No currently I have 4 rows but it was hard to put them all in the picture. I also use form to upload video, csv data and just regular inputs to the table all in one row. — Petco, Apr 26 '23 at 14:15
It's very strange. Are you sure all 4 rows have 11 columns, and there is no validation error in the HTML? — ADyson, Apr 26 '23 at 15:17
I added db table picture. The column SourceFile isnt used in the table. — Petco, Apr 26 '23 at 16:11
Don't need to see your db table. I was talking about putting the whole of the generated html table through an online html validator. Also if you paste the whole generated html into the question then we could try to make our own demo using datatables and try to reproduce the error. — ADyson, Apr 26 '23 at 16:13
If it's easier than using the inspector in your developer tools for that, you can use the View Source feature of your browser to retrieve it (it should be available in the menus) — ADyson, Apr 26 '23 at 16:15
Hello, @ADyson after some time I finally found other way to make sorting system for columns. But I really want to thank you for helping and advising me. — Petco, Apr 26 '23 at 18:31

Sorting out for columns in HTML table with PHP values selected from database

0 Answers0