javascript - 我如何使用下拉列表根据其 DateTransaction 对其进行排序？

Question

我是 PHP 新手，需要您的帮助。 :)所以基本上，我想使用基于 DateTransaction 列的下拉列表对该表进行排序，但选择是从 1 月到 12 月。

所以我有这个代码

           <?php
           $q = intval($_GET['q']);

           $con = mysqli_connect('localhost','root','','duday2.0');
           if (!$con) {
             die('Could not connect: ' . mysqli_error($con));
           }

           mysqli_select_db($con,"ajax_demo");
           $sql="
           SELECT transaction.totalAmountDue, transaction.DateTransaction, transaction.condition, transaction.reasonVoid, sales.productID, sales.quantity, sales.subtotal, sales.transactionID, sales.productID, sales.quantity, sales.subtotal FROM transaction INNER JOIN sales ON sales.transactionID = transaction.transactionID  WHERE transaction.transactionID = '".$q."'";
           $result = mysqli_query($con,$sql)
           or die("Error: ".mysqli_error($con));

           echo '<table class= "t_data" border=1 cellspacing=5>';
           echo '<thead style="padding:1px">';
           echo '<tr>
           <td height="5" width="2000" align="left" colspan=10><strong><font color=white>TransactionID</td>
           <td height="5" width="2000" align="left" colspan=10><strong><font color=white>DateTransaction</td>
           <td height="5" width="2000" align="left" colspan=10><strong><font color=white>Condition</td>
           <td height="5" width="2000" align="left" colspan=10><strong><font color=white>Product ID</td>
           <td height="5" width="2000" align="left" colspan=10><strong><font color=white>Quantity</td>
           <td height="5" width="2000" align="left" colspan=10><strong><font color=white>Sub Total</td>
           </thead>
           </tr>';

           while($row = mysqli_fetch_array($result)) 
           {
             echo '<tr>
                <td width="100px" align="left" colspan=10>'.$row['transactionID'].'</td>
                <td width="100px" align="left" colspan=10>'.$row['DateTransaction'].'</td>
                <td width="100px" align="left" colspan=10>'.$row['condition'].'</td>
                <td width="100px" align="left" colspan=10>'.$row['productID'].'</td>
                <td width="100px" align="left" colspan=10>'.$row['quantity'].'</td>
                <td width="100px" align="left" colspan=10>'.$row['subtotal'].'</td>
                </tr>';
           }
           echo "</table>";

           mysqli_close($con);
           ?>

和这段代码

    <script>
            function showReport(str) {
              if (str=="") {
                document.getElementById("txtHint").innerHTML="";
                return;
              } 
              if (window.XMLHttpRequest) {

                xmlhttp=new XMLHttpRequest();
              } else { 
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
              }
              xmlhttp.onreadystatechange=function() {
                if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                  document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
                }
              }
              xmlhttp.open("GET","getReport.php?q="+str,true);
              xmlhttp.send();
            }
            </script>


            <form>
            <select name="months" onchange="showReport(this.value)">

            <option Selected>--Select Month--</option>
            <option value="">January</option>
            <option value="">February</option>
            <option value="">March</option>
            <option value="">April</option>
            <option value="">May</option>
            <option value="">June</option>
            <option value="">July</option>
            <option value="">August</option>
            <option value="">September</option>
            <option value="">October</option>
            <option value="">November</option>
            <option value="">December</option>
            </select>

            </form>

而且我不知道要在值中输入什么来按月份对日期进行排序。

TIA。

Answer 1

如下装饰表格:

<table id="tblRecords">
<thead>
    <tr>
        // your header code goes here...
    </tr>
</thead>
<tbody>
</tbody>
</table>

更改下拉值字段如下:

<select name="months" onchange="showReport(this.value)">
        <option Selected>--Select Month--</option>
        <option value="1">January</option>
        <option value="2">February</option>
        ...

按如下方式替换您的脚本:

<script>
        function showReport(str) {
          if (str=="") {
            document.getElementById('myTable').getElementsByTagName('tbody')[0].innerHTML="";
            return;
          } 
          if (window.XMLHttpRequest) {

            xmlhttp=new XMLHttpRequest();
          } else { 
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
          xmlhttp.onreadystatechange=function() {
            if (xmlhttp.readyState==4 && xmlhttp.status==200) {
              document.getElementById('myTable').getElementsByTagName('tbody')[0].innerHTML=xmlhttp.responseText;
            }
          }
          xmlhttp.open("GET","getReport.php?q="+str,true);// here str is the value field of the dropdown selected
          xmlhttp.send();
        }
        </script>

在 getReport.php 中，编写查询并生成字符串中的行，如下所示:

SELECT * FROM table WHERE MONTH(dateStart) = {$m} // where $m is the month which you selected in the dropdown list as passed through ajax

$str = ''
       while($row = mysqli_fetch_array($result)) 
       {
            $str .= '<tr>'
            // your columns text
            $str .= '</tr>'
        }
        return $str;

每次有 ajax 调用时，都会根据过滤器创建新行并填充表格。

希望这有帮助:)