Question

我有一个简单的php页面，显示mysql表中的数据。我可以对其进行编辑，并且效果完美。但我希望能够通过单击列标题（ASC和DESC）来对数据进行排序。

我知道我必须在标题中添加超链接，但是我发现的信息并没有帮助我。

<?php
include_once("config.php");
$result = mysqli_query($mysqli, "SELECT * FROM material ORDER BY date ASC");
?>

<html>
<head>    
    <title>Material</title>
</head>

<body>
    <h2>Material</h2>
    <input type="button" value="Home" onclick="document.location='../index.html';">
    <input type="button" value="Add data" onclick="document.location='add.html';">
    </br>
    </br>

    <table width='80%' border=0>
        <tr bgcolor='#CCCCCC'>
            <td><b>Count</b></td>
            <td><b>Name</b></td>
            <td><b>Place</b></td>
            <td><b>Serialnumber</b></td>
            <td><b>Last Check</b></td>
            <td><b>Next Check</b></td>
            <td><b>End of life Date</b></td>
            <td><b>Update</b></td>
        </tr>
        <?php 
        //while($res = mysql_fetch_array($result)) { // mysql_fetch_array is deprecated, we need to use mysqli_fetch_array 
        while($res = mysqli_fetch_array($result)) {         
            echo "<tr>";
            echo "<td>".$res['count']."</td>";
            echo "<td>".$res['name']."</td>";
            echo "<td>".$res['place']."</td>";
            echo "<td>".$res['serialnumber']."</td>";
            echo "<td>".$res['last_check']."</td>";
            echo "<td>".$res['next_check']."</td>";
            echo "<td>".$res['date']."</td>";           
            echo "<td><a href=\"edit.php?id=$res[id]\"><button>Edit</button></a></td>";        
        }
        ?>
    </table>
</body>
</html>

Answer 1

请省去使用数据表的麻烦。很好，但是我个人不喜欢使用它，因为表格没有响应。我宁愿使用香草JavaScript和引导程序来获得最大的响应速度。我没有在响应中添加Bootstrap，但可以轻松添加。

您可以轻松地在客户端实现排序表。通过单击表标题对数据进行排序：

function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("myTable");
  switching = true;
  //Set the sorting direction to ascending:
  dir = "asc"; 
  /*Make a loop that will continue until
  no switching has been done:*/
  while (switching) {
    //start by saying: no switching is done:
    switching = false;
    rows = table.rows;
    /*Loop through all table rows (except the
    first, which contains table headers):*/
    for (i = 1; i < (rows.length - 1); i++) {
      //start by saying there should be no switching:
      shouldSwitch = false;
      /*Get the two elements you want to compare,
      one from current row and one from the next:*/
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      /*check if the two rows should switch place,
      based on the direction, asc or desc:*/
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          //if so, mark as a switch and break the loop:
          shouldSwitch= true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          //if so, mark as a switch and break the loop:
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      /*If a switch has been marked, make the switch
      and mark that a switch has been done:*/
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      //Each time a switch is done, increase this count by 1:
      switchcount ++;      
    } else {
      /*If no switching has been done AND the direction is "asc",
      set the direction to "desc" and run the while loop again.*/
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}

table {
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

th {
  cursor: pointer;
}

th, td {
  text-align: left;
  padding: 16px;
}

tr:nth-child(even) {
  background-color: #f2f2f2
}

<table id="myTable">
  <tr>
   <!--When a header is clicked, run the sortTable function, with a parameter, 0 for sorting by names, 1 for sorting by country:-->  
    <th onclick="sortTable(0)">Name</th>
    <th onclick="sortTable(1)">Country</th>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>Paris specialites</td>
    <td>France</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Canada</td>
  </tr>
</table>

如何通过Cloumn在php中订购mysql数据？

1 个答案: