动态PHP表过滤器和排序

我已经编写了一些CSS和PHP来查询MySQL表。我还有一个下拉框形式的过滤器，它允许用户选择一个“系列”，无论是“电容器”、“电阻器”还是“铁氧体磁珠”（我在下面附上了它的图片）

我的问题是：在元素按族过滤后，如何为元素创建排序系统？也就是说，如果我想从MySQL中查询对应于ASC值“voltage”的表，我该怎么做？选择排序方法时，我需要保留过滤器。到目前为止，我已经在图片下方包含了我的代码。谢谢你的帮助

（如下：1，加载完整表格：2，仅加载与“电容器”匹配的族条目）

代码：（文件名，index.php）

任何家庭
电容器
电阻
铁素体磁珠
test.php
桌子{
边界塌陷：塌陷；
宽度：50%；
}
th，td{
输入：“文本”；
文本对齐：左对齐；
填充：8px；
}
th{
背景色：天蓝色；
}
tr:n子（奇数）{背景色：#f2f2；}
tr:hover{背景色：AliceBlue；}

您可以将$\u POST['family']保存在隐藏字段中（可能是$\u POST['hidden\u family']）。当您进行下一级搜索时，您可以检查它，如果它不是空的，则每次都将其附加到搜索中。

以下是对表格进行数字排序的方法：
1） 为目标表指定一个ID（在我的代码中是主表）
2） 每次单击表标题时调用排序函数（包括列号，第一个是0，每次添加更多列时，函数名称内的数字增加1，在本例中为sortTable（0），sortTable（1），。。。。
最终结果如下所示（测试此示例，结果有效）：

第0列
第1栏
第2栏
第3栏
第4栏
函数可排序（列）{
var表，行，切换，i，x，y，shouldSwitch；
table=document.getElementById（“主表”）；
切换=真；
while（切换）{
切换=错误；
行=table.getElementsByTagName（“TR”）；
对于（i=1；i<（rows.length-1）；i++）{
shouldSwitch=false；
x=行[i].getElementsByTagName（“TD”）[column]；
y=行[i+1].getElementsByTagName（“TD”）[column]；
if（Number（x.innerHTML）>Number（y.innerHTML））{
shouldSwitch=true；
打破
}
}
如果（应切换）{
行[i].parentNode.insertBefore（行[i+1]，行[i]）；
切换=真；
}
}
}

下面是生成列号所需的操作：

$counter = 0;
foreach ($row as $field => $value){
print " <th onclick='sortTable($counter)'>$field</th>";
$counter = $counter+1;
}

$counter=0；
foreach（$行作为$字段=>$值）{
打印“$field”；
$counter=$counter+1；
}

Datatables也很酷。正常的功能是使用JavaScript，但您可以将其配置为使用服务器资源，在服务器上处理日期，然后只显示结果。一旦掌握了窍门，就很容易了

---

每次您对数据进行排序或筛选时，datatable都会发送一个包含所有必要信息的数组，因此您只需扫描该数组并相应地生成查询。

您可以在表单中添加排序下拉列表并在查询中使用它。这样，您就可以让用户选择排序方法并在服务器端进行处理

<form action="index.php" method="post">
      <select name="family">
         <option value="" selected="selected">Any family</option>
         <option value="capacitor">capacitor</option>
         <option value="resistor">resistor</option>
         <option value="ferrite bead">ferrite bead</option>
      </select>
      <select name="sort">
         <option value="" selected="selected">Any Order</option>
         <option value="ASC">Ascending</option>
         <option value="DESC">Descending</option>
      </select>
      <input name="search" type="submit" value="Search"/>
   </form>

---

如果您不想使用专用的表排序库，您应该能够自己完成这项工作

//最初填充表
可普及（数据）；
//收听排序按钮上的单击
$（'.sort'）。在（'click'，function（）上{
//根据按钮的值获取密钥
var key=$（this.html（）；
//对数据进行排序并更新我们的数据
数据=排序方式（数据，键）；
//用我们的数据填写表格
可普及（数据）；
});
//修改自：https://www.sitepoint.com/sort-array-index/
功能排序（输入数据，键）{
//根据给定的键对数据进行排序
inputData.sort（函数（a，b）{
var aVal=a[键]，
bVal=b[键]；
if（aVal==bVal）返回0；
返回aVal>bVal？1:-1；
});
返回输入数据；
}
//修改自：https://stackoverflow.com/questions/5361810/fast-way-to-dynamically-fill-table-with-data-from-json-in-javascript
函数populateTable（inputData）{
var keys=新数组（），
i=-1；
//创建一个键数组
$.each（输入数据[0]，函数（键，值）{
键[++i]=键；
});
var r=新数组（），
j=-1；
//填充表格标题
r[++j]=''；
$。每个（键、函数（键、值）{
r[++j]=''+键[键]+''；
});
r[++j]=''；
对于（var index=0，size=inputData.length；index

表格{
边界塌陷：塌陷；
宽度：100%；
}
th，
运输署{
文本对齐：左对齐；
填充：8px；
}
th{
背景色：天蓝色；
}
tr:n个孩子（奇数）{
背景色：#F2F2；
}
tr：悬停{
背景色：aliceblue；
}

//设置我们的数据
风险值数据=[{
ID:1，
家族：'电阻'，
电容：7，
电压：6，
价格：25.6
},
{
ID:2，
家庭：“电容器”，
电容：10，
电压：10，
价格:100.2
},
{
ID:3，
家庭：铁氧体bea
$counter = 0;
foreach ($row as $field => $value){
print " <th onclick='sortTable($counter)'>$field</th>";
$counter = $counter+1;
}

<form action="index.php" method="post">
      <select name="family">
         <option value="" selected="selected">Any family</option>
         <option value="capacitor">capacitor</option>
         <option value="resistor">resistor</option>
         <option value="ferrite bead">ferrite bead</option>
      </select>
      <select name="sort">
         <option value="" selected="selected">Any Order</option>
         <option value="ASC">Ascending</option>
         <option value="DESC">Descending</option>
      </select>
      <input name="search" type="submit" value="Search"/>
   </form>

<?php
      $family = "";
      $sort = "";
      if(isset($_POST['family'])) {
         $family = $_POST['family'];
      }

if(!empty($family)) {
        $query = 'SELECT * FROM testv2 WHERE family = "'.$family.'" ORDER BY "'.$sort'"';
         }
         else {
        $query = "SELECT * FROM testv2";
         }