php - 更改选项字段时新增查询数据库

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 库。下载here .

因此假设您像这样显示数据 ():

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>

您可以查看这个fiddle举个例子。