如何使 table 列排序 table
How to make table columns sortable
点击 headers 列后，如何对以下 table 中的列进行排序。我希望产品名称和价格上升和下降。我仍然是 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>
这是一种方法。首先获取您的 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。
<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>.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Bach</td>
<td>Frank</td>
<td>fbach@yahoo.com</td>
<td>.00</td>
<td>http://www.frank.com</td>
</tr>
</tbody>
</table>
您可以像这样从 php 插入数据：
<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 获得所有这些！
查看数据tables here。它是一个 JQuery 插件，可以满足您的需求，甚至更多。
所提供的 link 解释了使它们正常工作所需要做的一切，并在网站上提供了一个工作演示，供您试用并确定它是否适合您。
我会为您提供使用方法的快速指南。
HTML
在您的 head 标签之间包含对托管在内容分发网络 (CDN) 上的数据tables 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 框架，它减少了执行任务所需的代码量并允许使用 pre-made 第三方插件这是最免费的。同样，您可以使用 JQuery 框架的 CDN 托管副本。
<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 并像以前一样在 header 中包含一个引用，如果放在 parent 文件夹中不要忘记路径。
<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
这是最简单的部分，要使您的常规 table 成为数据 table，只需使用它的 class/id 作为 javascript [=16= 的选择器]
$(document).ready(function()
{
$('#Table1').DataTable();
});
.ready() 函数决定您的脚本何时执行，即何时创建 DOM 层次结构。
几天前我需要它并且找到了 Datatable https://datatables.net/
加载库，只需
$(document).ready(function(){
$('#myHtmlTableName').DataTable();
});
就这么简单。它会像我保证的魅力一样起作用。此外，它看起来很整洁，还有许多其他功能。
我找到的最佳解决方案是：Table Sort with JavaScript
所以，下面的代码不是我写的，而是 Will Bontrager 写的！您会在他的主页上找到一个演示 table。真不错！
Table header 通过单击 header 标题在两个方向（降序、升序）排序 table。您可以选择要排序的数据类型（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>
接下来以table的内容为例：
<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>
点击 headers 列后，如何对以下 table 中的列进行排序。我希望产品名称和价格上升和下降。我仍然是 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>
这是一种方法。首先获取您的 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。
<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>.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Bach</td>
<td>Frank</td>
<td>fbach@yahoo.com</td>
<td>.00</td>
<td>http://www.frank.com</td>
</tr>
</tbody>
</table>
您可以像这样从 php 插入数据：
<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 获得所有这些！
查看数据tables here。它是一个 JQuery 插件，可以满足您的需求，甚至更多。
所提供的 link 解释了使它们正常工作所需要做的一切，并在网站上提供了一个工作演示，供您试用并确定它是否适合您。
我会为您提供使用方法的快速指南。
HTML
在您的 head 标签之间包含对托管在内容分发网络 (CDN) 上的数据tables 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 框架，它减少了执行任务所需的代码量并允许使用 pre-made 第三方插件这是最免费的。同样，您可以使用 JQuery 框架的 CDN 托管副本。
<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 并像以前一样在 header 中包含一个引用，如果放在 parent 文件夹中不要忘记路径。
<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
这是最简单的部分，要使您的常规 table 成为数据 table，只需使用它的 class/id 作为 javascript [=16= 的选择器]
$(document).ready(function()
{
$('#Table1').DataTable();
});
.ready() 函数决定您的脚本何时执行，即何时创建 DOM 层次结构。
几天前我需要它并且找到了 Datatable https://datatables.net/ 加载库，只需
$(document).ready(function(){
$('#myHtmlTableName').DataTable();
});
就这么简单。它会像我保证的魅力一样起作用。此外，它看起来很整洁，还有许多其他功能。
我找到的最佳解决方案是：Table Sort with JavaScript
所以，下面的代码不是我写的，而是 Will Bontrager 写的！您会在他的主页上找到一个演示 table。真不错！
Table header 通过单击 header 标题在两个方向（降序、升序）排序 table。您可以选择要排序的数据类型（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>
接下来以table的内容为例：
<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>