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>

我必须像这样运行Query：

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 value $ 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作为示例。

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

1 个答案: