Question

如何在单击列标题后对下表中的列进行排序。我希望产品名称和价格为ASCEND和DESCEND。我仍然是PHP的初学者，所以请不要判断:)任何帮助表示赞赏

<table style="width:50%" id="table1" align="center">
  <tr>
    <th>Product Name</a></th>
    <th>Price</th> 
    <th>Image</th>
    <th>Quantity</th>
    <th>Buy</th>
  </tr>
<?php 
$connection = mysqli_connect('localhost','root','','part2');
$query="SELECT * FROM products";
$result=mysqli_query($connection, $query);
 while ($row=mysqli_fetch_assoc($result)){
  echo "<tr>";
  echo "<td>";
  echo $row['ProductName'];
  echo "</td>";
  echo "<td>";
  echo "$".$row['Price'];
  echo "</td>";
  echo "<td>";
  echo ' <img src="./images/'.$row['Image'].'" style="width:50px;height:50px"/><br />';
  echo "</td>";
  echo "<td>";
  echo "<form method='post' action='buy.php'>";
  echo "<fieldset>";
  echo "<input type='number' name='quantity' style='width:30px'/>";
  echo "</fieldset>";
  echo "</form>";
  echo "</td>";
  echo "<td>";
  echo '<a href="buy.php?id='. $row['ProductID'].'">Buy</a>';
  echo "</td>";
  echo "</tr>";
}
  ?>
</table>

Answer 1

查看数据表here。它是一个JQuery插件，完全满足您的需求和更多。

提供的链接说明了使它们工作所需的一切，并在网站上提供了一个工作演示，并决定它是否适合您。

我将为您提供如何使用它的快速指南。

<强> HTML

在头标记之间包含对内容交付网络（CDN）上托管的Datatables JS文件的引用

<head> 
  <script src="cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
</head>

还有一个css文件，你可以像这样使用

<head> 
  <script src="cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
  <link  href="cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css">
</head>

最后一项任务，包括您网站中的JQuery，一个Javascript框架，可以减少执行任务所需的代码量，并允许使用最免费提供的预制第三方插件。您可以再次使用CDN托管的JQuery框架副本。

<head> 
  <script src="cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>       // datatable javascript
  <link  href="cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css">              // datatables css
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>  //jquery
</head>

创建一个扩展名为.js的js文件，例如myJSFile.js，并在头文件中包含一个引用，就像之前一样，如果放在父文件夹中，请不要忘记路径。

<head> 
  <script src="cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>       // datatable javascript
  <link  href="cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css">              // datatables css
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>  //jquery
  <script type="text/javascript" src="myJSFile.js"></script>
</head>

<强> JQuery的

这是最容易的部分，为了使你的常规表成为数据表，只需使用它的类/ id作为javascript的选择器

$(document).ready(function()
{
    $('#Table1').DataTable();
});

.ready（）函数确定脚本何时执行，即何时创建了DOM层次结构。

Answer 2

这是一种方法。首先获取您的PHP数据。您可以在$ query字符串中包含“SORT BY。”

<?php 
$connection = mysqli_connect('localhost','root','','part2');
$query="SELECT * FROM products";
$result=mysqli_query($connection, $query);
while ($row[$x]=mysqli_fetch_assoc($result)){
$x++;
}
?>

创建表格。

<table id="myTable" class="tablesorter"> 
<thead> 
<tr> 
   <th>Product Name</a></th>
   <th>Price</th> 
   <th>Image</th>
   <th>Quantity</th>
   <th>Buy</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>Smith</td> 
    <td>John</td> 
    <td>jsmith@gmail.com</td> 
    <td>$50.00</td> 
    <td>http://www.jsmith.com</td> 
</tr> 
<tr> 
    <td>Bach</td> 
    <td>Frank</td> 
    <td>fbach@yahoo.com</td> 
    <td>$50.00</td> 
    <td>http://www.frank.com</td> 
</tr>
</tbody> 
</table>

你可以像这样插入你的数据：

<td> <?php  echo $row[0]['price']; ?></td>
<td> <?php  echo $row[0]['price']; ?></td>
<td> <?php  echo $row[0]['price']; ?></td>

