如何使表格列可排序
[英]How to make table columns sortable
問題描述
單擊列標題后，如何對下表中的列進行排序。 我希望產品名稱和價格為 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>
4 個解決方案
解決方案1
2 已采納 2015-01-05 21:33:44
在這里查看數據表。 它是一個 JQuery 插件，可以完全滿足您的需求以及更多功能。
提供的鏈接解釋了使它們工作所需的一切，並在網站上提供了一個工作演示供您使用並確定它是否適合您。
我會給你一個如何使用它的快速指南。
HTML
在 head 標簽之間包含對托管在內容交付網絡 (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 框架，它減少了執行任務所需的代碼量，並允許使用最免費的預制第三方插件。 同樣，您可以使用 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 並像以前一樣在標題中包含一個引用，如果放置在父文件夾中，請不要忘記路徑。
<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>
查詢
這是最簡單的部分，要使您的常規表成為數據表，只需使用其 class/id 作為 javascript 的選擇器
$(document).ready(function()
{
$('#Table1').DataTable();
});
.ready() 函數確定腳本何時執行，即 DOM 層次結構何時創建。
解決方案2
0 2015-01-05 21:29:11
這是一種方法。 首先獲取您的 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>
您可以像這樣從 php 插入數據：
<td> <?php echo $row[0]['price']; ?></td>
<td> <?php echo $row[0]['price']; ?></td>
<td> <?php echo $row[0]['price']; ?></td>
現在導入一個庫。 將此插入到您的 head 標簽中：
<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得到這一切！
解決方案3
0 2015-01-05 22:43:38
幾天前我需要它，我找到了 Datatable https://datatables.net/加載庫，然后
$(document).ready(function(){
$('#myHtmlTableName').DataTable();
});
就這么簡單。 它會像我保證的魅力一樣發揮作用。 此外，它看起來很整潔，還有許多其他功能。
解決方案4
0 2019-12-28 21:59:43
我找到的最佳解決方案在這里： 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>
如何在帶有箭頭的ASC和DESC的Joomla組件（表）中添加可排序的列
[英]How to add sortable columns in a Joomla component (table), both ASC and DESC with an arrow
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.