CODEWITHSUNDEEP
phpjqueryhtmlmysql
Mohsin Sharif
Mohsin Sharif

Reputation: 375

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.

Upvotes: 1

Views: 91

Answers (2)

Mohsin Sharif
Mohsin Sharif

Reputation: 375

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

Upvotes: 0

Treast
Treast

Reputation: 1105

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>

Upvotes: 1

Related Questions