现在导入一个库。将其插入您的头标记：

<script type="text/javascript" src="/path/to/jquery-latest.js"></script> 
<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script>

在页面底部包含此内容：

<script>
$(document).ready(function() 
    { 
        $("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} ); 
    } 
); 
</script>

从tablesorter得到了所有这些！

Answer 3

前几天我需要它，我找到了数据表https://datatables.net/ 加载库只需

$(document).ready(function(){
    $('#myHtmlTableName').DataTable();
});

这很简单。它会像我承诺的魅力一样工作。此外，它看起来很整洁，还有很多其他功能。

Answer 4

我找到的最佳解决方案是在这里：Table Sort with JavaScript

因此，以下代码不是我本人而是威尔·邦特拉格（Will Bontrager）编写！您可以在他的主页上找到一个演示表。真的很好！

通过单击表头标题，可以在两个方向上对表头进行排序（降序，升序）。您可以选择要排序的数据类型（T-文本，N-数字，D-日期）。该示例已得到充分证明。因此，很容易使其适应您的口味。

<div style="overflow-x:auto;"> <!-- Make the table responsive -->
<table id="indextable" border="1" cellpadding="10" cellspacing="0" style="border-collapse:collapse;">
<thead>
<tr>
<th><a href="javascript:SortTable(0,'T');">Author</a></th>
<th><a href="javascript:SortTable(1,'T');">Title</a></th>
<th><a href="javascript:SortTable(2,'N');">Rating</a></th>
<th><a href="javascript:SortTable(3,'D','mdy');">Review Date</a></th>
</tr>
</thead>

接下来，您将以表格的内容为例：

<tbody>
<table id="indextable" border="1" cellpadding="10" cellspacing="0" style="border-collapse:collapse;">
<thead>
<tr>
<th><a href="javascript:SortTable(0,'T');">Author</a></th>
<th><a href="javascript:SortTable(1,'T');">Title</a></th>
<th><a href="javascript:SortTable(2,'N');">Rating</a></th>
<th><a href="javascript:SortTable(3,'D','mdy');">Review Date</a></th>
</tr>
</thead>
<tbody>
<tr>
<td>Orson Scott Card</td>
<td>The Memory Of Earth</td>
<td align="center">2</td>
<td>10/14/11</td>
</tr>
<tr>
<td>Sarah-Kate Lynch</td>
<td>Blessed Are The Cheesemakers</td>
<td align="center">9</td>
<td>1-12-2011</td>
</tr>
<tr>
<td>John Irving</td>
<td>The cider house rules</td>
<td align="center">6</td>
<td>January 31, 11</td>
</tr>
<tr>
<td>Kate Atkinson</td>
<td>When will there be good news?</td>
<td align="center">7</td>
<td>Nov. 31, 2001</td>
</tr>
<tr>
<td>Kathy Hogan Trocheck</td>
<td>Every Crooked Nanny</td>
<td align="center">2</td>
<td>10.21.21</td>
</tr>
<tr>
<td>Stieg Larsson</td>
<td>The Girl With The Dragon Tattoo</td>
<td align="center">2</td>
<td>August 3, 2022</td>
</tr>
</tbody>
</table>
</div>

最后，您需要脚本才能使其正常运行。无需修改脚本。您可以添加任意多的列。该脚本将自动处理它。

<script type="text/javascript">
/* 
   Willmaster Table Sort
   Version 1.1
   August 17, 2016
   Updated GetDateSortingKey() to correctly sort two-digit months and days numbers with leading 0.
   Version 1.0, July 3, 2011

   Will Bontrager
   https://www.willmaster.com/
   Copyright 2011,2016 Will Bontrager Software, LLC

   This software is provided "AS IS," without 
   any warranty of any kind, without even any 
   implied warranty such as merchantability 
   or fitness for a particular purpose.
   Will Bontrager Software, LLC grants 
   you a royalty free license to use or 
   modify this software provided this 
   notice appears on all copies. 
*/
//
// One placed to customize - The id value of the table tag.

var TableIDvalue = "indextable";

//
//////////////////////////////////////
var TableLastSortedColumn = -1;
function SortTable() {
var sortColumn = parseInt(arguments[0]);
var type = arguments.length > 1 ? arguments[1] : 'T';
var dateformat = arguments.length > 2 ? arguments[2] : '';
var table = document.getElementById(TableIDvalue);
var tbody = table.getElementsByTagName("tbody")[0];
var rows = tbody.getElementsByTagName("tr");
var arrayOfRows = new Array();
type = type.toUpperCase();
dateformat = dateformat.toLowerCase();
for(var i=0, len=rows.length; i<len; i++) {
    arrayOfRows[i] = new Object;
    arrayOfRows[i].oldIndex = i;
    var celltext = rows[i].getElementsByTagName("td")[sortColumn].innerHTML.replace(/<[^>]*>/g,"");
    if( type=='D' ) { arrayOfRows[i].value = GetDateSortingKey(dateformat,celltext); }
    else {
        var re = type=="N" ? /[^\.\-\+\d]/g : /[^a-zA-Z0-9]/g;
        arrayOfRows[i].value = celltext.replace(re,"").substr(0,25).toLowerCase();
        }
    }
if (sortColumn == TableLastSortedColumn) { arrayOfRows.reverse(); }
else {
    TableLastSortedColumn = sortColumn;
    switch(type) {
        case "N" : arrayOfRows.sort(CompareRowOfNumbers); break;
        case "D" : arrayOfRows.sort(CompareRowOfNumbers); break;
        default  : arrayOfRows.sort(CompareRowOfText);
        }
    }
var newTableBody = document.createElement("tbody");
for(var i=0, len=arrayOfRows.length; i<len; i++) {
    newTableBody.appendChild(rows[arrayOfRows[i].oldIndex].cloneNode(true));
    }
table.replaceChild(newTableBody,tbody);
} // function SortTable()

function CompareRowOfText(a,b) {
var aval = a.value;
var bval = b.value;
return( aval == bval ? 0 : (aval > bval ? 1 : -1) );
} // function CompareRowOfText()

function CompareRowOfNumbers(a,b) {
var aval = /\d/.test(a.value) ? parseFloat(a.value) : 0;
var bval = /\d/.test(b.value) ? parseFloat(b.value) : 0;
return( aval == bval ? 0 : (aval > bval ? 1 : -1) );
} // function CompareRowOfNumbers()

function GetDateSortingKey(format,text) {
if( format.length < 1 ) { return ""; }
format = format.toLowerCase();
text = text.toLowerCase();
text = text.replace(/^[^a-z0-9]*/,"");
text = text.replace(/[^a-z0-9]*$/,"");
if( text.length < 1 ) { return ""; }
text = text.replace(/[^a-z0-9]+/g,",");
var date = text.split(",");
if( date.length < 3 ) { return ""; }
var d=0, m=0, y=0;
for( var i=0; i<3; i++ ) {
    var ts = format.substr(i,1);
    if( ts == "d" ) { d = date[i]; }
    else if( ts == "m" ) { m = date[i]; }
    else if( ts == "y" ) { y = date[i]; }
    }
d = d.replace(/^0/,"");
if( d < 10 ) { d = "0" + d; }
if( /[a-z]/.test(m) ) {
    m = m.substr(0,3);
    switch(m) {
        case "jan" : m = String(1); break;
        case "feb" : m = String(2); break;
        case "mar" : m = String(3); break;
        case "apr" : m = String(4); break;
        case "may" : m = String(5); break;
        case "jun" : m = String(6); break;
        case "jul" : m = String(7); break;
        case "aug" : m = String(8); break;
        case "sep" : m = String(9); break;
        case "oct" : m = String(10); break;
        case "nov" : m = String(11); break;
        case "dec" : m = String(12); break;
        default    : m = String(0);
        }
    }
m = m.replace(/^0/,"");
if( m < 10 ) { m = "0" + m; }
y = parseInt(y);
if( y < 100 ) { y = parseInt(y) + 2000; }
return "" + String(y) + "" + String(m) + "" + String(d) + "";
} // function GetDateSortingKey()
</script>

如何使表列可排序

4 个答案: