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

Самый простой способ сделать это – установить ссылку на заголовки столбцов, указывая на одну и ту же страницу. В строке запроса поместите переменную так, чтобы вы знали, на что они нажали, а затем используйте 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;

Это на самом деле довольно легко, вот возможный подход:

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

Это будет трюк! 🙂

ПРОСТОЙ ТАБЛИЦЫ СОРТ 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

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

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

 $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>';

 //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 - //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 - //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

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

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

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

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