neue Abfrage-Datenbank, wenn Änderungsoption Feld

Question

Ich habe eine intial Gruppe von Optionen, wie diese:

<select name="sortBy" id="sortBy"> 
    <option value="waktupesan">Waktu Pesan</option> 
    <option value="nomornota">Nomor Nota</option> 
    <option value="U.nama">Kasir</option> 
</select> 

Und ich habe Abfrage wie diese laufen:

SELECT P.NomorNota, P.WaktuPesan, P.WaktuBayar, P.Total, U.Nama, MP.Nama 
FROM foodie.pemesanan P, foodie.user U, foodie.mode_pembayaran MP 
WHERE P.EmailKasir = U.Email AND P.Mode = MP.Kode 
ORDER BY $sortBy DESC; 

in Wert $ sortBy möchte ich vom Optionswert erhalten. Wie ändere ich diese Abfrage, wenn ich einen Optionswert ändere, aber die Seite nicht neu lade?

Answer 1

Sie können jQuery - eine Javascript-Bibliothek versuchen. Laden Sie es herunter here.

So vorausgesetzt, Sie Ihre Daten wie folgt angezeigt werden():

echo '<table id="data"> 
      <thead> 
       <tr> 
        <th>Nomor Nota</th> 
        <th>Waktu Pesan</th> 
        <th>Waktu Bayar</th> 
        <th>Total</th> 
        <th>U Nama</th> 
        <th>MP Nama</th> 
       </tr> 
      </thead> 
      <tbody>'; 

while($stmt->fetch()){ 
    echo '<tr> 
       <td>'.$nomornota.'</td> 
       <td>'.$waktupesan.'</td> 
       <td>'.$waktubayar.'</td> 
       <td>'.$total.'</td> 
       <td>'.$unama.'</td> 
       <td>'.$mpnama.'</td> 
      </tr>' 
} 

echo ' </tbody> 
     </table>'; 

dann Ihre Auswahlfeld:

<select name="sortBy" id="sortBy"> 
    <option selected disabled>Select Sort</option> 
    <option value=0>Nomor Nota</option> 
    <option value=1>Waktu Pesan</option> 
    <option value=2>Waktu Bayar</option> 
    <option value=3>Total</option> 
    <option value=4>U Nama</option> 
    <option value=5>MP Nama</option> 
</select> 

Wir müssen jetzt ein Skript sortieren unsere Tabelle erstellen.

<script src="js/jquery-1.9.1.min.js"></script> <!-- ASSUMING YOU STORE THE DOWNLOADED JQUERY TO A js FOLDER --> 
<script> 

    $(document).on("change", "select", function(){ /* WHEN SELECT FIELD HAS BEEN CHANGED TO THE PREFERRED SORT */ 

     var no = $(this).val(); /* VALUE OF THE SELECTED SORT */ 
     sortTable(no); /* CALL sortTable() FUNCTION */ 

    }); 

    function sortTable(no){ /* sortTable() FUNCTION */ 

     var rows = $('#data tbody tr').get(); /* GET ROWS OF INSIDE TBODY */ 

     rows.sort(function(b, a) { /* USE JAVASCRIPT'S .sort() */ 

      var A = $(a).children('td').eq(no).text().toUpperCase(); 
      var B = $(b).children('td').eq(no).text().toUpperCase(); 

      if(A < B) { 
       return -1; 
      } 

      if(A > B) { 
       return 1; 
      } 

      return 0; 

     }); 

     $.each(rows, function(index, row) { 
      $('#data').children('tbody').append(row); /* APPEND THE NEW SORT OF DATA TO THE TABLE */ 
     }); 
    } 

</script> 

Sie können dies fiddle für ein Beispiel überprüfen.