Как сортировать строки таблицы HTML, вызываемые из MySQL
Я знаю, что это такая основная вещь, но поиск Google не показал мне, как пересобирать строки после нажатия ссылок th.
У меня есть это:
<table border="1">
<tr>
<th>Type:</th>
<th>Description:</th>
<th>Recorded Date:</th>
<th>Added Date:</th>
</tr>
<?php
while($row = mysql_fetch_array($result)){
?>
<tr>
<td><?php echo $row['type'] ?></td>
<td><?php echo $row['description'] ?></td>
<td><?php echo $row['recorded_date'] ?></td>
<td><?php echo $row['added_date'] ?></td>
</tr>
<br />
<?php
}
mysql_close();
?>
</table>
Мне нужно иметь возможность нажимать type и сортировать по алфавиту, а затем нажимать на Recorded Date или Added Date и сортировать по дате. Я вижу, что мне нужно, чтобы запросы MySQL делали это, но я устанавливаю их как условные выражения с тегами a href?
Ответы
Ответ 1
Самый простой способ сделать это - установить ссылку на заголовки столбцов, указывая на одну и ту же страницу. В строке запроса поместите переменную так, чтобы вы знали, на что они нажали, а затем используйте ORDER BY в вашем SQL-запросе для выполнения заказа.
HTML будет выглядеть так:
<th><a href="mypage.php?sort=type">Type:</a></th>
<th><a href="mypage.php?sort=desc">Description:</a></th>
<th><a href="mypage.php?sort=recorded">Recorded Date:</a></th>
<th><a href="mypage.php?sort=added">Added Date:</a></th>
И в php-коде сделайте что-нибудь вроде этого:
<?php
$sql = "SELECT * FROM MyTable";
if ($_GET['sort'] == 'type')
{
$sql .= " ORDER BY type";
}
elseif ($_GET['sort'] == 'desc')
{
$sql .= " ORDER BY Description";
}
elseif ($_GET['sort'] == 'recorded')
{
$sql .= " ORDER BY DateRecorded";
}
elseif($_GET['sort'] == 'added')
{
$sql .= " ORDER BY DateAdded";
}
$>
Обратите внимание, что вы не должны принимать значение $_GET напрямую и добавлять его в свой запрос. Как некоторый пользователь мог попасть в MyPage.php? Sort =; УДАЛИТЬ ИЗ MyTable;
Ответ 2
Это на самом деле довольно легко, вот возможный подход:
<table>
<tr>
<th>
<a href="?orderBy=type">Type:</a>
</th>
<th>
<a href="?orderBy=description">Description:</a>
</th>
<th>
<a href="?orderBy=recorded_date">Recorded Date:</a>
</th>
<th>
<a href="?orderBy=added_date">Added Date:</a>
</th>
</tr>
</table>
<?php
$orderBy = array('type', 'description', 'recorded_date', 'added_date');
$order = 'type';
if (isset($_GET['orderBy']) && in_array($_GET['orderBy'], $orderBy)) {
$order = $_GET['orderBy'];
}
$query = 'SELECT * FROM aTable ORDER BY '.$order;
// retrieve and show the data :)
?>
Это будет трюк!:)
Ответ 3
ПРОСТОЙ ТАБЛИЧНЫЙ СОРТ PHP КОД:
(простая таблица для обработки и сортировки нескольких значений, используя этот sortable.js script)
<html><head>
<script src="sorttable.js"></script>
<style>
tbody tr td {color:green;border-right:1px solid;width:200px;}
</style>
</head><body>
<?php
$First = array('a', 'b', 'c', 'd');
$Second = array('1', '2', '3', '4');
if (!empty($_POST['myFirstvalues']))
{ $First = explode("\r\n",$_POST['myFirstvalues']); $Second = explode("\r\n",$_POST['mySecondvalues']);}
?>
</br>Hi User. PUT your values</br></br>
<form action="" method="POST">
projectX</br>
<textarea cols="20" rows="20" name="myFirstvalues" style="width:200px;background:url(untitled.PNG);position:relative;top:19px;Float:left;">
<?php foreach($First as $vv) {echo $vv."\r\n";}?>
</textarea>
The due amount</br>
<textarea cols="20" rows="20" name="mySecondvalues" style="width:200px;background:url(untitled.PNG);Float:left;">
<?php foreach($Second as $vv) {echo $vv."\r\n";}?>
</textarea>
<input type="submit">
</form>
<table class="sortable" style="padding:100px 0 0 300px;">
<thead style="background-color:#999999; color:red; font-weight: bold; cursor: default; position:relative;">
<tr><th>ProjectX</th><th>Due amount</th></tr>
</thead>
<tbody>
<?php
foreach($First as $indx => $value) {
echo '<tr><td>'.$First[$indx].'</td><td>'.$Second[$indx].'</td></tr>';
}
?>
</tbody>
<tfoot><tr><td>TOTAL = <b>111111111</b></td><td>Still to spend = <b>5555555</b></td></tr></tfoot></br></br>
</table>
</body>
</html>
source: таблица сортировки php
Ответ 4
Это самое простое решение, которое использует:
//Используйте это как первую строку при загрузке страницы
$sort = $_GET['s'];
//Затем просто сортируем по этой переменной
$sql="SELECT * FROM tracks ORDER BY $sort";
echo '<tr>';
echo '<td><a href="report_tracks.php?s=title">Title</a><td>';
echo '<td><a href="report_tracks.php?s=album">Album</a><td>';
echo '<td><a href="report_tracks.php?s=artist">Artist</a><td>';
echo '<td><a href="report_tracks.php?s=count">Count</a><td>';
echo '</tr>';
Ответ 5
//this is a php file
<html>
<head>
<style>
a:link {color:green;}
a:visited {color:purple;}
A:active {color: red;}
A:hover {color: red;}
table
{
width:50%;
height:50%;
}
table,th,td
{
border:1px solid black;
}
th,td
{
text-align:center;
background-color:yellow;
}
th
{
background-color:green;
color:white;
}
</style>
<script type="text/javascript">
function working(str)
{
if (str=="")
{
document.getElementById("tump").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("tump").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getsort.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body bgcolor="pink">
<form method="post">
<select name="sortitems" onchange="working(this.value)">
<option value="">Select</option>
<option value="Id">Id</option>
<option value="Name">Name</option>
<option value="Email">Email</option>
<option value="Password">Password</option>
</select>
<?php
$connect=mysql_connect("localhost","root","");
$db=mysql_select_db("test1",$connect);
$sql=mysql_query("select * from mine");
echo "<center><br><br><br><br><table id='tump' border='1'>
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Password</th>
</tr>";
echo "<tr>";
while ($row=mysql_fetch_array($sql))
{?>
<td><?php echo "$row[Id]";?></td>
<td><?php echo "$row[Name]";?></td>
<td><?php echo "$row[Email]";?></td>
<td><?php echo "$row[Password]";?></td>
<?php echo "</tr>";
}
echo "</table></center>";?>
</form>
<br>
<div id="tump"></div>
</body>
</html>
------------------------------------------------------------------------
that is another php file
<html>
<body bgcolor="pink">
<head>
<style>
a:link {color:green;}
a:visited {color:purple;}
A:active {color: red;}
A:hover {color: red;}
table
{
width:50%;
height:50%;
}
table,th,td
{
border:1px solid black;
}
th,td
{
text-align:center;
background-color:yellow;
}
th
{
background-color:green;
color:white;
}
</style>
</head>
<?php
$q=$_GET['q'];
$connect=mysql_connect("localhost","root","");
$db=mysql_select_db("test1",$connect);
$sql=mysql_query("select * from mine order by $q");
echo "<table id='tump' border='1'>
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Password</th>
</tr>";
echo "<tr>";
while ($row=mysql_fetch_array($sql))
{?>
<td><?php echo "$row[Id]";?></td>
<td><?php echo "$row[Name]";?></td>
<td><?php echo "$row[Email]";?></td>
<td><?php echo "$row[Password]";?></td>
<?php echo "</tr>";
}
echo "</table>";?>
</body>
</html>
that will sort the table using ajax
Ответ 6
Это зависит от характера ваших данных. Ответ зависит от его размера и типа данных. Я видел множество SQL-решений на основе ORDER BY. Я хотел бы предложить альтернативы javascript.
Во всех ответах я не вижу, чтобы кто-то упоминал проблему разбивки на страницы для вашей будущей таблицы. Пусть облегчит вам жизнь. Если в вашей таблице нет разбивки на страницы, более вероятно, что решение javascript сделает все аккуратным и чистым для вас на стороне клиента. Если вы считаете, что эта таблица взорвется после того, как вы поместите в нее данные, вам также нужно подумать о разбиении на страницы. (вам нужно перейти на первую страницу каждый раз, когда вы меняете столбец сортировки)
Другим аспектом является тип данных. Если вы используете SQL, вам нужно быть осторожным в отношении типа ваших данных и каких типов сортировки для него. Например, если в одном из ваших столбцов VARCHAR хранятся целые числа, сортировка не учитывает их целочисленное значение: вместо 1, 2, 11, 22 вы получите 1, 11, 2, 22.
Вы можете найти плагины jquery или отдельные таблицы сортировки javascript в google. Стоит отметить, что <table> в HTML5 имеет атрибут sortable, но, по-видимому, он еще не реализован.
