Mohsin Sharif Mohsin Sharif - 2 months ago 14
HTML Question

drop down selection of data from mysql

I want to fetch data mysql on the basis of dropdown selection. i want my drop down has 3 options 10,20,30. when i clicked on 10 then first 10 records shown in my page. and when i clicked on 20 than first 20 records shown in pages. i tried it but failed to do it. Please any one can help me how to do it. i will be great full to you if give me a example of this.
i'm using PDO extension of mysql.

<?php
include('config.php');
session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="resultdiv">
<form method="POST">
<table class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Video ID</th>
<th>Video Name</th>
</tr>
</thead>
<?php
$access = $_SESSION['login'];
$sql = "SELECT * FROM videos ORDER BY id desc";
$query = $conn->query($sql);
$i=1;
while ($row = $query->fetch(PDO::FETCH_ASSOC)){
$id = $row['id'];
$video_name = $row['video_name'];
echo "
<tbody>
<tr>
<td style='text-align:center;'>$id</td>
<td id='test10' class='text-center'><b>$video_name</b></td>
<td style='text-align:center;'>
<a href='add-video3.php?id=$id' class='btn btn-info'>EDIT</a><br><br>
<a href='delete_video.php?id=$id' class='btn btn-danger' rel='tooltip' title='Delete'><i class='glyphicon glyphicon-trash'></i></a>
</tr>
</tbody>";
} $i++;
}
else {
header ("location:index.php");
}
?>
</table>
</form>
</div>
</body>




Now how to communicate it with my database.

Answer

I see that you're using Javascript. Maybe you should do it without reloading the page. Just show all entries, then hide them all, and show the good entries.

//Populate table
for(var i = 1; i<=30; i++){
  $('table tbody').append('<tr><td>Row '+i+'</td></tr>');  
}

//Listener on select change
$('select').on('change', function(){
  var value = $(this).val();
  $('table tbody tr').hide();
  for(var i = 0; i<value; i++){
    //Find the i tr on the table
    $('table tbody tr').eq(i).show(); 
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="dropdown">
  <option value="10">10</option>
  <option value="20">20</option>
  <option value="30" selected>30</option>  
</select>

<table>
  <tbody>
    
  </tbody>
</table>

Custom code

<?php
include('config.php');
session_start();

$access = $_SESSION['login'];
$sql = "SELECT * FROM videos ORDER BY id desc";
$query = $conn->query($sql);

?>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
  <div id="resultdiv">
    <!-- start data table -->
    <table  class="table table-striped table-bordered" cellspacing="0" width="100%">
      <thead>
        <tr>
          <th>Video ID</th>
          <th>Video Name</th>
        </tr>
      </thead>

      <tbody>
        <?php
        while ($row = $query->fetch(PDO::FETCH_ASSOC)){
          $id = $row['id'];
          $video_name = $row['video_name'];
          echo "
          <tr>
           <td style='text-align:center;'>$id</td>
           <td id='test10' class='text-center'><b>$video_name</b></td>

           <td style='text-align:center;'>
             <a href='add-video3.php?id=$id' class='btn btn-info'>EDIT</a><br><br>
             <a href='delete_video.php?id=$id' class='btn btn-danger' rel='tooltip' title='Delete'><i class='glyphicon glyphicon-trash'></i></a>
           </tr>";
         }

         ?>
       </tbody>
     </table>
     <label for="select-row">Show </label>
     <select id="select-row">
       <option value="10">10</option>
       <option value="20">20</option>
       <option value="30">30</option>
       <option value="50">50</option>
     </select>
     <!-- End data table --> 
   </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <script type="text/javascript">
     //Listener on select change
    $('select').on('change', function(){
      var value = $(this).val();
      $('table tbody tr').hide();
      for(var i = 0; i<value; i++){
        //Find the i tr on the table
        $('table tbody tr').eq(i).show(); 
      }
    });
   </script>
 </body>