新的更改时查询数据库选项字段

Question

我有一组初始选项，如下所示：

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

我必须像这样运行查询：

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;

在价值$sortBy中，我想从选项值中获取。当我更改选项值但不重新加载页面时，如何更改该查询？

Answer 1

你可以试试jQuery - 一个javascript库。在此处下载。

因此，假设您像这样显示数据（）：

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>';

然后您的选择字段：

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

我们现在必须创建一个脚本对表进行排序。

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

您可以检查此小提琴作为示例。