Sortierung von HTML-Tabellen
P粉752479467
P粉752479467 2023-08-27 15:36:19
0
2
515
<p>Im Grunde führe ich also eine MySQL-Abfrage aus, die Daten aus meiner Datenbank abruft und sie in einem leicht lesbaren Layout für den Benutzer anzeigt. </p> <pre class="brush:php;toolbar:false;">Name-----Adresse----Verkäufer</pre> <p>Sie verstehen das Wesentliche. Jetzt möchte ich, dass der Benutzer die HTML-Tabelle nach Verkäufer sortiert. Wie kann ich dies einfach über ein Dropdown-Menü tun? </p> <p><br /></p> <pre class="snippet-code-html lang-html Prettyprint-override"><code><div class='menu'> <ul> <li><a href='#'><span>Verkäufer</span></a> <ul> <li><a href='#'><span>Melissa</span></a></li> <li><a href='#'><span>Justin</span></a></li> <li><a href='#'><span>Judy</span></a></li> <li><a href='#'><span>Skipper</span></a></li> <li><a href='#'><span>Alex</span></a></li> </ul> </li> </ul> </div></code></pre> <p><br /></p>
P粉752479467
P粉752479467

Antworte allen(2)
P粉785905797

这是另一个库。

需要进行的更改是 -

  1. 添加排序js

  2. 将类名sortable添加到表中。

点击表格标题对表格进行相应排序:

<script src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>

<table class="sortable">
  <tr>
    <th>Name</th>
    <th>Address</th>
    <th>Sales Person</th>
  </tr>

  <tr class="item">
    <td>user:0001</td>
    <td>UK</td>
    <td>Melissa</td>
  </tr>
  <tr class="item">
    <td>user:0002</td>
    <td>France</td>
    <td>Justin</td>
  </tr>
  <tr class="item">
    <td>user:0003</td>
    <td>San Francisco</td>
    <td>Judy</td>
  </tr>
  <tr class="item">
    <td>user:0004</td>
    <td>Canada</td>
    <td>Skipper</td>
  </tr>
  <tr class="item">
    <td>user:0005</td>
    <td>Christchurch</td>
    <td>Alex</td>
  </tr>

</table>
P粉642920522

检查您是否可以使用下面提到的任何 JQuery 插件。简直太棒了,提供了广泛的工作选项,并且集成起来更省力。 :)

https://github.com/paulopmx/Flexigrid - Flexgrid
http://datatables.net/index - 数据表。
https://github.com/tonytomov/jqGrid

如果没有,您需要有一个指向那些调用服务器端脚本来调用排序的表头的链接。

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!