Как сортировать строки таблицы 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?

Author: ekad, 2010-08-16
Source

6 answers

Самый простой способ сделать это - поместить ссылку в заголовки столбцов, указывающую на ту же страницу. В строке запроса введите переменную, чтобы вы знали, на что они нажали, а затем используйте 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?сортировать=; УДАЛИТЬ ИЗ mytable;

 39
Author: Kibbee, 2010-08-16 00:45:41

На самом деле это довольно просто, вот возможный подход: 

<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 :)
?>

Это сработает!:)

 38
Author: Guido Hendriks, 2010-08-16 00:08:54

ПРОСТАЯ СОРТИРОВКА ТАБЛИЦ PHP КОД:

(простая таблица для обработки и сортировки нескольких значений с использованием этого sortable.js сценарий)

<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  = &nbsp;<b>111111111</b></td><td>Still to spend  = &nbsp;<b>5555555</b></td></tr></tfoot></br></br>
</table>
</body>
</html>

Источник: сортируемая таблица php

 1
Author: T.Todua, 2017-05-23 10:31:16

Это самое простое решение, которое использует:

//Используйте это в качестве первой строки при загрузке страницы

$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>';
 1
Author: NetTemple, 2016-01-09 17:31:04 
//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
 0
Author: sankarshan, 2013-04-24 11:54:34

Это зависит от характера ваших данных. Ответ зависит от его размера и типа данных. Я видел много SQL-решений, основанных на ORDER BY. Я хотел бы предложить альтернативы javascript.

Во всех ответах я не вижу, чтобы кто-нибудь упоминал проблему разбиения на страницы для вашей будущей таблицы. Давайте сделаем это проще для вас. Если в вашей таблице нет разбиения на страницы, более вероятно, что решение javascript сделает все аккуратным и чистым для вас на стороне клиента. Если вы думаете, что эта таблица будет взорвитесь после того, как вы разместите в нем данные, вам также придется подумать о разбивке на страницы. (вы должны переходить на первую страницу каждый раз, когда меняете столбец сортировки)

Еще одним аспектом является тип данных. Если вы используете SQL, вы должны быть осторожны с типом ваших данных и с тем, какие наборы сортировки для них. Например, если в одном из ваших столбцов VARCHAR вы храните целые числа, сортировка не будет учитывать их целочисленное значение: вместо 1, 2, 11, 22 вы получите 1, 11, 2, 22.

Вы можете найдите плагины jquery или автономные таблицы сортировки javascript в Google. Стоит отметить, что <table> в HTML5 имеет атрибут sortable, но, по-видимому, он еще не реализован.

 0
Author: Mehdi, 2016-10-14 07:09:24