2016-09-11 18 views
1

ドロップダウン選択に基づいてデータmysqlをフェッチしたい。私は私のドロップダウン3オプション10,20,30をしたい。私が10をクリックすると、最初の10レコードがページに表示されます。ページに表示されている最初の20件のレコードより20件をクリックしたときに表示されます。私はそれを試みたが失敗した。誰にでも私にそれをやる方法を教えてください。私にこの事例を教えれば、私はあなたに溢れています。 私はmysqlのPDO拡張を使用しています。今私のデータベースでそれを伝えるためにどのように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> 

+1

あなたは、あなたが完全な例 – RamRaider

+0

ブロを求めるのではなくしようとしたコードを共有する必要があります実際に私はこれを実装する方法が分かりません。私の解決策を見つけるのを助けてください。私はあなたにぴったりです。 –

答えて

1

Javascriptを使用しています。たぶんあなたはページをリロードせずにそれを行うべきでしょう。すべてのエントリを表示してから、すべてを非表示にして、適切なエントリを表示します。

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

カスタムコード

<?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> 
+0

これは私が望む答えです。でも、私のコードにこれを入れる方法はまだ立っていません。これを私のコードに入れる方法を教えてください。私は私の質問で自分のコードを編集しています。私を助けてください。 –

+0

私はもっとコードが必要ですが、基本的に何も表示しません。 – Treast

+0

私の質問に私のコードを追加します。あなたのコードを鉱山に入れるのを助けてください。あなたに偉大なフル。 –

0
//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> 
関連する問題