javascript - 通过ajax对Mysql表进行排序

Question

我的网络应用程序屏幕如下所示。选择下拉列表并单击显示按钮后，它会生成如下所示的表格(无排序)。

我在此表中的要求是按升序和降序对单击的列标题上的表进行排序，即当我首先单击名称列时，它应该以升序显示，其次单击此按钮时，它应该以降序显示。

到目前为止我只实现了提升。

首先，我通过此脚本单击显示按钮生成了未排序的表格

echo "<tr><th align=\"center\">Name</th><th align=\"center\">Type</th><th align=\"center\">Local Body</th>
      <th align=\"center\"><button type=\"btnEdit\" name=\"edit\"  id=\"Name.ASC\" class=\"btn btn-link \" onclick=\"sortBy(this.id)\">Absenteeism</button></th>
      <th align=\"center\"><button type=\"btnEdit\" name=\"edit\"  id=\"District.ASC\" class=\"btn btn-link \" onclick=\"sortBy(this.id)\">Creativity</button></th>
      <th align=\"center\"><button type=\"btnEdit\" name=\"edit\"  id=\"Income.ASC\" class=\"btn btn-link \" onclick=\"sortBy(this.id)\">Problem Solving</button></th> 
      <th align=\"center\"><button type=\"btnEdit\" name=\"edit\"  id=\"Total.ASC\" class=\"btn btn-link \" onclick=\"sortBy(this.id)\">Total</button></th>
      </tr>";
      while($row = mysql_fetch_array($result)){

                  $name= $row['Name'];
                  $dist= $row['District'];
                  $inc=$row['Income'];
                  $total=$row['Total'];
      echo "<tr><form name=\"form\" id=\"form\"> <td style=\"width: 200px\">".$name."</td> <td style=\"width: 100px\">".$dist."</td> <td style=\"width: 150px\">".$inc."</td>             
            <td style=\"width: 100px\">".$total." </td>
            </form>
            </tr>";

} 

      echo "</table><br /><br /></div>";

当我单击“名称”列时，它会将“Name.ASC”id 传递给 javascript 函数。

我的Javascript函数是

function sortBy(btn){

  var a=btn.split(".");
  var b="";
  (a[1]== "ASC") ? b= "DESC" : b= "ASC";
  var c=a[0]+"."+b;
  document.getElementById(btn).id= c; 

  var dataString = 'sorter='+ btn + '&sel_year=' + sel_year + '&sel_trimester=' + sel_trimester;

   $.ajax({
      type: "POST",
      url: "tbl_sort.php",
      data: dataString,
      cache: true,
      success: function(html){

          $("#result_table").html(html);
      }

      });

 }

我的 tbl_sort php 页面是

if (isset($_POST['sorter'])){


  $array = explode(".", $_POST['sorter']);


  $sql = "SELECT Name,District,Land,Income,Total from tbl_details where  Year='$year' and trimester='$trimester' ORDER BY $array[0]  $array[1]  ";

  $result = mysql_query($sql)or die(mysql_error());
  echo "<tr><th align=\"center\">Name</th><th align=\"center\">Type</th><th align=\"center\">Local Body</th>
      <th align=\"center\"><button type=\"btnEdit\" name=\"edit\"  id=\"Name.ASC\" class=\"btn btn-link \" onclick=\"sortBy(this.id)\">Absenteeism</button></th>
      <th align=\"center\"><button type=\"btnEdit\" name=\"edit\"  id=\"District.ASC\" class=\"btn btn-link \" onclick=\"sortBy(this.id)\">Creativity</button></th>
      <th align=\"center\"><button type=\"btnEdit\" name=\"edit\"  id=\"Income.ASC\" class=\"btn btn-link \" onclick=\"sortBy(this.id)\">Problem Solving</button></th> 
      <th align=\"center\"><button type=\"btnEdit\" name=\"edit\"  id=\"Total.ASC\" class=\"btn btn-link \" onclick=\"sortBy(this.id)\">Total</button></th>
      </tr>";
      while($row = mysql_fetch_array($result)){

                  $name= $row['Name'];
                  $dist= $row['District'];
                  $inc=$row['Income'];
                  $total=$row['Total'];
      echo "<tr><form name=\"form\" id=\"form\"> <td style=\"width: 200px\">".$name."</td> <td style=\"width: 100px\">".$dist."</td> <td style=\"width: 150px\">".$inc."</td>             
            <td style=\"width: 100px\">".$total." </td>
            </form>
            </tr>";

} 

      echo "</table><br /><br /></div>";

} 

由于我最初已经传递了“column_name.ASC”id，因此它只会按升序排序。我 我无法按降序排列。

我已经拿了this youtube video作为我的引用。

感谢任何帮助。

Answer 1

好吧，这不是一个很好的方法来完成你正在做的事情，但它会起作用(假设我的头脑中代码没问题)

更改:

  echo "<tr><th align=\"center\">Name</th><th align=\"center\">Type</th><th align=\"center\">Local Body</th>
      <th align=\"center\"><button type=\"btnEdit\" name=\"edit\"  id=\"Name.ASC\" class=\"btn btn-link \" onclick=\"sortBy(this.id)\">Absenteeism</button></th>
      <th align=\"center\"><button type=\"btnEdit\" name=\"edit\"  id=\"District.ASC\" class=\"btn btn-link \" onclick=\"sortBy(this.id)\">Creativity</button></th>
      <th align=\"center\"><button type=\"btnEdit\" name=\"edit\"  id=\"Income.ASC\" class=\"btn btn-link \" onclick=\"sortBy(this.id)\">Problem Solving</button></th> 
      <th align=\"center\"><button type=\"btnEdit\" name=\"edit\"  id=\"Total.ASC\" class=\"btn btn-link \" onclick=\"sortBy(this.id)\">Total</button></th>

至:

  $idName=($array[0]=='Name')?($array[1]=='ASC')?'Name.DESC':'Name.ASC':'Name.ASC';
  $idDistrict=($array[0]=='District')?($array[1]=='ASC')?'District.DESC':'District.ASC':'District.ASC';
  $idIncome=($array[0]=='Income')?($array[1]=='ASC')?'Income.DESC':'Income.ASC':'Income.ASC';
  $idTotal=($array[0]=='Total')?($array[1]=='ASC')?'Total.DESC':'Total.ASC':'Total.ASC';

  $idName=($idName=='')?'Name.ASC':$idName;
  $idDistrict=($idDistrict=='')?'District.ASC':$idDistrict;
  $idIncome=($idIncome=='')?'Income.ASC':$idIncome;
  $idTotal=($idTotal=='')?'Total.ASC':$idTotal;

  echo "<tr><th align=\"center\">Name</th><th align=\"center\">Type</th><th align=\"center\">Local Body</th>
    <th align=\"center\"><button type=\"btnEdit\" name=\"edit\"  id=\"".$idName."\" class=\"btn btn-link \" onclick=\"sortBy(this.id)\">Absenteeism</button></th>
    <th align=\"center\"><button type=\"btnEdit\" name=\"edit\"  id=\"".$idDistrict."\" class=\"btn btn-link \" onclick=\"sortBy(this.id)\">Creativity</button></th>
    <th align=\"center\"><button type=\"btnEdit\" name=\"edit\"  id=\"".$idIncome."\" class=\"btn btn-link \" onclick=\"sortBy(this.id)\">Problem Solving</button></th> 
    <th align=\"center\"><button type=\"btnEdit\" name=\"edit\"  id=\"".$idTotal."\" class=\"btn btn-link \" onclick=\"sortBy(this.id)\">Total</button></th>

这将切换允许 ASC DESC 点击的 ID。